{"id":12,"date":"2026-07-29T16:55:08","date_gmt":"2026-07-29T16:55:08","guid":{"rendered":"https:\/\/demowebdesign.live\/juan\/?page_id=12"},"modified":"2026-07-29T22:32:04","modified_gmt":"2026-07-29T22:32:04","slug":"home","status":"publish","type":"page","link":"https:\/\/demowebdesign.live\/juan\/index.php\/home\/","title":{"rendered":"HOME"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7165d83 e-flex e-con-boxed e-con e-parent\" data-id=\"7165d83\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ae3910 elementor-widget elementor-widget-html\" data-id=\"1ae3910\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t <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=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&family=Pinyon+Script&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    :root {\r\n      --color-bg: #F8F4EA;\r\n      --color-alt-bg: #EFE6D2;\r\n      --color-card-bg: #D8C3A5;\r\n      --color-gold: #8B6B3E;\r\n      --color-heading: #25364A;\r\n      --color-body: #4B3B2A;\r\n      --color-hero-bg: #FDFBF7;\r\n      --color-border: #B08D57;\r\n      --color-dark-slate: #1C2630;\r\n      --font-heading: 'Cinzel Decorative', serif;\r\n      --font-secondary: 'Cormorant Garamond', serif;\r\n      --font-body: 'Inter', sans-serif;\r\n      --font-ink: 'Pinyon Script', cursive;\r\n    }\r\n\r\n    \/* Premium floating header styles moved here *\/\r\n    .premium-header {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      z-index: 999;\r\n      background: rgba(248, 244, 234, 0.75);\r\n      backdrop-filter: blur(12px);\r\n      -webkit-backdrop-filter: blur(12px);\r\n      border-bottom: 1px solid rgba(176, 141, 87, 0.2);\r\n      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);\r\n      padding: 1rem 2rem;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .premium-nav-container {\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n    }\r\n\r\n.footer-brand-logo {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    gap: 12px;\r\n    text-decoration: none;\r\n    color: #25364A !important;\r\n    font-size: 1.8rem;\r\n    font-weight: 700;\r\n    letter-spacing: 2px;\r\n    text-transform: uppercase;\r\n    transition: all 0.3s ease;\r\n    text-decoration: none !important;\r\n}\r\n\r\n.footer-brand-logo svg {\r\n    width: 32px;\r\n    height: 32px;\r\n    fill: currentColor;\r\n    flex-shrink: 0;\r\n}\r\n\r\n.footer-brand-logo:hover {\r\n    color: #d4af37; \/* Change to your accent color *\/\r\n    transform: translateY(-2px);\r\n}\r\n\r\n    .nav-links {\r\n      display: flex;\r\n      gap: 2rem;\r\n      align-items: center;\r\n    }\r\n\r\n    .nav-links a {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.95rem;\r\n      font-weight: 600;\r\n      letter-spacing: 0.15em;\r\n      color: var(--color-body);\r\n      text-decoration: none !important;\r\n      text-transform: uppercase;\r\n      position: relative;\r\n      padding: 0.4rem 0;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    .nav-links a::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 50%;\r\n      width: 0;\r\n      height: 1.5px;\r\n      background-color: var(--color-gold);\r\n      transition: width 0.3s ease, left 0.3s ease;\r\n    }\r\n\r\n    .nav-links a:hover { color: var(--color-gold); }\r\n    .nav-links a:hover::after { width: 100%; left: 0; }\r\n\r\n    .nav-buy-btn {\r\n      background: var(--color-gold);\r\n      color: var(--color-hero-bg) !important;\r\n      padding: 0.6rem 1.6rem !important;\r\n      border: 1px solid var(--color-gold);\r\n      border-radius: 2px;\r\n      box-shadow: 0 4px 10px rgba(139, 107, 62, 0.15);\r\n      transition: all 0.3s ease !important;\r\n    }\r\n\r\n    .nav-buy-btn:hover {\r\n      background: #765a32 !important;\r\n      border-color: #765a32 !important;\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 15px rgba(139, 107, 62, 0.3) !important;\r\n    }\r\n\r\n    .nav-buy-btn::after { display: none !important; }\r\n\r\n    \/* Simple container styling for integration *\/\r\n    header.premium-header .brand-logo { text-transform: uppercase; }\r\n    \/* ==============================\r\n   Responsive Header\r\n============================== *\/\r\n\r\n\/* Large Tablets *\/\r\n@media (max-width: 1024px) {\r\n\r\n  .premium-header {\r\n    padding: 0.9rem 1.5rem;\r\n  }\r\n\r\n  .premium-nav-container {\r\n    gap: 1rem;\r\n  }\r\n\r\n  .nav-links {\r\n    gap: 1.2rem;\r\n  }\r\n\r\n  .nav-links a {\r\n    font-size: 0.85rem;\r\n    letter-spacing: 0.1em;\r\n  }\r\n\r\n  .nav-buy-btn {\r\n    padding: 0.55rem 1.2rem !important;\r\n  }\r\n\r\n}\r\n\r\n\/* Tablets *\/\r\n@media (max-width: 768px) {\r\n\r\n  .premium-header {\r\n    padding: 0.8rem 1rem;\r\n  }\r\n\r\n  .premium-nav-container {\r\n    flex-direction: column;\r\n    gap: 1rem;\r\n  }\r\n\r\n  .brand-logo {\r\n    font-size: 1.3rem;\r\n  }\r\n\r\n  .brand-logo svg {\r\n    width: 24px;\r\n    height: 24px;\r\n  }\r\n\r\n  .nav-links {\r\n    flex-wrap: wrap;\r\n    justify-content: center;\r\n    gap: 1rem;\r\n  }\r\n\r\n  .nav-links a {\r\n    font-size: 0.8rem;\r\n  }\r\n\r\n  .nav-buy-btn {\r\n    padding: 0.55rem 1rem !important;\r\n  }\r\n\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 576px) {\r\n\r\n  .premium-header {\r\n    padding: 0.75rem;\r\n  }\r\n\r\n  .premium-nav-container {\r\n    flex-direction: column;\r\n    align-items: center;\r\n    text-align: center;\r\n  }\r\n\r\n  .brand-logo {\r\n    font-size: 1.1rem;\r\n    gap: 0.5rem;\r\n  }\r\n\r\n  .brand-logo svg {\r\n    width: 22px;\r\n    height: 22px;\r\n  }\r\n\r\n  .nav-links {\r\n    width: 100%;\r\n    justify-content: center;\r\n    gap: 0.75rem;\r\n  }\r\n\r\n  .nav-links a {\r\n    font-size: 0.75rem;\r\n    letter-spacing: 0.08em;\r\n  }\r\n\r\n  .nav-buy-btn {\r\n    padding: 0.5rem 0.9rem !important;\r\n    font-size: 0.75rem;\r\n  }\r\n\r\n}\r\n\r\n\/* Small Mobile *\/\r\n@media (max-width: 400px) {\r\n\r\n  .brand-logo {\r\n    font-size: 1rem;\r\n  }\r\n\r\n  .nav-links {\r\n    gap: 0.6rem;\r\n  }\r\n\r\n  .nav-links a {\r\n    font-size: 0.7rem;\r\n  }\r\n\r\n  .nav-buy-btn {\r\n    width: 100%;\r\n    text-align: center;\r\n  }\r\n\r\n}\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n  <header class=\"premium-header\">\r\n    <div class=\"premium-nav-container\">\r\n      <a href=\"home.html\" class=\"footer-brand-logo\"> <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C11.3 2 10.7 2.6 10.7 3.3V10.7H3.3C2.6 10.7 2 11.3 2 12C2 12.7 2.6 13.3 3.3 13.3H10.7V20.7C10.7 21.4 11.3 22 12 22C12.7 22 13.3 21.4 13.3 20.7V13.3H20.7C21.4 13.3 22 12.7 22 12C22 11.3 21.4 10.7 20.7 10.7H13.3V3.3C13.3 2.6 12.7 2 12 2Z\"\/><\/svg> ENOCH <\/a>\r\n      <nav class=\"nav-links\">\r\n        <a href=\"#\">Home<\/a>\r\n        <a href=\"#\">About<\/a>\r\n        <a href=\"#\">Books<\/a>\r\n        <a href=\"#\">Contact<\/a>\r\n        <a href=\"#\" class=\"nav-buy-btn\">Buy Now<\/a>\r\n      <\/nav>\r\n    <\/div>\r\n  <\/header>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a824b79 e-con-full e-flex e-con e-parent\" data-id=\"a824b79\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f15d6c elementor-widget elementor-widget-html\" data-id=\"1f15d6c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t <!-- SEO Meta Tags -->\r\n  <meta name=\"description\" content=\"Journey through the origins of creation, the heavenly realm, the extraordinary life of Enoch, and the forgotten history that shaped humanity.\">\r\n  <meta name=\"keywords\" content=\"Enoch, Biblical History, Ancient Manuscripts, Watchers, Apocrypha, Theology\">\r\n  <meta name=\"author\" content=\"Author of Enoch\">\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=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n  <!-- GSAP Library -->\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n  <style>\r\n    \/* DESIGN SYSTEM & TOKENS *\/\r\n    :root {\r\n      --color-bg: #F8F4EA;\r\n      --color-alt-bg: #EFE6D2;\r\n      --color-card-bg: #D8C3A5;\r\n      --color-gold: #8B6B3E;\r\n      --color-heading: #25364A;\r\n      --color-body: #4B3B2A;\r\n      --color-hero-bg: #FDFBF7;\r\n      --color-border: #B08D57;\r\n      \r\n      --font-heading: 'Cinzel Decorative', serif;\r\n      --font-secondary: 'Cormorant Garamond', serif;\r\n      --font-body: 'Inter', sans-serif;\r\n      --font-quote: 'EB Garamond', serif;\r\n    }\r\n\r\n    \/* GLOBAL RESET & STYLES *\/\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background-color: var(--color-bg);\r\n      color: var(--color-body);\r\n      font-family: var(--font-body);\r\n      overflow-x: hidden;\r\n      \/* cursor: none; set dynamically in JS on mousemove *\/\r\n      \/* Parchment Texture Overlay *\/\r\n      background-image: \r\n        radial-gradient(circle at center, rgba(253,251,247,0.2) 0%, rgba(239,230,210,0.4) 100%),\r\n        url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.85'\/%3E%3C\/svg%3E\");\r\n    }\r\n\r\n    \/* CUSTOM BRONZE CURSOR & DUST GLOW *\/\r\n    #custom-cursor {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 28px;\r\n      height: 28px;\r\n      pointer-events: none;\r\n      z-index: 99999;\r\n      transform: translate3d(0, 0, 0);\r\n      will-change: transform;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      transition: width 0.3s ease, height 0.3s ease;\r\n      opacity: 0; \/* Hidden initially, fades in on mousemove *\/\r\n    }\r\n\r\n    #custom-cursor svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      fill: var(--color-gold);\r\n      filter: drop-shadow(0 2px 4px rgba(75, 59, 42, 0.4));\r\n      transition: transform 0.3s ease, fill 0.3s ease;\r\n    }\r\n\r\n    \/* Glowing circle under cursor on hover *\/\r\n    #custom-cursor::before {\r\n      content: '';\r\n      position: absolute;\r\n      width: 40px;\r\n      height: 40px;\r\n      background: radial-gradient(circle, rgba(139, 107, 62, 0.3) 0%, rgba(176, 141, 87, 0) 70%);\r\n      border-radius: 50%;\r\n      opacity: 0;\r\n      transform: scale(0.5);\r\n      transition: transform 0.3s ease, opacity 0.3s ease;\r\n      z-index: -1;\r\n      pointer-events: none;\r\n    }\r\n\r\n    #custom-cursor.cursor-hover::before {\r\n      opacity: 1;\r\n      transform: scale(1.8);\r\n    }\r\n\r\n    #custom-cursor.cursor-hover svg {\r\n      transform: scale(1.2) rotate(15deg);\r\n      fill: #B08D57;\r\n    }\r\n\r\n    \/* SCROLL SCENE SCROLLBAR *\/\r\n    ::-webkit-scrollbar {\r\n      width: 12px;\r\n      height: 12px;\r\n    }\r\n    ::-webkit-scrollbar-track {\r\n      background: var(--color-bg);\r\n      border-left: 1px solid var(--color-alt-bg);\r\n    }\r\n    ::-webkit-scrollbar-thumb {\r\n      background: var(--color-gold);\r\n      border: 3px solid var(--color-bg);\r\n      border-radius: 6px;\r\n    }\r\n    ::-webkit-scrollbar-thumb:hover {\r\n      background: var(--color-border);\r\n    }\r\n\r\n\r\n\r\n    \/* SLOW FLOATING ELEMENTS *\/\r\n    .floating-container {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      overflow: hidden;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    .floating-element {\r\n      position: absolute;\r\n      color: var(--color-gold);\r\n      opacity: 0.08;\r\n      font-family: var(--font-secondary);\r\n      user-select: none;\r\n      pointer-events: none;\r\n    }\r\n\r\n    @keyframes floatSlow1 {\r\n      0% { transform: translate(0, 0) rotate(0deg); }\r\n      50% { transform: translate(30px, -40px) rotate(8deg); }\r\n      100% { transform: translate(0, 0) rotate(0deg); }\r\n    }\r\n    @keyframes floatSlow2 {\r\n      0% { transform: translate(0, 0) rotate(0deg); }\r\n      50% { transform: translate(-40px, 30px) rotate(-12deg); }\r\n      100% { transform: translate(0, 0) rotate(0deg); }\r\n    }\r\n    @keyframes floatSlow3 {\r\n      0% { transform: translate(0, 0) scale(1); }\r\n      50% { transform: translate(25px, 25px) scale(1.15) rotate(5deg); }\r\n      100% { transform: translate(0, 0) scale(1); }\r\n    }\r\n\r\n    .float-type-1 { animation: floatSlow1 linear infinite; }\r\n    .float-type-2 { animation: floatSlow2 linear infinite; }\r\n    .float-type-3 { animation: floatSlow3 linear infinite; }\r\n\r\n    body.reduced-motion-body * {\r\n      animation: none !important;\r\n      transition: none !important;\r\n    }\r\n    body.reduced-motion-body #custom-cursor {\r\n      display: none !important;\r\n    }\r\n\r\n    \/* SECTION 01: HERO SECTION *\/\r\n    .hero-section {\r\n      padding-top: 140px !important;\r\n      background-color: var(--color-hero-bg);\r\n      position: relative;\r\n      overflow: hidden;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n      border-bottom: 2px solid var(--color-border);\r\n    }\r\n\r\n    .hero-container {\r\n      max-width: 1400px;\r\n      margin: auto;\r\n      padding: 6rem 2rem 2rem 2rem;\r\n      width: 100%;\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      align-items: center;\r\n      gap: 4rem;\r\n      flex-grow: 1;\r\n      z-index: 2;\r\n    }\r\n\r\n    .hero-left {\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n    }\r\n\r\n    .hero-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.2rem;\r\n      letter-spacing: 0.35em;\r\n      color: var(--color-gold);\r\n      margin-bottom: 1.5rem;\r\n      text-transform: uppercase;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .hero-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 5rem;\r\n      color: var(--color-heading);\r\n      line-height: 1.1;\r\n      margin-bottom: 2.5rem;\r\n      text-shadow: 2px 2px 0px rgba(216, 195, 165, 0.3);\r\n    }\r\n\r\n    .hero-title span {\r\n      display: block;\r\n      font-size: 2.5rem;\r\n      font-family: var(--font-secondary);\r\n      font-weight: 300;\r\n      color: var(--color-body);\r\n      margin-top: 0.5rem;\r\n      letter-spacing: 0.05em;\r\n    }\r\n\r\n    .hero-paragraph {\r\n      font-family: var(--font-body);\r\n      font-size: 1.1rem;\r\n      line-height: 1.85;\r\n      color: var(--color-body);\r\n      margin-bottom: 2rem;\r\n      max-width: 550px;\r\n      font-weight: 300;\r\n    }\r\n\r\n    \/* HERO ADDITIONAL CROWDED ELEMENTS *\/\r\n    .hero-celestial-grid {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      opacity: 0.05;\r\n    }\r\n    \r\n    .hero-marginalia {\r\n      position: absolute;\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.68rem;\r\n      letter-spacing: 0.4em;\r\n      color: var(--color-gold);\r\n      opacity: 0.18;\r\n      text-transform: uppercase;\r\n      white-space: nowrap;\r\n      pointer-events: none;\r\n      z-index: 2;\r\n    }\r\n    .hero-marginalia-left {\r\n      left: 2rem;\r\n      top: 50%;\r\n      transform: translateY(-50%) rotate(-90deg);\r\n      transform-origin: left center;\r\n    }\r\n    .hero-marginalia-right {\r\n      right: 2rem;\r\n      top: 50%;\r\n      transform: translateY(-50%) rotate(90deg);\r\n      transform-origin: right center;\r\n    }\r\n    \r\n    .hero-header-ornament {\r\n      display: flex;\r\n      justify-content: flex-start;\r\n      margin-bottom: 1.5rem;\r\n      opacity: 0.4;\r\n    }\r\n    .hero-header-ornament svg {\r\n      width: 180px;\r\n      height: 20px;\r\n      fill: var(--color-gold);\r\n    }\r\n    \r\n    .hero-metadata {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 1.5rem;\r\n      margin-bottom: 2.5rem;\r\n      border-top: 1px dashed rgba(176, 141, 87, 0.25);\r\n      border-bottom: 1px dashed rgba(176, 141, 87, 0.25);\r\n      padding: 1.2rem 0;\r\n      max-width: 550px;\r\n    }\r\n    \r\n    .hero-meta-item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.3rem;\r\n    }\r\n    .hero-meta-label {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.72rem;\r\n      color: var(--color-gold);\r\n      letter-spacing: 0.15em;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n    }\r\n    .hero-meta-value {\r\n      font-family: var(--font-body);\r\n      font-size: 0.85rem;\r\n      color: var(--color-body);\r\n      font-weight: 400;\r\n    }\r\n    \r\n    .hero-left-geo {\r\n      position: absolute;\r\n      top: 15%;\r\n      left: -5%;\r\n      width: 500px;\r\n      height: 500px;\r\n      opacity: 0.035;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n    \r\n    .ink-blot {\r\n      position: absolute;\r\n      opacity: 0.04;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      fill: #8B6B3E;\r\n    }\r\n\r\n    \/* PREMIUM BUTTONS *\/\r\n    .hero-buttons {\r\n      display: flex;\r\n      gap: 1.5rem;\r\n    }\r\n\r\n    .btn {\r\n      padding: 1.2rem 2.8rem;\r\n      font-family: var(--font-secondary);\r\n      font-size: 1rem;\r\n      letter-spacing: 0.15em;\r\n      text-transform: uppercase;\r\n      font-weight: 600;\r\n      border: 1px solid var(--color-border);\r\n      background: none;\r\n      color: var(--color-body);\r\n      cursor: none;\r\n      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n      position: relative;\r\n      overflow: hidden;\r\n      border-radius: 2px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-decoration: none !important;\r\n    }\r\n\r\n    .btn-primary {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n      box-shadow: 0 4px 15px rgba(139, 107, 62, 0.2);\r\n    }\r\n\r\n    .btn::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: -100%;\r\n      width: 100%;\r\n      height: 100%;\r\n      background: linear-gradient(90deg, transparent, rgba(253, 251, 247, 0.3), transparent);\r\n      transition: all 0.6s ease;\r\n    }\r\n\r\n    .btn:hover::before {\r\n      left: 100%;\r\n    }\r\n\r\n    .btn-primary:hover {\r\n      background-color: #765a32;\r\n      border-color: #765a32;\r\n      transform: translateY(-3px);\r\n      box-shadow: 0 8px 25px rgba(139, 107, 62, 0.4);\r\n    }\r\n\r\n    .btn-secondary:hover {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n      transform: translateY(-3px);\r\n      box-shadow: 0 8px 25px rgba(139, 107, 62, 0.2);\r\n    }\r\n\r\n    \/* HERO RIGHT SIDE: PORTRAIT & HALO *\/\r\n    .hero-right {\r\n      position: relative;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 100%;\r\n      min-height: 550px;\r\n    }\r\n\r\n    .halo-wrapper {\r\n      position: absolute;\r\n      width: 580px;\r\n      height: 580px;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* Rotating SVG Halo layers *\/\r\n    .halo-layer {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: 100%;\r\n      transform-origin: center;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .halo-outer {\r\n      animation: rotateCW 80s linear infinite;\r\n      will-change: transform, opacity;\r\n    }\r\n\r\n    .halo-mid {\r\n      width: 90%;\r\n      height: 90%;\r\n      animation: rotateCCW 60s linear infinite;\r\n      will-change: transform, opacity;\r\n    }\r\n\r\n    .halo-inner {\r\n      width: 78%;\r\n      height: 78%;\r\n      animation: rotateCW 40s linear infinite;\r\n      will-change: transform, opacity;\r\n    }\r\n\r\n    .halo-rays {\r\n      position: absolute;\r\n      width: 105%;\r\n      height: 105%;\r\n      opacity: 0.12;\r\n      animation: pulseRays 8s ease-in-out infinite alternate;\r\n      will-change: transform, opacity;\r\n    }\r\n\r\n    @keyframes rotateCW {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    @keyframes rotateCCW {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(-360deg); }\r\n    }\r\n\r\n    @keyframes pulseRays {\r\n      0% { opacity: 0.08; transform: scale(0.97); }\r\n      100% { opacity: 0.2; transform: scale(1.03); }\r\n    }\r\n\r\n    \/* PORTRAIT DISPLAY *\/\r\n    .portrait-container {\r\n      position: relative;\r\n      width: 420px;\r\n      height: 480px;\r\n      border-radius: 210px 210px 0 0;\r\n      overflow: hidden;\r\n      box-shadow: 0 20px 50px rgba(75, 59, 42, 0.35);\r\n      border: 8px double var(--color-border);\r\n      background-color: var(--color-alt-bg);\r\n      z-index: 3;\r\n    }\r\n\r\n    .portrait-image {\r\n      width: 100%;\r\n      height: 100% !important;\r\n      object-fit: cover !important;\r\n      object-position: center center;\r\n      \/*filter: sepia(0.55) contrast(1.15) brightness(0.95);*\/\r\n      \/*mix-blend-mode: multiply;*\/\r\n      display: block;\r\n    }\r\n\r\n    \/* Vignette shadow inside portrait *\/\r\n    .portrait-container::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      box-shadow: inset 0 0 40px rgba(75, 59, 42, 0.6);\r\n      pointer-events: none;\r\n      border-radius: inherit;\r\n    }\r\n\r\n    \/* Smoke overlay canvas *\/\r\n    #smoke-canvas {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      z-index: 4;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* BOTTOM HERO SCRIPTURE BAR *\/\r\n    .scripture-bar {\r\n      width: 100%;\r\n      border-top: 1px solid var(--color-border);\r\n      padding: 1.8rem 2rem;\r\n      background-color: var(--color-bg);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      min-height: 80px;\r\n      z-index: 2;\r\n    }\r\n\r\n    .scripture-wrap {\r\n      max-width: 900px;\r\n      text-align: center;\r\n    }\r\n\r\n    .scripture-text {\r\n      font-family: var(--font-quote);\r\n      font-style: italic;\r\n      font-size: 1.15rem;\r\n      color: var(--color-body);\r\n      line-height: 1.6;\r\n      margin-bottom: 0.3rem;\r\n    }\r\n\r\n    .scripture-source {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.2em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      font-weight: 600;\r\n    }\r\n\r\n    \/* SECTION 02: ANCIENT TIMELINE (HORIZONTAL SCROLL) *\/\r\n    .timeline-section {\r\n      width: 100vw;\r\n      padding-top: 250px;\r\n      overflow: hidden;\r\n      background-color: var(--color-alt-bg);\r\n      position: relative;\r\n      border-bottom: 2px solid var(--color-border);\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n    }\r\n\r\n    .timeline-header {\r\n      padding: 3rem 2rem 0 2rem;\r\n      text-align: center;\r\n      position: absolute;\r\n      top: 0;\r\n      width: 100%;\r\n      z-index: 5;\r\n    }\r\n\r\n    .timeline-section-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1rem;\r\n      letter-spacing: 0.3em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.5rem;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .timeline-section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.5rem;\r\n      color: var(--color-heading);\r\n    }\r\n\r\n    \/* HORIZONTAL CONTAINER FOR SCROLL TRIGGER *\/\r\n    .timeline-scroll-container {\r\n      display: flex;\r\n      align-items: center;\r\n      height: 100%;\r\n      padding: 0 10vw;\r\n      position: relative;\r\n      will-change: transform;\r\n    }\r\n\r\n    \/* Background celestial grid specifically for timeline *\/\r\n    .timeline-celestial-bg {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      width: 70%;\r\n      height: auto;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n      opacity: 0.25;\r\n    }\r\n\r\n    \/* Connecting Gold Line with ruler tick marks *\/\r\n    .timeline-track-line {\r\n      position: absolute;\r\n      left: 0;\r\n      top: 50%;\r\n      width: 150%;\r\n      height: 6px;\r\n      transform: translateY(-3px);\r\n      background: \r\n        repeating-linear-gradient(to right, var(--color-gold) 0, var(--color-gold) 1px, transparent 1px, transparent 10px),\r\n        linear-gradient(to right, rgba(139, 107, 62, 0) 0%, rgba(139, 107, 62, 0.7) 10%, rgba(139, 107, 62, 0.7) 90%, rgba(139, 107, 62, 0) 100%);\r\n      box-shadow: 0 0 10px rgba(176, 141, 87, 0.2);\r\n      z-index: 1;\r\n    }\r\n\r\n    .timeline-slab-wrapper {\r\n      flex-shrink: 0;\r\n      width: 280px;\r\n      height: 520px;\r\n      margin: 0 1.5rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* Dashed Vertical Connecting Lines above\/below central track *\/\r\n    .timeline-slab-wrapper::after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 50%;\r\n      width: 1px;\r\n      border-left: 1px dashed var(--color-gold);\r\n      opacity: 0.4;\r\n      z-index: 1;\r\n    }\r\n    \/* Odd nodes: Card is on top, dashed line goes from center (50%) up to the card *\/\r\n    .timeline-slab-wrapper:nth-child(odd)::after {\r\n      top: 15%;\r\n      bottom: 50%;\r\n    }\r\n    \/* Even nodes: Card is on bottom, dashed line goes from center (50%) down to the card *\/\r\n    .timeline-slab-wrapper:nth-child(even)::after {\r\n      top: 50%;\r\n      bottom: 85%;\r\n    }\r\n\r\n    \/* STONE SLAB MILESTONE CARD *\/\r\n    .timeline-slab {\r\n      background-color: var(--color-card-bg);\r\n      border: 3px solid var(--color-border);\r\n      border-radius: 4px;\r\n      width: 100%;\r\n      padding: 1.6rem 1.4rem 1.4rem 1.4rem;\r\n      box-shadow: \r\n        inset 0 0 20px rgba(75, 59, 42, 0.15),\r\n        0 15px 35px rgba(75, 59, 42, 0.15);\r\n      position: relative;\r\n      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      text-align: center;\r\n      background-image: \r\n        radial-gradient(circle at top left, rgba(255,255,255,0.15) 0%, transparent 80%),\r\n        url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='roughness'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23roughness)'\/%3E%3C\/svg%3E\");\r\n    }\r\n\r\n    \/* Odd items float above the line *\/\r\n    .timeline-slab-wrapper:nth-child(odd) .timeline-slab {\r\n      position: absolute;\r\n      bottom: 55%;\r\n    }\r\n\r\n    \/* Even items float below the line *\/\r\n    .timeline-slab-wrapper:nth-child(even) .timeline-slab {\r\n      position: absolute;\r\n      top: 55%;\r\n    }\r\n\r\n    .timeline-slab-wrapper:hover .timeline-slab {\r\n      border-color: var(--color-gold);\r\n      box-shadow: \r\n        inset 0 0 20px rgba(139, 107, 62, 0.15),\r\n        0 20px 40px rgba(75, 59, 42, 0.25);\r\n    }\r\n    \r\n    .timeline-slab-wrapper:nth-child(odd):hover .timeline-slab {\r\n      transform: translateY(-15px);\r\n    }\r\n\r\n    .timeline-slab-wrapper:nth-child(even):hover .timeline-slab {\r\n      transform: translateY(15px);\r\n    }\r\n\r\n    .slab-border-inner {\r\n      position: absolute;\r\n      top: 6px;\r\n      bottom: 6px;\r\n      left: 6px;\r\n      right: 6px;\r\n      border: 1px dashed rgba(75, 59, 42, 0.2);\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Small Corner Ornaments *\/\r\n    .slab-corner-ornament {\r\n      position: absolute;\r\n      width: 10px;\r\n      height: 10px;\r\n      border: 1px solid var(--color-gold);\r\n      pointer-events: none;\r\n    }\r\n    .slab-corner-ornament.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }\r\n    .slab-corner-ornament.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }\r\n    .slab-corner-ornament.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }\r\n    .slab-corner-ornament.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }\r\n\r\n    .slab-icon {\r\n      width: 26px;\r\n      height: 26px;\r\n      margin-bottom: 0.5rem;\r\n      stroke: var(--color-gold);\r\n      transition: transform 0.4s ease;\r\n    }\r\n    .timeline-slab-wrapper:hover .slab-icon {\r\n      transform: scale(1.15) rotate(5deg);\r\n    }\r\n\r\n    .slab-number {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.15em;\r\n      color: var(--color-gold);\r\n      font-weight: 700;\r\n      margin-bottom: 0.3rem;\r\n    }\r\n\r\n    .slab-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.3rem;\r\n      color: var(--color-heading);\r\n      margin-bottom: 1rem;\r\n      letter-spacing: 0.05em;\r\n      text-shadow: 1px 1px 0px rgba(255,255,255,0.4);\r\n    }\r\n\r\n    .slab-preview {\r\n      font-family: var(--font-body);\r\n      font-size: 0.85rem;\r\n      line-height: 1.6;\r\n      color: var(--color-body);\r\n      margin-bottom: 1.6rem;\r\n      font-weight: 400;\r\n    }\r\n\r\n    .slab-action {\r\n      background: none;\r\n      border: 1px solid var(--color-border);\r\n      padding: 0.6rem 1.4rem;\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.8rem;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n      font-weight: 600;\r\n      color: var(--color-body);\r\n      cursor: none;\r\n      transition: all 0.3s ease;\r\n      background-color: rgba(253, 251, 247, 0.4);\r\n    }\r\n\r\n    .slab-action:hover {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n    }\r\n\r\n    \/* TIMELINE CONNECTOR NODE *\/\r\n    .timeline-node {\r\n      width: 14px;\r\n      height: 14px;\r\n      border-radius: 50%;\r\n      background-color: var(--color-bg);\r\n      border: 3px solid var(--color-gold);\r\n      box-shadow: 0 0 8px rgba(139, 107, 62, 0.4);\r\n      position: absolute;\r\n      top: 50%;\r\n      transform: translate(-50%, -50%);\r\n      left: 50%;\r\n      transition: all 0.3s ease;\r\n      z-index: 10;\r\n    }\r\n\r\n    .timeline-slab-wrapper:hover .timeline-node {\r\n      background-color: var(--color-gold);\r\n      transform: translate(-50%, -50%) scale(1.35);\r\n      box-shadow: 0 0 15px var(--color-border);\r\n    }\r\n\r\n    \/* TIMELINE MODAL POPUP *\/\r\n    .modal-overlay {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      background-color: rgba(10, 12, 16, 0.85);\r\n      backdrop-filter: blur(8px);\r\n      z-index: 10005;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);\r\n    }\r\n\r\n    .modal-overlay.active {\r\n      opacity: 1;\r\n      pointer-events: auto;\r\n    }\r\n\r\n    .modal-box {\r\n      background-color: var(--color-bg);\r\n      border: 12px double var(--color-border);\r\n      padding: 4rem 3.5rem;\r\n      max-width: 650px;\r\n      width: 90%;\r\n      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);\r\n      position: relative;\r\n      transform: scale(0.85) translateY(20px);\r\n      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);\r\n      background-image: \r\n        radial-gradient(circle at center, rgba(253,251,247,0.3) 0%, rgba(239,230,210,0.6) 100%),\r\n        url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.75'\/%3E%3C\/svg%3E\");\r\n    }\r\n\r\n    .modal-overlay.active .modal-box {\r\n      transform: scale(1) translateY(0);\r\n    }\r\n\r\n    .modal-close {\r\n      position: absolute;\r\n      top: 1.5rem;\r\n      right: 1.5rem;\r\n      width: 36px;\r\n      height: 36px;\r\n      min-width: 36px;\r\n      min-height: 36px;\r\n      padding: 0;\r\n      border-radius: 50%;\r\n      border: 1px solid var(--color-border);\r\n      background-color: var(--color-alt-bg);\r\n      color: var(--color-body);\r\n      font-size: 1.1rem;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      line-height: 1;\r\n      cursor: none;\r\n      flex-shrink: 0;\r\n      box-sizing: border-box;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .modal-close:hover {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    .modal-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.1rem;\r\n      color: var(--color-gold);\r\n      letter-spacing: 0.2em;\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.8rem;\r\n      text-align: center;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .modal-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.2rem;\r\n      color: var(--color-heading);\r\n      margin-bottom: 2rem;\r\n      text-align: left !important;\r\n    }\r\n\r\n    .modal-content {\r\n      font-family: var(--font-body);\r\n      font-size: 1rem;\r\n      line-height: 1.8;\r\n      color: var(--color-body);\r\n      margin-bottom: 2rem;\r\n      font-weight: 300;\r\n      text-align: justify;\r\n    }\r\n\r\n    .modal-quote {\r\n      font-family: var(--font-quote);\r\n      font-style: italic;\r\n      font-size: 1.25rem;\r\n      color: var(--color-body);\r\n      border: none;\r\n      border-top: 1px solid var(--color-border);\r\n      border-bottom: 1px solid var(--color-border);\r\n      padding: 1.5rem 0;\r\n      margin: 2rem 0 0 0;\r\n      background: none;\r\n      box-shadow: none;\r\n      text-align: center;\r\n      line-height: 1.5;\r\n      width: 100%;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    \/* SECTION 03: THE STORY BEHIND THE BOOK (EDITORIAL SPLIT) *\/\r\n    .story-section {\r\n      min-height: 100vh;\r\n      background-color: var(--color-bg);\r\n      position: relative;\r\n      overflow: hidden;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 8rem 2rem;\r\n    }\r\n\r\n    .story-container {\r\n      max-width: 1300px;\r\n      margin: auto;\r\n      width: 100%;\r\n      display: grid;\r\n      grid-template-columns: 1.1fr 1.2fr;\r\n      align-items: center;\r\n      gap: 6rem;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* LEFT SIDE: MANUSCRIPT PREVIEW *\/\r\n    .story-left {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      position: relative;\r\n    }\r\n\r\n    .manuscript-frame {\r\n      position: relative;\r\n      border: 12px double var(--color-border);\r\n      padding: 18px;\r\n      background-color: var(--color-alt-bg);\r\n      box-shadow: \r\n        0 30px 60px rgba(75, 59, 42, 0.25),\r\n        0 0 40px rgba(139, 107, 62, 0.1);\r\n      transform: rotate(-1.5deg);\r\n      transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);\r\n    }\r\n\r\n    .manuscript-frame:hover {\r\n      transform: rotate(0deg) scale(1.03);\r\n      box-shadow: \r\n        0 40px 80px rgba(75, 59, 42, 0.35),\r\n        0 0 50px rgba(139, 107, 62, 0.2);\r\n    }\r\n\r\n    .manuscript-inner-border {\r\n      position: absolute;\r\n      top: 6px;\r\n      bottom: 6px;\r\n      left: 6px;\r\n      right: 6px;\r\n      border: 1px dashed rgba(75, 59, 42, 0.2);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .manuscript-img {\r\n      width: 100%;\r\n      max-width: 460px;\r\n      height: auto;\r\n      filter: sepia(0.35) contrast(1.1) brightness(0.9);\r\n      border: 1px solid rgba(75, 59, 42, 0.15);\r\n      display: block;\r\n    }\r\n\r\n    \/* RIGHT SIDE: EDITORIAL PARCHMENT LAYOUT *\/\r\n    .story-right {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .story-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.1rem;\r\n      letter-spacing: 0.3em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      margin-bottom: 1.2rem;\r\n      font-weight: 600;\r\n    }\r\n\r\n    .story-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 3.2rem;\r\n      color: var(--color-heading);\r\n      line-height: 1.2;\r\n      margin-bottom: 3rem;\r\n    }\r\n\r\n    .story-text-container {\r\n      font-family: var(--font-body);\r\n      font-size: 1.05rem;\r\n      line-height: 1.95;\r\n      color: var(--color-body);\r\n      font-weight: 300;\r\n    }\r\n\r\n    \/* Dropcap style for the editorial column *\/\r\n    .dropcap {\r\n      float: left;\r\n      font-family: var(--font-heading);\r\n      font-size: 4.8rem;\r\n      line-height: 1;\r\n      padding-right: 12px;\r\n      padding-top: 4px;\r\n      color: var(--color-gold);\r\n      font-weight: bold;\r\n      text-shadow: 2px 2px 0px var(--color-alt-bg), 3px 3px 0px var(--color-border);\r\n    }\r\n\r\n    .story-paragraph {\r\n      margin-bottom: 2rem;\r\n      text-align: justify;\r\n    }\r\n\r\n    \/* Signature and Seal *\/\r\n    .story-footer {\r\n      margin-top: 3.5rem;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: flex-end;\r\n      gap: 2rem;\r\n    }\r\n\r\n    .signature-container {\r\n      text-align: right;\r\n    }\r\n\r\n    .signature-label {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.8rem;\r\n      letter-spacing: 0.15em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .signature-text {\r\n      font-family: var(--font-quote);\r\n      font-size: 2.2rem;\r\n      font-style: italic;\r\n      color: var(--color-body);\r\n      line-height: 1.2;\r\n    }\r\n\r\n    .wax-seal {\r\n      width: 65px;\r\n      height: 65px;\r\n      background: radial-gradient(circle, #a12b2b, #741d1d, #521212);\r\n      border-radius: 50%;\r\n      border: 2px solid #521212;\r\n      box-shadow: \r\n        0 6px 12px rgba(0,0,0,0.3),\r\n        inset 0 0 10px rgba(0,0,0,0.4);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      position: relative;\r\n      transform: rotate(-10deg);\r\n      transition: transform 0.4s ease;\r\n    }\r\n\r\n    .wax-seal:hover {\r\n      transform: rotate(5deg) scale(1.05);\r\n    }\r\n\r\n    .wax-seal-design {\r\n      width: 40px;\r\n      height: 40px;\r\n      border: 1px dashed rgba(255, 255, 255, 0.4);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .wax-seal-design::after {\r\n      content: '\u2735';\r\n      color: rgba(255, 255, 255, 0.5);\r\n      font-size: 1.4rem;\r\n    }\r\n\r\n    \/* RESPONSIVE LAYOUT adjustments *\/\r\n    @media (max-width: 1024px) {\r\n      .hero-container {\r\n        grid-template-columns: 1fr;\r\n        padding-top: 4rem;\r\n        gap: 3rem;\r\n      }\r\n      .hero-left {\r\n        text-align: center;\r\n        align-items: center;\r\n      }\r\n      .hero-paragraph {\r\n        margin-left: auto;\r\n        margin-right: auto;\r\n      }\r\n      .hero-right {\r\n        min-height: 480px;\r\n      }\r\n      .halo-wrapper {\r\n        width: 480px;\r\n        height: 480px;\r\n      }\r\n      .portrait-container {\r\n        width: 340px;\r\n        height: 390px;\r\n      }\r\n\r\n      .story-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 4rem;\r\n      }\r\n      .story-left {\r\n        order: 2;\r\n      }\r\n      .story-right {\r\n        order: 1;\r\n        text-align: center;\r\n      }\r\n      .story-paragraph {\r\n        text-align: center;\r\n      }\r\n      .story-footer {\r\n        justify-content: center;\r\n      }\r\n      .dropcap {\r\n        float: none;\r\n        display: block;\r\n        font-size: 5.5rem;\r\n        text-align: center;\r\n        margin-bottom: 1rem;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      body {\r\n        cursor: auto; \/* Fallback to standard cursor on touch devices *\/\r\n      }\r\n      #custom-cursor {\r\n        display: none;\r\n      }\r\n      .hero-title {\r\n        font-size: 3.5rem;\r\n      }\r\n      .hero-title span {\r\n        font-size: 1.8rem;\r\n      }\r\n      .hero-buttons {\r\n        flex-direction: column;\r\n        width: 100%;\r\n      }\r\n      .btn {\r\n        width: 100%;\r\n      }\r\n      .timeline-section {\r\n        height: auto;\r\n        min-height: 100vh;\r\n        padding-top: 8rem;\r\n        padding-bottom: 4rem;\r\n      }\r\n      \/* Fallback for vertical flow timeline on mobile if horizontal gets clumsy *\/\r\n      .timeline-scroll-container {\r\n        flex-direction: column;\r\n        height: auto;\r\n        padding: 4rem 2rem;\r\n      }\r\n      .timeline-track-line {\r\n        left: 50%;\r\n        top: 0;\r\n        width: 3px;\r\n        height: 100%;\r\n        transform: translateX(-50%);\r\n        background: linear-gradient(to bottom, transparent, rgba(139,107,62,0.7), transparent);\r\n      }\r\n      .timeline-slab-wrapper {\r\n        height: auto;\r\n        width: 100%;\r\n        max-width: 360px;\r\n        margin: 2rem 0;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        position: relative;\r\n      }\r\n      .timeline-slab-wrapper::after {\r\n        display: none;\r\n      }\r\n      .timeline-slab-wrapper:nth-child(odd) .timeline-slab,\r\n      .timeline-slab-wrapper:nth-child(even) .timeline-slab {\r\n        position: static;\r\n        transform: none;\r\n      }\r\n      .timeline-slab-wrapper:nth-child(odd):hover .timeline-slab,\r\n      .timeline-slab-wrapper:nth-child(even):hover .timeline-slab {\r\n        transform: translateY(-10px);\r\n      }\r\n      .timeline-node {\r\n        position: absolute;\r\n        left: 50%;\r\n        top: auto;\r\n        bottom: -22px;\r\n        transform: translateX(-50%);\r\n      }\r\n      .story-title {\r\n        font-size: 2.2rem;\r\n      }\r\n      .modal-box {\r\n        padding: 2.5rem 1.8rem 2rem 1.8rem;\r\n        border-width: 6px;\r\n      }\r\n      .modal-title {\r\n        font-size: 1.6rem;\r\n        margin-bottom: 1.2rem;\r\n      }\r\n      .modal-subtitle {\r\n        font-size: 0.9rem;\r\n      }\r\n      .modal-content {\r\n        font-size: 0.9rem;\r\n        line-height: 1.6;\r\n        margin-bottom: 1.5rem;\r\n      }\r\n      .modal-quote {\r\n        font-size: 1.1rem;\r\n        padding: 1rem 0;\r\n      }\r\n    }\r\n\r\n    \/* ============================================= *\/\r\n    \/* NEW: EXTRA RESPONSIVE FIXES FOR SMALL PHONES   *\/\r\n    \/* (added without touching any existing rules)    *\/\r\n    \/* ============================================= *\/\r\n    @media (max-width: 600px) {\r\n      .hero-container {\r\n        padding: 3.5rem 1.2rem 1.5rem 1.2rem;\r\n        gap: 2.5rem;\r\n      }\r\n      .hero-subtitle {\r\n        font-size: 0.95rem;\r\n        letter-spacing: 0.25em;\r\n        margin-bottom: 1rem;\r\n      }\r\n      .hero-title {\r\n        font-size: 2.5rem;\r\n        margin-bottom: 1.8rem;\r\n      }\r\n      .hero-title span {\r\n        font-size: 1.4rem;\r\n      }\r\n      .hero-paragraph {\r\n        font-size: 0.95rem;\r\n        line-height: 1.7;\r\n        margin-bottom: 1.5rem;\r\n      }\r\n      .hero-metadata {\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 1rem;\r\n        padding: 1rem 0;\r\n        margin-bottom: 1.8rem;\r\n      }\r\n      .hero-meta-value {\r\n        font-size: 0.78rem;\r\n      }\r\n      .hero-header-ornament svg {\r\n        width: 130px;\r\n        height: 16px;\r\n      }\r\n      .hero-marginalia-left,\r\n      .hero-marginalia-right {\r\n        display: none;\r\n      }\r\n      .hero-right {\r\n        min-height: 320px;\r\n      }\r\n      .halo-wrapper {\r\n        width: 280px;\r\n        height: 280px;\r\n      }\r\n      .portrait-container {\r\n        width: 220px;\r\n        height: 260px;\r\n        border-radius: 140px 140px 0 0;\r\n        border-width: 6px;\r\n      }\r\n      .btn {\r\n        padding: 1rem 1.6rem;\r\n        font-size: 0.9rem;\r\n      }\r\n      .scripture-bar {\r\n        padding: 1.4rem 1.2rem;\r\n        min-height: auto;\r\n      }\r\n      .scripture-text {\r\n        font-size: 1rem;\r\n      }\r\n      .scripture-source {\r\n        font-size: 0.72rem;\r\n        letter-spacing: 0.12em;\r\n      }\r\n      .timeline-header {\r\n        padding: 4rem 2.4rem 0 0rem;\r\n      }\r\n      .timeline-section-title {\r\n        font-size: 1.8rem;\r\n      }\r\n      .timeline-section-subtitle {\r\n        font-size: 0.82rem;\r\n        letter-spacing: 0.18em;\r\n      }\r\n      .timeline-scroll-container {\r\n        padding: 3rem 1.2rem;\r\n      }\r\n      .timeline-slab-wrapper {\r\n        max-width: 100%;\r\n        margin: 1.5rem 0;\r\n      }\r\n      .timeline-slab {\r\n        padding: 1.3rem 1.1rem 1.1rem 1.1rem;\r\n      }\r\n      .slab-title {\r\n        font-size: 1.1rem;\r\n      }\r\n      .slab-preview {\r\n        font-size: 0.8rem;\r\n      }\r\n      .slab-action {\r\n        padding: 0.55rem 1.1rem;\r\n        font-size: 0.75rem;\r\n      }\r\n      .story-section {\r\n        padding: 5rem 1.2rem;\r\n      }\r\n      .story-title {\r\n        font-size: 1.7rem;\r\n        margin-bottom: 2rem;\r\n      }\r\n      .dropcap {\r\n        font-size: 3.8rem;\r\n      }\r\n      .story-text-container {\r\n        font-size: 0.95rem;\r\n        line-height: 1.75;\r\n      }\r\n      .manuscript-frame {\r\n        padding: 10px;\r\n        border-width: 8px;\r\n      }\r\n      .signature-text {\r\n        font-size: 1.6rem;\r\n      }\r\n      .wax-seal {\r\n        width: 50px;\r\n        height: 50px;\r\n      }\r\n      .wax-seal-design {\r\n        width: 32px;\r\n        height: 32px;\r\n      }\r\n      .modal-box {\r\n        padding: 2rem 1.2rem 1.6rem 1.2rem;\r\n        border-width: 5px;\r\n        width: 92%;\r\n      }\r\n      .modal-close {\r\n        top: 1rem;\r\n        right: 1rem;\r\n        width: 32px;\r\n        height: 32px;\r\n        min-width: 32px;\r\n        min-height: 32px;\r\n      }\r\n      .modal-title {\r\n        font-size: 1.35rem;\r\n        margin-bottom: 1rem;\r\n      }\r\n      .modal-subtitle {\r\n        font-size: 0.8rem;\r\n      }\r\n      .modal-content {\r\n        font-size: 0.85rem;\r\n      }\r\n      .modal-quote {\r\n        font-size: 1rem;\r\n        padding: 1.2rem 0;\r\n      }\r\n    }\r\n\r\n    \/* Extra-small phones (very narrow, e.g. 320px) *\/\r\n    @media (max-width: 360px) {\r\n      .hero-title {\r\n        font-size: 2.1rem;\r\n      }\r\n      .hero-title span {\r\n        font-size: 1.2rem;\r\n      }\r\n      .halo-wrapper {\r\n        width: 230px;\r\n        height: 230px;\r\n      }\r\n      .portrait-container {\r\n        width: 190px;\r\n        height: 225px;\r\n        border-radius: 120px 120px 0 0;\r\n      }\r\n      .hero-metadata {\r\n        grid-template-columns: 1fr;\r\n      }\r\n      .story-title {\r\n        font-size: 1.5rem;\r\n      }\r\n      .dropcap {\r\n        font-size: 3.2rem;\r\n      }\r\n    }\r\n\r\n    \/* Landscape \/ short-height mobile devices (e.g. phone rotated) *\/\r\n    @media (max-height: 480px) and (orientation: landscape) {\r\n      .hero-section {\r\n        min-height: auto;\r\n        padding: 1.5rem 0;\r\n      }\r\n      .hero-container {\r\n        padding-top: 4.5rem;\r\n        padding-bottom: 1.5rem;\r\n      }\r\n      .hero-right {\r\n        min-height: 260px;\r\n      }\r\n      .halo-wrapper {\r\n        width: 240px;\r\n        height: 240px;\r\n      }\r\n      .portrait-container {\r\n        width: 190px;\r\n        height: 220px;\r\n      }\r\n      .timeline-section {\r\n        height: auto;\r\n        min-height: auto;\r\n        padding: 4rem 0;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- CUSTOM BRONZE CURSOR -->\r\n  <div id=\"custom-cursor\">\r\n    <!-- Stylized bronze ancient symbol cross \/ seal -->\r\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <path d=\"M12 2C11.3 2 10.7 2.6 10.7 3.3V10.7H3.3C2.6 10.7 2 11.3 2 12C2 12.7 2.6 13.3 3.3 13.3H10.7V20.7C10.7 21.4 11.3 22 12 22C12.7 22 13.3 21.4 13.3 20.7V13.3H20.7C21.4 13.3 22 12.7 22 12C22 11.3 21.4 10.7 20.7 10.7H13.3V3.3C13.3 2.6 12.7 2 12 2ZM12 4.7C12.4 4.7 12.7 5 12.7 5.3V10.7C12.7 11.4 13.3 12 14 12H19.3C19.7 12 20 12.3 20 12.7C20 13.1 19.7 13.3 19.3 13.3H14C13.3 13.3 12.7 13.9 12.7 14.7V19.3C12.7 19.7 12.4 20 12 20C11.6 20 11.3 19.7 11.3 19.3V14.7C11.3 13.9 10.7 13.3 10 13.3H4.7C4.3 13.3 4 13.1 4 12.7C4 12.3 4.3 12 4.7 12H10C10.7 12 11.3 11.4 11.3 10.7V5.3C11.3 5 11.6 4.7 12 4.7Z\"\/>\r\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke-width=\"1.2\" stroke=\"var(--color-gold)\" fill=\"none\"\/>\r\n    <\/svg>\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- SECTION 01: HERO SECTION -->\r\n  <section class=\"hero-section\" id=\"hero\">\r\n    <!-- Slow Floating Elements -->\r\n    <div class=\"floating-container\" id=\"hero-floating\"><\/div>\r\n\r\n    <!-- Celestial Astronomical Coordinate Grid Overlay -->\r\n    <svg class=\"hero-celestial-grid\" viewBox=\"0 0 1920 1080\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <!-- Concentric Astrological Circles -->\r\n      <circle cx=\"960\" cy=\"540\" r=\"500\" stroke=\"#8B6B3E\" stroke-width=\"0.5\" fill=\"none\" stroke-dasharray=\"4 8\" \/>\r\n      <circle cx=\"960\" cy=\"540\" r=\"400\" stroke=\"#8B6B3E\" stroke-width=\"0.8\" fill=\"none\" \/>\r\n      <circle cx=\"960\" cy=\"540\" r=\"380\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" fill=\"none\" stroke-dasharray=\"2 2\" \/>\r\n      <circle cx=\"960\" cy=\"540\" r=\"250\" stroke=\"#8B6B3E\" stroke-width=\"0.5\" fill=\"none\" \/>\r\n      <circle cx=\"960\" cy=\"540\" r=\"100\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" fill=\"none\" stroke-dasharray=\"6 6\" \/>\r\n      \r\n      <!-- Coordinate Crosshair Lines -->\r\n      <line x1=\"960\" y1=\"0\" x2=\"960\" y2=\"1080\" stroke=\"#8B6B3E\" stroke-width=\"0.5\" \/>\r\n      <line x1=\"0\" y1=\"540\" x2=\"1920\" y2=\"540\" stroke=\"#8B6B3E\" stroke-width=\"0.5\" \/>\r\n      \r\n      <!-- Diagonal Axis Lines -->\r\n      <line x1=\"160\" y1=\"90\" x2=\"1760\" y2=\"990\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" stroke-dasharray=\"5 5\" \/>\r\n      <line x1=\"160\" y1=\"990\" x2=\"1760\" y2=\"90\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" stroke-dasharray=\"5 5\" \/>\r\n      \r\n      <!-- Direction labels -->\r\n      <g stroke=\"#8B6B3E\" stroke-width=\"0.5\" fill=\"#8B6B3E\" font-size=\"10\" font-family=\"var(--font-secondary)\" opacity=\"0.6\">\r\n        <text x=\"975\" y=\"60\">MERIDIES (SOUTH)<\/text>\r\n        <text x=\"975\" y=\"1050\">SEPTENTRIO (NORTH)<\/text>\r\n        <text x=\"50\" y=\"525\">ORIENS (EAST)<\/text>\r\n        <text x=\"1740\" y=\"525\">OCCIDENS (WEST)<\/text>\r\n        \r\n        <line x1=\"960\" y1=\"35\" x2=\"960\" y2=\"45\" \/>\r\n        <line x1=\"960\" y1=\"1035\" x2=\"960\" y2=\"1045\" \/>\r\n        <line x1=\"35\" y1=\"540\" x2=\"45\" y2=\"540\" \/>\r\n        <line x1=\"1875\" y1=\"540\" x2=\"1885\" y2=\"540\" \/>\r\n      <\/g>\r\n      \r\n      <!-- Astrological Compass Rose \/ Orbits in the corners -->\r\n      <circle cx=\"200\" cy=\"200\" r=\"120\" stroke=\"#8B6B3E\" stroke-width=\"0.4\" fill=\"none\" \/>\r\n      <circle cx=\"200\" cy=\"200\" r=\"110\" stroke=\"#8B6B3E\" stroke-width=\"0.2\" fill=\"none\" stroke-dasharray=\"2 2\" \/>\r\n      <line x1=\"80\" y1=\"200\" x2=\"320\" y2=\"200\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" \/>\r\n      <line x1=\"200\" y1=\"80\" x2=\"200\" y2=\"320\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" \/>\r\n\r\n      <circle cx=\"1720\" cy=\"880\" r=\"120\" stroke=\"#8B6B3E\" stroke-width=\"0.4\" fill=\"none\" \/>\r\n      <line x1=\"1600\" y1=\"880\" x2=\"1840\" y2=\"880\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" \/>\r\n      <line x1=\"1720\" y1=\"760\" x2=\"1720\" y2=\"1000\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" \/>\r\n    <\/svg>\r\n\r\n    <!-- Faint Organic Ink blots -->\r\n    <svg class=\"ink-blot\" style=\"top: 8%; left: 82%; width: 140px; height: 140px;\" viewBox=\"0 0 100 100\">\r\n      <path d=\"M48,12 C55,10 65,5 72,12 C80,20 88,18 85,28 C82,38 92,48 88,58 C84,68 80,78 70,82 C60,86 52,78 42,85 C32,92 20,88 15,78 C10,68 5,58 12,48 C19,38 28,42 35,32 C42,22 40,14 48,12 Z\" \/>\r\n    <\/svg>\r\n    <svg class=\"ink-blot\" style=\"bottom: 12%; left: 4%; width: 110px; height: 110px;\" viewBox=\"0 0 100 100\">\r\n      <path d=\"M 35,15 C 45,10 55,20 62,18 C 70,16 75,28 78,35 C 81,42 88,52 82,60 C 76,68 68,75 58,72 C 48,69 40,82 32,78 C 24,74 18,65 15,55 C 12,45 18,35 22,28 C 26,21 25,20 35,15 Z\" \/>\r\n    <\/svg>\r\n\r\n    <!-- Marginalia texts -->\r\n    <div class=\"hero-marginalia hero-marginalia-left\">FRAGMENTA SECULI II A.C. \u2014 LIBER HENOCH<\/div>\r\n    <div class=\"hero-marginalia hero-marginalia-right\">ORBITAE CELESTES ET ANNOTATIONES APOCRYPHAE<\/div>\r\n\r\n    <div class=\"hero-container\">\r\n      \r\n      <!-- HERO LEFT COLUMN -->\r\n      <div class=\"hero-left\">\r\n        <!-- Faint Background sacred geometry behind left text column -->\r\n        <svg class=\"hero-left-geo\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n          <circle cx=\"100\" cy=\"100\" r=\"90\" stroke=\"#8B6B3E\" stroke-width=\"0.4\" \/>\r\n          <circle cx=\"100\" cy=\"100\" r=\"70\" stroke=\"#8B6B3E\" stroke-width=\"0.2\" stroke-dasharray=\"2 2\" \/>\r\n          <polygon points=\"100,10 126,56 178,56 136,90 152,140 100,110 48,140 64,90 22,56 74,56\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" \/>\r\n          <polygon points=\"100,190 74,144 22,144 64,110 48,60 100,90 152,60 136,110 178,144 126,144\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" \/>\r\n        <\/svg>\r\n\r\n        <!-- Ornate Scroll Divider Banner -->\r\n        <div class=\"hero-header-ornament\">\r\n          <svg viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\">\r\n            <path d=\"M 0 5 Q 25 0 50 5 T 100 5 M 10 5 Q 25 10 50 5 T 90 5\" stroke=\"#8B6B3E\" stroke-width=\"0.7\" fill=\"none\" \/>\r\n            <circle cx=\"50\" cy=\"5\" r=\"2\" fill=\"#8B6B3E\" \/>\r\n          <\/svg>\r\n        <\/div>\r\n\r\n        <span class=\"hero-subtitle\">The Origins of Creation<\/span>\r\n        <h1 class=\"hero-title\">\r\n          ENOCH\r\n          <span>A Man Without Equal<\/span>\r\n        <\/h1>\r\n        <p class=\"hero-paragraph\">\r\n          Journey through the origins of creation, the heavenly realm, the extraordinary life of Enoch, and the forgotten history that shaped humanity. Presented in both English and Spanish editions.\r\n        <\/p>\r\n\r\n         Academic Metadata Block \r\n        <div class=\"hero-metadata\">\r\n          <div class=\"hero-meta-item\">\r\n            <span class=\"hero-meta-label\">Manuscript<\/span>\r\n            <span class=\"hero-meta-value\">Qumran Codex IV<\/span>\r\n          <\/div>\r\n          <div class=\"hero-meta-item\">\r\n            <span class=\"hero-meta-label\">Scribe<\/span>\r\n            <span class=\"hero-meta-value\">Henoch Al.<\/span>\r\n          <\/div>\r\n          <div class=\"hero-meta-item\">\r\n            <span class=\"hero-meta-label\">Provenance<\/span>\r\n            <span class=\"hero-meta-value\">Dead Sea Scrolls<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"hero-buttons\">\r\n          <a href=\"#story\" class=\"btn btn-primary\">Explore the Book<\/a>\r\n          <a href=\"#\" class=\"btn btn-secondary\">Buy Now<\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- HERO RIGHT COLUMN -->\r\n      <div class=\"hero-right\">\r\n        <!-- Celestial Halo Graphic behind Portrait -->\r\n        <div class=\"halo-wrapper\">\r\n          \r\n          <!-- Outer Pulsing Golden Rays -->\r\n          <svg class=\"halo-rays\" viewBox=\"0 0 200 200\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n            <g stroke=\"#B08D57\" stroke-width=\"0.3\">\r\n              <line x1=\"100\" y1=\"0\" x2=\"100\" y2=\"200\" \/>\r\n              <line x1=\"0\" y1=\"100\" x2=\"200\" y2=\"100\" \/>\r\n              <line x1=\"29.3\" y1=\"29.3\" x2=\"170.7\" y2=\"170.7\" \/>\r\n              <line x1=\"29.3\" y1=\"170.7\" x2=\"170.7\" y2=\"29.3\" \/>\r\n              <line x1=\"61.7\" y1=\"7.6\" x2=\"138.3\" y2=\"192.4\" \/>\r\n              <line x1=\"7.6\" y1=\"61.7\" x2=\"192.4\" y2=\"138.3\" \/>\r\n              <line x1=\"138.3\" y1=\"7.6\" x2=\"61.7\" y2=\"192.4\" \/>\r\n              <line x1=\"192.4\" y1=\"61.7\" x2=\"7.6\" y2=\"138.3\" \/>\r\n            <\/g>\r\n          <\/svg>\r\n\r\n          <!-- Outer Halo: Constellations -->\r\n          <svg class=\"halo-layer halo-outer\" viewBox=\"0 0 300 300\">\r\n            <circle cx=\"150\" cy=\"150\" r=\"140\" stroke=\"#8B6B3E\" stroke-width=\"1\" stroke-dasharray=\"3 6\" fill=\"none\" opacity=\"0.3\"\/>\r\n            <circle cx=\"150\" cy=\"150\" r=\"130\" stroke=\"#B08D57\" stroke-width=\"0.5\" fill=\"none\" opacity=\"0.4\"\/>\r\n            <!-- Constellation dots -->\r\n            <circle cx=\"50\" cy=\"90\" r=\"2.5\" fill=\"#8B6B3E\"\/>\r\n            <circle cx=\"250\" cy=\"90\" r=\"2\" fill=\"#8B6B3E\"\/>\r\n            <circle cx=\"110\" cy=\"260\" r=\"3\" fill=\"#8B6B3E\"\/>\r\n            <circle cx=\"210\" cy=\"250\" r=\"1.5\" fill=\"#8B6B3E\"\/>\r\n            <circle cx=\"250\" cy=\"190\" r=\"2.5\" fill=\"#8B6B3E\"\/>\r\n            <!-- Connective lines -->\r\n            <path d=\"M 50 90 L 100 60 L 150 40 L 200 60 L 250 90\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" fill=\"none\" opacity=\"0.25\"\/>\r\n            <path d=\"M 110 260 L 150 280 L 210 250\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" fill=\"none\" opacity=\"0.25\"\/>\r\n          <\/svg>\r\n\r\n          <!-- Mid Halo: Rotating Hebrew Typography -->\r\n          <svg class=\"halo-layer halo-mid\" viewBox=\"0 0 300 300\">\r\n            <defs>\r\n              <path id=\"hebrew-circle\" d=\"M 150 150 m -115 0 a 115 115 0 1 1 230 0 a 115 115 0 1 1 -230 0\" \/>\r\n            <\/defs>\r\n            <text fill=\"#8B6B3E\" font-family=\"var(--font-secondary)\" font-size=\"13\" letter-spacing=\"8\" opacity=\"0.7\">\r\n              <textPath href=\"#hebrew-circle\">\u05d0 \u05d1 \u05d2 \u05d3 \u05d4 \u05d5 \u05d6 \u05d7 \u05d8 \u05d9 \u05db \u05dc \u05de \u05e0 \u05e1 \u05e2 \u05e4 \u05e6 \u05e7 \u05e8 \u05e9 \u05ea \u05d0 \u05d1 \u05d2 \u05d3 \u05d4 \u05d5 \u05d6 \u05d7 \u05d8 \u05d9 \u05db \u05dc \u05de \u05e0 \u05e1 \u05e2 \u05e4 \u05e6<\/textPath>\r\n            <\/text>\r\n          <\/svg>\r\n\r\n          <!-- Inner Halo: Geometric Compass Rings -->\r\n          <svg class=\"halo-layer halo-inner\" viewBox=\"0 0 300 300\">\r\n            <circle cx=\"150\" cy=\"150\" r=\"90\" stroke=\"#8B6B3E\" stroke-width=\"1.5\" fill=\"none\" opacity=\"0.4\"\/>\r\n            <circle cx=\"150\" cy=\"150\" r=\"85\" stroke=\"#B08D57\" stroke-width=\"0.5\" stroke-dasharray=\"2 2\" fill=\"none\" opacity=\"0.5\"\/>\r\n            <polygon points=\"150,60 176,106 228,106 186,140 202,190 150,160 98,190 114,140 72,106 124,106\" stroke=\"#8B6B3E\" stroke-width=\"0.4\" fill=\"none\" opacity=\"0.25\" \/>\r\n          <\/svg>\r\n\r\n        <\/div>\r\n\r\n        <!-- Portrait Container with Old Man's Face -->\r\n        <div class=\"portrait-container\">\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/juan\/wp-content\/uploads\/2026\/07\/hero.png\" alt=\"Enoch portrait - elderly wise man\" class=\"portrait-image\">\r\n          <!-- Canvas for Slow Drifting Smoke -->\r\n          <canvas id=\"smoke-canvas\"><\/canvas>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n    <!-- SCRIPTURE TEXT ROTATOR BAR -->\r\n    <div class=\"scripture-bar\">\r\n      <div class=\"scripture-wrap\">\r\n        <p class=\"scripture-text\">\"Enoch walked faithfully with God; then he was no more, because God took him away.\"<\/p>\r\n        <span class=\"scripture-source\">\u2014 Genesis 5:24<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <!-- SECTION 02: ANCIENT TIMELINE (HORIZONTAL SCROLL) -->\r\n  <section class=\"timeline-section\" id=\"timeline\">\r\n    <!-- Slow Floating Elements -->\r\n    <div class=\"floating-container\" id=\"timeline-floating\"><\/div>\r\n\r\n    <!-- Background celestial coordinate overlay for timeline -->\r\n    <svg class=\"timeline-celestial-bg\" viewBox=\"0 0 1000 600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <circle cx=\"500\" cy=\"300\" r=\"280\" stroke=\"#8B6B3E\" stroke-width=\"0.3\" fill=\"none\" opacity=\"0.12\" \/>\r\n      <circle cx=\"500\" cy=\"300\" r=\"180\" stroke=\"#8B6B3E\" stroke-width=\"0.2\" fill=\"none\" stroke-dasharray=\"2 4\" opacity=\"0.15\" \/>\r\n      <line x1=\"500\" y1=\"0\" x2=\"500\" y2=\"600\" stroke=\"#8B6B3E\" stroke-width=\"0.2\" opacity=\"0.1\" \/>\r\n      <line x1=\"0\" y1=\"300\" x2=\"1000\" y2=\"300\" stroke=\"#8B6B3E\" stroke-width=\"0.2\" opacity=\"0.1\" \/>\r\n    <\/svg>\r\n\r\n    <div class=\"timeline-header\">\r\n      <span class=\"timeline-section-subtitle\">Chronology of the Heavens<\/span>\r\n      <h2 class=\"timeline-section-title\">The Ancient Timeline<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"timeline-scroll-container\">\r\n      \r\n      <!-- Central Line Connecting slabs -->\r\n      <div class=\"timeline-track-line\"><\/div>\r\n\r\n      <!-- Milestone 1 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"1\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n            <path d=\"M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1l2.1-2.1M17 7l2.1-2.1\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n          <\/svg>\r\n          \r\n          <span class=\"slab-number\">I<\/span>\r\n          <h3 class=\"slab-title\">CREATION<\/h3>\r\n          <p class=\"slab-preview\">The genesis of all things, where the spiritual and material realms were spoken into existence.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 2 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"2\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M12 2v20M5 8c3 0 7 2 7 6M19 8c-3 0-7 2-7 6\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n            <circle cx=\"12\" cy=\"8\" r=\"2\" fill=\"var(--color-gold)\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">II<\/span>\r\n          <h3 class=\"slab-title\">FIRST SPIRITS<\/h3>\r\n          <p class=\"slab-preview\">The assembly of the heavenly hosts, the watchers, and the powers of the unseen world.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 3 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"3\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M13 2L3 14h9l-1 8 10-12h-9z\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">III<\/span>\r\n          <h3 class=\"slab-title\">LUCIFER<\/h3>\r\n          <p class=\"slab-preview\">The fall of the morning star, creating the eternal rift and the origin of cosmic rebellion.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 4 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"4\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M12 3a5 5 0 0 0-5 5c0 4 5 13 5 13s5-9 5-9a5 5 0 0 0-5-5z\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n            <circle cx=\"12\" cy=\"8\" r=\"1.5\" fill=\"var(--color-gold)\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">IV<\/span>\r\n          <h3 class=\"slab-title\">ADAM<\/h3>\r\n          <p class=\"slab-preview\">The formation of man from the dust, the breath of life, and the loss of the pristine garden.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 5 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"5\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M20 4S13 5 10 10l-6 8h4l6-6c3-4 6-8 6-8z\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n            <path d=\"M4 20h10\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">V<\/span>\r\n          <h3 class=\"slab-title\">ENOCH<\/h3>\r\n          <p class=\"slab-preview\">The seventh from Adam, who walked with God and was shown the secrets of the heavens.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 6 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"6\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M2 17s3-2 10-2 10 2 10 2M2 20s3-2 10-2 10 2 10 2\" stroke=\"var(--color-gold)\" stroke-width=\"1.2\" \/>\r\n            <path d=\"M6 14l1-4h10l1 4z\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">VI<\/span>\r\n          <h3 class=\"slab-title\">NOAH<\/h3>\r\n          <p class=\"slab-preview\">The great deluge sent to cleanse the earth, and the covenant of the rainbow.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 7 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"7\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <path d=\"M6 20V8l6-4 6 4v12z\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" \/>\r\n            <path d=\"M6 14h12M6 9h12M12 4v16\" stroke=\"var(--color-gold)\" stroke-width=\"1\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">VII<\/span>\r\n          <h3 class=\"slab-title\">BABEL<\/h3>\r\n          <p class=\"slab-preview\">The division of languages and the scattering of nations who sought to build a tower to the stars.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Milestone 8 -->\r\n      <div class=\"timeline-slab-wrapper\" data-milestone=\"8\">\r\n        <div class=\"timeline-slab\">\r\n          <div class=\"slab-border-inner\"><\/div>\r\n          <div class=\"slab-corner-ornament tl\"><\/div>\r\n          <div class=\"slab-corner-ornament tr\"><\/div>\r\n          <div class=\"slab-corner-ornament bl\"><\/div>\r\n          <div class=\"slab-corner-ornament br\"><\/div>\r\n          \r\n          <svg class=\"slab-icon\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n            <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"var(--color-gold)\" stroke-width=\"1.5\" fill=\"none\" \/>\r\n            <path d=\"M12 2v20M2 12h20\" stroke=\"var(--color-gold)\" stroke-width=\"0.8\" \/>\r\n            <polygon points=\"12,7 14,12 12,17 10,12\" stroke=\"var(--color-gold)\" stroke-width=\"1\" \/>\r\n          <\/svg>\r\n\r\n          <span class=\"slab-number\">VIII<\/span>\r\n          <h3 class=\"slab-title\">EXPANSION<\/h3>\r\n          <p class=\"slab-preview\">The migration of tribes across ancient lands, carrying fragments of original truth.<\/p>\r\n          <button class=\"slab-action\">Read the Scroll<\/button>\r\n        <\/div>\r\n        <div class=\"timeline-node\"><\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- TIMELINE DETAILS PARCHMENT MODAL OVERLAY -->\r\n  <div class=\"modal-overlay\" id=\"timeline-modal\">\r\n    <div class=\"modal-box\">\r\n      <button class=\"modal-close\" aria-label=\"Close modal\">\u00d7<\/button>\r\n      <span class=\"modal-subtitle\" id=\"modal-sub\">Milestone Details<\/span>\r\n      <h3 class=\"modal-title\" id=\"modal-title\">Milestone Title<\/h3>\r\n      <div class=\"modal-content\" id=\"modal-content\">\r\n        Detailed narrative goes here...\r\n      <\/div>\r\n      <blockquote class=\"modal-quote\" id=\"modal-quote\">\r\n        \"Scripture quote goes here.\"\r\n      <\/blockquote>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- SECTION 03: THE STORY BEHIND THE BOOK -->\r\n  <section class=\"story-section\" id=\"story\">\r\n    <!-- Slow Floating Elements -->\r\n    <div class=\"floating-container\" id=\"story-floating\"><\/div>\r\n\r\n    <div class=\"story-container\">\r\n      \r\n      <!-- LEFT SIDE: ANCIENT MANUSCRIPT IMAGE -->\r\n      <div class=\"story-left\">\r\n        <div class=\"manuscript-frame\">\r\n          <div class=\"manuscript-inner-border\"><\/div>\r\n          <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1543002588-bfa74002ed7e?auto=format&fit=crop&q=80&w=1200\" alt=\"Ancient open manuscript book page\" class=\"manuscript-img\">\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- RIGHT SIDE: EDITORIAL CONTENT -->\r\n      <div class=\"story-right\">\r\n        <span class=\"story-subtitle\">The Editorial Chronicle<\/span>\r\n        <h2 class=\"story-title\">The Story Behind The Book<\/h2>\r\n        <div class=\"story-text-container\">\r\n          <p class=\"story-paragraph\">\r\n            <span class=\"dropcap\">E<\/span>NOCH explores the earliest chapters of existence through a detailed interpretation rooted in Scripture, examining creation, spiritual beings, humanity's origins, and the extraordinary life of one of history's most mysterious figures. Presented in both English and Spanish, it invites readers into a thoughtful exploration of biblical history.\r\n          <\/p>\r\n          <p class=\"story-paragraph\">\r\n            This work serves as a bridge between the canonical texts and the ancient apocrypha. It examines the Watchers the fallen angels who descended to earth and the heavenly journeys of Enoch as he recorded the motions of the stars, the portals of the winds, and the decrees of the Almighty.\r\n          <\/p>\r\n          <p class=\"story-paragraph\">\r\n            Every page is structured like an illuminated manuscript, contrasting ancient Hebrew cosmology with modern historical research, offering an immersive, intellectually rigorous experience for scholars and seekers alike.\r\n          <\/p>\r\n        <\/div>\r\n\r\n        <div class=\"story-footer\">\r\n          <div class=\"signature-container\">\r\n            <div class=\"signature-label\">CHRONICLED BY<\/div>\r\n            <div class=\"signature-text\">The Scribe<\/div>\r\n          <\/div>\r\n          <div class=\"wax-seal\">\r\n            <div class=\"wax-seal-design\"><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- JAVASCRIPT LOGIC -->\r\n  <script>\r\n    \/* 1. CUSTOM CURSOR & GOLDEN DUST PARTICLES *\/\r\n    const cursor = document.getElementById('custom-cursor');\r\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    const lowPowerDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;\r\n    const customCursorEnabled = !prefersReducedMotion && !('ontouchstart' in window) && !lowPowerDevice;\r\n\r\n    if (prefersReducedMotion) {\r\n      document.body.classList.add('reduced-motion-body');\r\n    }\r\n\r\n    let mouseX = 0, mouseY = 0;\r\n    let cursorX = 0, cursorY = 0;\r\n    let isHovering = false;\r\n    let cursorInitialized = false;\r\n\r\n    \/\/ Show cursor only on mouse movement (prevents issues on touchscreen devices\/mobile)\r\n    document.addEventListener('mousemove', (e) => {\r\n      if (!customCursorEnabled) return;\r\n\r\n      mouseX = e.clientX;\r\n      mouseY = e.clientY;\r\n      \r\n      if (!cursorInitialized) {\r\n        cursorInitialized = true;\r\n        if (cursor) {\r\n          cursor.style.opacity = '1';\r\n          document.body.style.cursor = 'none'; \/\/ Hide default browser cursor\r\n        }\r\n        \r\n        \/\/ Start smooth loop\r\n        gsap.ticker.add(updateCursor);\r\n      }\r\n      \r\n      \/\/ Spawn golden dust particle sparingly for smoother performance\r\n      if (Math.random() < (isHovering ? 0.18 : 0.02)) {\r\n        createDustParticle(e.clientX, e.clientY);\r\n      }\r\n    });\r\n\r\n    \/\/ Touch event listener to disable custom cursor if user is scrolling with touch\r\n    document.addEventListener('touchstart', () => {\r\n      if (!cursorInitialized) {\r\n        \/\/ If touch starts before any mousemove, disable custom cursor\r\n        if (cursor) cursor.style.display = 'none';\r\n        document.body.style.cursor = 'auto';\r\n      }\r\n    }, { once: true });\r\n\r\n    function updateCursor() {\r\n      const dt = 0.22;\r\n      cursorX += (mouseX - cursorX) * dt;\r\n      cursorY += (mouseY - cursorY) * dt;\r\n      \r\n      if (cursor) {\r\n        cursor.style.transform = `translate3d(${cursorX - 14}px, ${cursorY - 14}px, 0)`;\r\n      }\r\n    }\r\n\r\n    \/\/ Add hover states to interactive elements\r\n    function initCursorHoverEffects() {\r\n      const interactives = document.querySelectorAll('a, button, .slab-action, .modal-close, .timeline-slab, .wax-seal');\r\n      interactives.forEach(el => {\r\n        el.addEventListener('mouseenter', () => {\r\n          isHovering = true;\r\n          if (cursor) cursor.classList.add('cursor-hover');\r\n        });\r\n        el.addEventListener('mouseleave', () => {\r\n          isHovering = false;\r\n          if (cursor) cursor.classList.remove('cursor-hover');\r\n        });\r\n      });\r\n    }\r\n\r\n    function createDustParticle(x, y) {\r\n      const particle = document.createElement('div');\r\n      document.body.appendChild(particle);\r\n      \r\n      const size = Math.random() * 4 + 1.5;\r\n      const angle = Math.random() * Math.PI * 2;\r\n      const velocity = Math.random() * 45 + 15;\r\n      const destinationX = x + Math.cos(angle) * velocity;\r\n      const destinationY = y + Math.sin(angle) * velocity - 25; \/\/ Drift upward\r\n      \r\n      gsap.set(particle, {\r\n        x: x,\r\n        y: y,\r\n        width: size,\r\n        height: size,\r\n        backgroundColor: '#8B6B3E',\r\n        boxShadow: '0 0 6px #B08D57, 0 0 2px #F8F4EA',\r\n        borderRadius: '50%',\r\n        position: 'fixed',\r\n        pointerEvents: 'none',\r\n        zIndex: 99998,\r\n        opacity: Math.random() * 0.7 + 0.3\r\n      });\r\n      \r\n      gsap.to(particle, {\r\n        x: destinationX,\r\n        y: destinationY,\r\n        opacity: 0,\r\n        scale: 0.1,\r\n        duration: Math.random() * 1.2 + 0.6,\r\n        ease: 'power2.out',\r\n        onComplete: () => particle.remove()\r\n      });\r\n    }\r\n\r\n\r\n    \/* 2. ANCIENT SCROLL UNROLL LOADER TRANSITION *\/\r\n    window.addEventListener('DOMContentLoaded', () => {\r\n      const loaderEl = document.getElementById('scroll-loader');\r\n      if (loaderEl) {\r\n        \/\/ Disable scrolling during loader\r\n        document.body.style.overflow = 'hidden';\r\n        \r\n        const loaderTimeline = gsap.timeline({\r\n          onComplete: () => {\r\n            loaderEl.style.display = 'none';\r\n            document.body.style.overflow = '';\r\n            animateHeroIn(); \/\/ Reveal hero elements\r\n          }\r\n        });\r\n\r\n        loaderTimeline.to('.scroll-spindle-left', {\r\n          left: '0px',\r\n          duration: 2.4,\r\n          ease: 'power3.inOut'\r\n        }, 0.3);\r\n\r\n        loaderTimeline.to('.scroll-spindle-right', {\r\n          right: '0px',\r\n          duration: 2.4,\r\n          ease: 'power3.inOut'\r\n        }, 0.3);\r\n\r\n        loaderTimeline.to('.scroll-sheet-left', {\r\n          width: '0vw',\r\n          duration: 2.4,\r\n          ease: 'power3.inOut'\r\n        }, 0.3);\r\n\r\n        loaderTimeline.to('.scroll-sheet-right', {\r\n          width: '0vw',\r\n          duration: 2.4,\r\n          ease: 'power3.inOut'\r\n        }, 0.3);\r\n\r\n        loaderTimeline.to(['.scroll-spindle-left', '.scroll-spindle-right'], {\r\n          opacity: 0,\r\n          duration: 0.6,\r\n          ease: 'power1.out'\r\n        }, '-=0.6');\r\n      } else {\r\n        \/\/ No loader, reveal hero elements immediately\r\n        animateHeroIn();\r\n      }\r\n      \r\n      \/\/ Initialize systems\r\n      initFloatingElements();\r\n      initSmokeEffect();\r\n      if (customCursorEnabled) {\r\n        initCursorHoverEffects();\r\n      }\r\n    });\r\n\r\n\r\n    \/* 3. HERO ENTRANCE REVEAL ANIMATIONS *\/\r\n    function animateHeroIn() {\r\n      gsap.timeline()\r\n        .from('.hero-header-ornament', { opacity: 0, scaleX: 0, duration: 1.2, ease: 'power2.out' })\r\n        .from('.hero-subtitle', { opacity: 0, y: 25, duration: 1, ease: 'power3.out' }, '-=0.9')\r\n        .from('.hero-title', { opacity: 0, y: 35, duration: 1.2, ease: 'power3.out' }, '-=0.8')\r\n        .from('.hero-paragraph', { opacity: 0, y: 20, duration: 1, ease: 'power3.out' }, '-=0.8')\r\n        .from('.hero-metadata', { opacity: 0, y: 15, duration: 0.8, ease: 'power3.out' }, '-=0.8')\r\n        .from('.hero-buttons', { opacity: 0, y: 15, duration: 0.8, ease: 'power3.out' }, '-=0.7')\r\n        .from('.portrait-container', { opacity: 0, scale: 0.9, duration: 1.4, ease: 'power2.out' }, '-=1.2')\r\n        .from('.halo-wrapper', { opacity: 0, scale: 0.8, duration: 1.8, ease: 'power2.out' }, '-=1.4')\r\n        .from('.scripture-bar', { opacity: 0, y: 30, duration: 1, ease: 'power2.out' }, '-=0.8')\r\n        .from('.hero-marginalia', { opacity: 0, duration: 1.5 }, '-=1.5')\r\n        .from('.hero-celestial-grid', { opacity: 0, duration: 2, ease: 'power1.out' }, '-=2');\r\n    }\r\n\r\n\r\n    \/* 4. ROTATING SLOW FLOATING ELEMENTS *\/\r\n    function initFloatingElements() {\r\n      const symbols = [\r\n        '\u05d0', '\u05d1', '\u05d2', '\u05d3', '\u05d4', '\u05d5', '\u05d6', '\u05d7', '\u05d8', '\u05d9', '\u05db', '\u05dc', '\u05de', '\u05e0', '\u05e1', '\u05e2', '\u05e4', '\u05e6', '\u05e7', '\u05e8', '\u05e9', '\u05ea',\r\n        '\u03a9', '\u03a8', '\u03a6', '\u039e', '\u0398', '\u0394', '\u039b', '\u03a3', '\u03a0', '\u03b1', '\u03b2', '\u03b3', '\u2735', '\u2719', '\u2742'\r\n      ];\r\n      \r\n      const containers = [\r\n        document.getElementById('hero-floating'),\r\n        document.getElementById('timeline-floating'),\r\n        document.getElementById('story-floating')\r\n      ];\r\n      const elementCount = (prefersReducedMotion || lowPowerDevice) ? 4 : 8;\r\n\r\n      containers.forEach(container => {\r\n        if (!container) return;\r\n        for (let i = 0; i < elementCount; i++) {\r\n          const el = document.createElement('div');\r\n          el.className = `floating-element float-type-${Math.floor(Math.random() * 3) + 1}`;\r\n          el.textContent = symbols[Math.floor(Math.random() * symbols.length)];\r\n          el.style.left = `${Math.random() * 90 + 5}%`;\r\n          el.style.top = `${Math.random() * 85 + 5}%`;\r\n          el.style.fontSize = `${Math.random() * 22 + 12}px`;\r\n          el.style.animationDuration = `${Math.random() * 25 + 20}s`;\r\n          el.style.animationDelay = `${Math.random() * -15}s`;\r\n          el.style.opacity = (Math.random() * 0.05 + 0.04).toString();\r\n          el.style.willChange = 'transform, opacity';\r\n          container.appendChild(el);\r\n        }\r\n      });\r\n    }\r\n\r\n\r\n    \/* 5. SLOW MOVING SMOKE ON CANVAS *\/\r\n    function initSmokeEffect() {\r\n      if (prefersReducedMotion || lowPowerDevice) return;\r\n\r\n      const canvas = document.getElementById('smoke-canvas');\r\n      const ctx = canvas.getContext('2d');\r\n      let animationFrameId;\r\n\r\n      function resizeCanvas() {\r\n        const rect = canvas.parentElement.getBoundingClientRect();\r\n        canvas.width = rect.width;\r\n        canvas.height = rect.height;\r\n      }\r\n      resizeCanvas();\r\n      window.addEventListener('resize', resizeCanvas);\r\n\r\n      const smokeParticles = [];\r\n      const particleCount = 8;\r\n\r\n      class SmokeParticle {\r\n        constructor() {\r\n          this.reset();\r\n          this.y = Math.random() * canvas.height;\r\n        }\r\n\r\n        reset() {\r\n          this.x = canvas.width \/ 2 + (Math.random() - 0.5) * 160;\r\n          this.y = canvas.height + Math.random() * 40;\r\n          this.size = Math.random() * 70 + 40;\r\n          this.speedY = Math.random() * 0.25 + 0.1;\r\n          this.speedX = (Math.random() - 0.5) * 0.1;\r\n          this.alpha = 0.002;\r\n          this.targetAlpha = Math.random() * 0.03 + 0.01;\r\n          this.growSpeed = Math.random() * 0.06 + 0.015;\r\n        }\r\n\r\n        update() {\r\n          this.y -= this.speedY;\r\n          this.x += this.speedX;\r\n          this.size += this.growSpeed;\r\n\r\n          if (this.alpha < this.targetAlpha) {\r\n            this.alpha += 0.0004;\r\n          }\r\n\r\n          if (this.y < canvas.height * 0.3) {\r\n            this.alpha -= 0.0004;\r\n          }\r\n\r\n          if (this.y < 0 || this.alpha <= 0) {\r\n            this.reset();\r\n          }\r\n        }\r\n\r\n        draw() {\r\n          ctx.save();\r\n          ctx.globalAlpha = this.alpha;\r\n          ctx.fillStyle = '#D8C3A5';\r\n          ctx.shadowColor = `rgba(216, 195, 165, ${Math.min(this.alpha, 0.25)})`;\r\n          ctx.shadowBlur = this.size * 0.15;\r\n          ctx.beginPath();\r\n          ctx.arc(this.x, this.y, this.size * 0.55, 0, Math.PI * 2);\r\n          ctx.fill();\r\n          ctx.restore();\r\n        }\r\n      }\r\n\r\n      for (let i = 0; i < particleCount; i++) {\r\n        smokeParticles.push(new SmokeParticle());\r\n      }\r\n\r\n      function animateSmoke() {\r\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n        smokeParticles.forEach(p => {\r\n          p.update();\r\n          p.draw();\r\n        });\r\n        animationFrameId = requestAnimationFrame(animateSmoke);\r\n      }\r\n\r\n      animateSmoke();\r\n    }\r\n\r\n\r\n    \/* 6. ROTATING SCRIPTURE BAR SELECTION *\/\r\n    const scriptures = [\r\n      { text: \"Enoch walked faithfully with God; then he was no more, because God took him away.\", source: \"Genesis 5:24\" },\r\n      { text: \"By faith Enoch was taken from this life, so that he did not experience death; he could not be found, because God had taken him away.\", source: \"Hebrews 11:5\" },\r\n      { text: \"Enoch, the seventh from Adam, prophesied about them: 'See, the Lord is coming with thousands upon thousands of his holy ones...'\", source: \"Jude 1:14\" },\r\n      { text: \"He reveals deep and hidden things; He knows what lies in darkness, and light dwells with Him.\", source: \"Daniel 2:22\" }\r\n    ];\r\n\r\n    let currentScriptureIndex = 0;\r\n    const scriptureTextEl = document.querySelector('.scripture-text');\r\n    const scriptureSourceEl = document.querySelector('.scripture-source');\r\n\r\n    function rotateScriptures() {\r\n      currentScriptureIndex = (currentScriptureIndex + 1) % scriptures.length;\r\n      const nextScripture = scriptures[currentScriptureIndex];\r\n\r\n      gsap.timeline()\r\n        .to([scriptureTextEl, scriptureSourceEl], { opacity: 0, y: -10, duration: 0.8, ease: 'power2.in' })\r\n        .call(() => {\r\n          scriptureTextEl.textContent = `\"${nextScripture.text}\"`;\r\n          scriptureSourceEl.textContent = `\u2014 ${nextScripture.source}`;\r\n        })\r\n        .to([scriptureTextEl, scriptureSourceEl], { opacity: 1, y: 0, duration: 0.8, ease: 'power2.out' });\r\n    }\r\n\r\n    setInterval(rotateScriptures, 7000);\r\n\r\n\r\n    \/* 7. HORIZONTAL TIMELINE PINNED SCROLL *\/\r\n    gsap.registerPlugin(ScrollTrigger);\r\n\r\n    const timelineSec = document.querySelector('.timeline-section');\r\n    const scrollContainer = document.querySelector('.timeline-scroll-container');\r\n\r\n    const mm = gsap.matchMedia();\r\n\r\n    mm.add(\"(min-width: 769px)\", () => {\r\n      \/\/ Pinned horizontal scroll for desktop\r\n      const scrollTween = gsap.to(scrollContainer, {\r\n        x: () => -(scrollContainer.scrollWidth - window.innerWidth),\r\n        ease: 'none',\r\n        scrollTrigger: {\r\n          trigger: '.timeline-section',\r\n          pin: true,\r\n          scrub: 1,\r\n          start: 'top top',\r\n          end: () => `+=${scrollContainer.scrollWidth - window.innerWidth}`,\r\n          invalidateOnRefresh: true\r\n        }\r\n      });\r\n\r\n      return () => {\r\n        \/\/ Clean up code runs when viewport goes under 769px\r\n        gsap.set(scrollContainer, { clearProps: 'all' });\r\n      };\r\n    });\r\n\r\n\r\n    \/* 8. TIMELINE MILESTONE MODAL DETAIL DATA *\/\r\n    const milestoneData = {\r\n      1: {\r\n        title: \"The Primordial Light\",\r\n        subtitle: \"Milestone I: Creation\",\r\n        content: \"In the beginning, the cosmos was divided into realms of light and spirit before the material foundations of the Earth were laid. Enoch's books describe the creation of the heavens, the paths of the celestial bodies, and the hidden chambers where the winds and waters reside. It was a time of pure order, governed by the Word of the Creator.\",\r\n        quote: \"Before anything was created, the Father of lights shone in the silence.\"\r\n      },\r\n      2: {\r\n        title: \"Watchers & Archangels\",\r\n        subtitle: \"Milestone II: First Spirits\",\r\n        content: \"Prior to the creation of mortal men, the heavens were filled with the primordial spirits\u2014the great Archangels (Michael, Gabriel, Raphael, and Uriel) and the Watchers, who were tasked with observing the unfolding creation. These spiritual beings possessed immense power and wisdom, serving as the cosmic caretakers.\",\r\n        quote: \"Ten thousand times ten thousand stood before the Throne of Glory.\"\r\n      },\r\n      3: {\r\n        title: \"The Great Rebellion\",\r\n        subtitle: \"Milestone III: Lucifer\",\r\n        content: \"Cosmic disharmony began with the fall of the Morning Star. Lucifer and a faction of the Watchers rebelled against the divine order, driven by pride and a desire to usurp the throne of the Creator. This spiritual rebellion cast a shadow over the creation, leading to the descent of the fallen watchers who eventually corrupted mankind.\",\r\n        quote: \"How you have fallen from heaven, O morning star, son of the dawn!\"\r\n      },\r\n      4: {\r\n        title: \"Formation of the Clay\",\r\n        subtitle: \"Milestone IV: Adam\",\r\n        content: \"Crafted in the divine image, Adam was placed in the Garden of Eden as the custodian of the physical realm. However, the influence of the fallen spirits soon reached the earthly sanctuary, leading to the transgression, the loss of immortality, and the exile of humanity into a hostile world.\",\r\n        quote: \"For dust you are, and to dust you shall return.\"\r\n      },\r\n      5: {\r\n        title: \"Translation of the Scribe\",\r\n        subtitle: \"Milestone V: Enoch\",\r\n        content: \"Enoch, the seventh from Adam, walked in perfect harmony with God. Because of his righteousness, he was taken up into the heavenly realms without experiencing death. There, he was shown the past, present, and future of humanity, and was commanded to write down the visions to serve as a testimony for later generations.\",\r\n        quote: \"Enoch walked faithfully with God; then he was no more.\"\r\n      },\r\n      6: {\r\n        title: \"The Cleansing Waters\",\r\n        subtitle: \"Milestone VI: Noah\",\r\n        content: \"As the corruption of the Watchers and their giant offspring (the Nephilim) consumed the Earth, divine judgment was decreed. Noah, Enoch's great-grandson, was instructed to build an Ark to preserve life. The great deluge washed away the ancient corruption, resetting the path of human history.\",\r\n        quote: \"The fountains of the deep burst forth, and the floodgates of heaven were opened.\"\r\n      },\r\n      7: {\r\n        title: \"The Division of Tongues\",\r\n        subtitle: \"Milestone VII: Babel\",\r\n        content: \"In the generations following the flood, pride once again swelled in the hearts of men. At Shinar, they attempted to build a tower reaching into the heavens to make a name for themselves. To curb their rebellion, the Creator confounded their speech, dividing humanity into separate nations and languages.\",\r\n        quote: \"Come, let us go down and confuse their language so they will not understand each other.\"\r\n      },\r\n      8: {\r\n        title: \"Scattering of the Tribes\",\r\n        subtitle: \"Milestone VIII: Expansion\",\r\n        content: \"Divided by tongue and culture, the descendants of Noah expanded across the continents, carrying with them the memories of the garden, the flood, and the ancient scribe Enoch. These fragments of original revelation shaped the mythologies, architectures, and spiritual systems of all ancient civilizations.\",\r\n        quote: \"From one man He made all the nations, that they should inhabit the whole earth.\"\r\n      }\r\n    };\r\n\r\n    const modalOverlay = document.getElementById('timeline-modal');\r\n    const modalTitle = document.getElementById('modal-title');\r\n    const modalSub = document.getElementById('modal-sub');\r\n    const modalContent = document.getElementById('modal-content');\r\n    const modalQuote = document.getElementById('modal-quote');\r\n    const modalClose = document.querySelector('.modal-close');\r\n\r\n    \/\/ Click handler for stone slab actions\r\n    document.querySelectorAll('.timeline-slab-wrapper').forEach(wrapper => {\r\n      const milestoneId = wrapper.getAttribute('data-milestone');\r\n      const actionBtn = wrapper.querySelector('.slab-action');\r\n      \r\n      actionBtn.addEventListener('click', (e) => {\r\n        e.stopPropagation();\r\n        openMilestoneModal(milestoneId);\r\n      });\r\n    });\r\n\r\n    function openMilestoneModal(id) {\r\n      const data = milestoneData[id];\r\n      if (!data) return;\r\n\r\n      modalTitle.textContent = data.title;\r\n      modalSub.textContent = data.subtitle;\r\n      modalContent.innerHTML = `<p>${data.content}<\/p>`;\r\n      modalQuote.textContent = `\"${data.quote}\"`;\r\n\r\n      modalOverlay.classList.add('active');\r\n      \/\/ Temporarily lock window scrolling while modal is open\r\n      document.body.style.overflow = 'hidden';\r\n    }\r\n\r\n    function closeModal() {\r\n      modalOverlay.classList.remove('active');\r\n      \/\/ Restore scrolling unless loader was running\r\n      {\r\n        document.body.style.overflow = '';\r\n      }\r\n    }\r\n\r\n    modalClose.addEventListener('click', closeModal);\r\n    modalOverlay.addEventListener('click', (e) => {\r\n      if (e.target === modalOverlay) closeModal();\r\n    });\r\n\r\n    \/\/ Close on Escape Key\r\n    document.addEventListener('keydown', (e) => {\r\n      if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {\r\n        closeModal();\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<div class=\"elementor-element elementor-element-e5aa7a0 e-con-full e-flex e-con e-parent\" data-id=\"e5aa7a0\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-904a546 elementor-widget elementor-widget-html\" data-id=\"904a546\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- 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=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,600;0,700;1,400&family=EB+Garamond:ital,wght@1,400;1,600&family=Inter:wght@300;400;600&family=Pinyon+Script&display=swap\" rel=\"stylesheet\">\r\n\r\n  <style>\r\n    \/* DESIGN SYSTEM VARIABLES *\/\r\n    :root {\r\n      --color-bg: #F8F4EA;\r\n      --color-alt-bg: #EFE6D2;\r\n      --color-card-bg: #D8C3A5;\r\n      --color-gold: #8B6B3E;\r\n      --color-heading: #25364A;\r\n      --color-body: #4B3B2A;\r\n      --color-border: #B08D57;\r\n      --color-hero-bg: #FDFBF7;\r\n      \r\n      --font-heading: 'Cinzel Decorative', Georgia, serif;\r\n      --font-secondary: 'Cormorant Garamond', serif;\r\n      --font-body: 'Inter', sans-serif;\r\n      --font-quote: 'EB Garamond', serif;\r\n      --font-ink: 'Pinyon Script', cursive;\r\n    }\r\n\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background-color: var(--color-bg);\r\n      color: var(--color-body);\r\n      font-family: var(--font-body);\r\n      overflow-x: hidden;\r\n      line-height: 1.6;\r\n      background-image: radial-gradient(circle at center, rgba(253,251,247,0.35) 0%, rgba(239,230,210,0.55) 100%);\r\n    }\r\n\r\n    \/* SECTION LAYOUTS *\/\r\n    section {\r\n      padding: 5rem 2rem;\r\n      position: relative;\r\n      border-bottom: 2px solid var(--color-border);\r\n      overflow: hidden;\r\n    }\r\n\r\n    .section-header {\r\n      max-width: 800px;\r\n      margin: 0 auto 3.5rem auto;\r\n      text-align: center;\r\n    }\r\n\r\n    .section-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1rem;\r\n      letter-spacing: 0.3em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.5rem;\r\n      font-weight: 700;\r\n      display: block;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.5rem;\r\n      color: var(--color-heading);\r\n      letter-spacing: 0.05em;\r\n    }\r\n\r\n    \/* SECTION 04: FEATURED CHAPTERS (GIANT STONE TABLETS) *\/\r\n    .chapters-section {\r\n      background-color: var(--color-bg);\r\n    }\r\n\r\n    .chapters-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 2rem;\r\n      max-width: 1300px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .tablet-container {\r\n      position: relative;\r\n      height: 380px;\r\n      width: 100%;\r\n      background-color: var(--color-hero-bg);\r\n      border: 1px solid var(--color-border);\r\n      box-shadow: 0 10px 20px rgba(75, 59, 42, 0.12);\r\n      border-radius: 4px;\r\n      overflow: hidden;\r\n      cursor: pointer;\r\n    }\r\n\r\n    \/* Outer structural frame for 3D look *\/\r\n    .tablet-container::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 5px;\r\n      bottom: 5px;\r\n      left: 5px;\r\n      right: 5px;\r\n      border: 1px dashed rgba(176, 141, 87, 0.4);\r\n      z-index: 10;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Inner parchment layer (revealed on hover) *\/\r\n    .tablet-parchment {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      padding: 2.2rem 2rem;\r\n      background: radial-gradient(circle at center, rgba(253,251,247,0.97) 0%, rgba(242,235,220,0.97) 100%);\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      text-align: center;\r\n      box-sizing: border-box;\r\n      z-index: 2;\r\n    }\r\n\r\n    .parchment-chapter-num {\r\n      font-family: var(--font-secondary);\r\n      color: var(--color-heading);\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.25em;\r\n      margin-bottom: 0.6rem;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      text-shadow: 0 0 2px rgba(255,255,255,0.75);\r\n    }\r\n\r\n    .parchment-quote {\r\n      font-family: var(--font-quote);\r\n      font-style: italic;\r\n      font-size: 1.1rem;\r\n      line-height: 1.5;\r\n      color: var(--color-heading);\r\n      margin-bottom: 1.2rem;\r\n      position: relative;\r\n    }\r\n\r\n    .parchment-quote::before, .parchment-quote::after {\r\n      content: '\"';\r\n      color: var(--color-gold);\r\n      font-weight: bold;\r\n    }\r\n\r\n    .parchment-desc {\r\n      font-family: var(--font-body);\r\n      font-size: 0.85rem;\r\n      line-height: 1.7;\r\n      color: var(--color-body);\r\n      max-width: 90%;\r\n      font-weight: 300;\r\n    }\r\n\r\n    \/* STONE GATES (COVER OVERLAYS) *\/\r\n    .stone-gate {\r\n      position: absolute;\r\n      top: 0;\r\n      width: 50%;\r\n      height: 100%;\r\n      background: radial-gradient(circle at center, rgba(195, 170, 135, 0.95) 0%, rgba(130, 105, 75, 0.95) 100%);\r\n      box-shadow: inset 0 0 18px rgba(90, 70, 50, 0.22);\r\n      transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);\r\n      z-index: 5;\r\n      overflow: hidden;\r\n      display: flex;\r\n      align-items: center;\r\n    }\r\n\r\n    .stone-left {\r\n      left: 0;\r\n      border-right: 1.5px solid var(--color-border);\r\n      justify-content: flex-end;\r\n    }\r\n\r\n    .stone-right {\r\n      right: 0;\r\n      border-left: 1.5px solid var(--color-border);\r\n      justify-content: flex-start;\r\n    }\r\n\r\n    \/* 3D tablet side borders *\/\r\n    .stone-left::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      width: 4px;\r\n      height: 100%;\r\n      background: rgba(0,0,0,0.15);\r\n    }\r\n    \r\n    .stone-right::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 4px;\r\n      height: 100%;\r\n      background: rgba(255,255,255,0.25);\r\n    }\r\n\r\n    .tablet-container:hover .stone-left {\r\n      transform: translateX(-102%);\r\n    }\r\n\r\n    .tablet-container:hover .stone-right {\r\n      transform: translateX(102%);\r\n    }\r\n\r\n    \/* Ornate Corner Brackets inside the stones *\/\r\n    .stone-corner {\r\n      position: absolute;\r\n      width: 14px;\r\n      height: 14px;\r\n      border: 1px solid var(--color-gold);\r\n      pointer-events: none;\r\n      opacity: 0.6;\r\n    }\r\n    \r\n    .stone-left .stone-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }\r\n    .stone-left .stone-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }\r\n    .stone-right .stone-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }\r\n    .stone-right .stone-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }\r\n\r\n    \/* Engraved Title spanning across both doors *\/\r\n    .engraving-wrapper {\r\n      position: absolute;\r\n      width: 200%;\r\n      height: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .stone-left .engraving-wrapper {\r\n      left: 0;\r\n    }\r\n\r\n    .stone-right .engraving-wrapper {\r\n      right: 0;\r\n    }\r\n\r\n    .engraved-num {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.2em;\r\n      color: var(--color-hero-bg);\r\n      margin-bottom: 0.8rem;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      text-shadow: 0 0 2px rgba(0,0,0,0.35);\r\n    }\r\n\r\n    .engraved-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.3rem;\r\n      color: #FFFFFF !important;\r\n      text-shadow: 1px 1px 1px rgba(0,0,0,0.35);\r\n      text-align: center;\r\n      letter-spacing: 0.08em;\r\n      line-height: 1.4;\r\n      max-width: 220px;\r\n    }\r\n\r\n    \/* SECTION 05: QUOTE GALLERY (MOVING PAPER BACKGROUND) *\/\r\n    .quotes-section {\r\n      background-color: var(--color-hero-bg);\r\n      min-height: 60vh;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      background: radial-gradient(circle at center, rgba(248, 244, 234, 0.72) 0%, rgba(255,255,255,0.96) 100%);\r\n    }\r\n\r\n    \/* Inner Double-line border framing the quote area *\/\r\n    .quotes-frame {\r\n      max-width: 950px;\r\n      width: 100%;\r\n      margin: 0 auto;\r\n      border: 4px double var(--color-border);\r\n      padding: 5rem 3rem;\r\n      background-color: rgba(253, 251, 247, 0.92);\r\n      position: relative;\r\n      text-align: center;\r\n    }\r\n\r\n    .quotes-frame::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 10px;\r\n      bottom: 10px;\r\n      left: 10px;\r\n      right: 10px;\r\n      border: 1px dashed rgba(139, 107, 62, 0.3);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .quote-gallery-container {\r\n      position: relative;\r\n      min-height: 240px;\r\n      overflow: hidden;\r\n      margin-bottom: 2rem;\r\n    }\r\n\r\n    .quote-slide {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n      align-items: center;\r\n      opacity: 0;\r\n      transform: translateY(20px);\r\n      pointer-events: none;\r\n      transition: opacity 0.4s ease, transform 0.4s ease;\r\n      will-change: opacity, transform;\r\n    }\r\n\r\n    .quote-slide.active {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n      pointer-events: auto;\r\n    }\r\n\r\n    \/* Ink Script Text style *\/\r\n    .ink-quote-text {\r\n      font-family: var(--font-ink);\r\n      font-size: 2.8rem;\r\n      color: #1A2530; \/* Deep ink blue *\/\r\n      line-height: 1.3;\r\n      margin-bottom: 1.5rem;\r\n      text-shadow: 1px 1px 0px rgba(255,255,255,0.8);\r\n      max-width: 800px;\r\n      margin-bottom: 20px !important;\r\n    }\r\n\r\n    .ink-quote-source {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.95rem;\r\n      letter-spacing: 0.25em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .quote-dots {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 0.8rem;\r\n    }\r\n\r\n    .quote-dot {\r\n      width: 10px;\r\n      height: 10px;\r\n      min-width: 10px;\r\n      min-height: 10px;\r\n      border-radius: 50%;\r\n      border: 1px solid var(--color-gold);\r\n      background: none;\r\n      cursor: pointer;\r\n      transition: all 0.3s ease;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      padding: 0;\r\n      margin: 0;\r\n      line-height: 1;\r\n      appearance: none;\r\n      -webkit-appearance: none;\r\n      -moz-appearance: none;\r\n      font-size: 0;\r\n    }\r\n\r\n    .quote-dot.active {\r\n      background-color: var(--color-gold);\r\n      transform: scale(1.3);\r\n    }\r\n\r\n    .quote-controls {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 0.75rem;\r\n      margin-top: 1.5rem;\r\n    }\r\n\r\n    .quote-nav {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 0.75rem;\r\n    }\r\n\r\n    .quote-arrow {\r\n      width: 40px;\r\n      height: 40px;\r\n      border: 1px solid var(--color-border);\r\n      background-color: var(--color-hero-bg);\r\n      color: var(--color-heading);\r\n      border-radius: 50%;\r\n      cursor: pointer;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      font-size: 1rem;\r\n      transition: all 0.25s ease;\r\n    }\r\n\r\n    .quote-arrow:hover {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n    }\r\n\r\n    \/* SECTION 06: THE WORLD OF ENOCH (INTERACTIVE MAP) *\/\r\n    .map-section {\r\n      background-color: var(--color-alt-bg);\r\n      padding-bottom: 6rem;\r\n    }\r\n\r\n    .map-wrapper {\r\n      max-width: 1100px;\r\n      margin: 0 auto;\r\n      position: relative;\r\n      border: 8px double var(--color-border);\r\n      background-color: var(--color-bg);\r\n      box-shadow: 0 14px 28px rgba(75, 59, 42, 0.18);\r\n      border-radius: 2px;\r\n      overflow: hidden;\r\n      aspect-ratio: 1000 \/ 600;\r\n    }\r\n\r\n    \/* Map Illustration container *\/\r\n    .map-container {\r\n      width: 100%;\r\n      height: 100%;\r\n      position: relative;\r\n      background: radial-gradient(circle at center, rgba(253,251,247,0.45) 0%, rgba(223,212,189,0.55) 100%);\r\n    }\r\n\r\n    \/* Map vector lines layer *\/\r\n    .map-vector {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      pointer-events: none;\r\n      opacity: 0.35;\r\n      stroke: var(--color-gold);\r\n    }\r\n\r\n    \/* GLOWING HOTSPOT MARKERS *\/\r\n    .map-hotspot {\r\n      position: absolute;\r\n      width: 24px;\r\n      height: 24px;\r\n      transform: translate(-52%, -52%);\r\n      cursor: pointer;\r\n      z-index: 10;\r\n    }\r\n\r\n    .hotspot-center {\r\n      position: absolute;\r\n      top: 50%;\r\n      left: 50%;\r\n      width: 8px;\r\n      height: 8px;\r\n      margin-top: -4px;\r\n      margin-left: -4px;\r\n      background-color: var(--color-gold);\r\n      border-radius: 50%;\r\n      z-index: 2;\r\n    }\r\n\r\n    .hotspot-ring {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      border-radius: 50%;\r\n      border: 1.5px solid var(--color-gold);\r\n      background-color: rgba(139, 107, 62, 0.18);\r\n      box-shadow: 0 0 4px rgba(139, 107, 62, 0.3);\r\n      z-index: 1;\r\n      transition: transform 0.25s ease, box-shadow 0.25s ease;\r\n    }\r\n\r\n    .map-hotspot:hover .hotspot-ring {\r\n      transform: scale(1.08);\r\n      box-shadow: 0 0 10px rgba(139, 107, 62, 0.35);\r\n    }\r\n\r\n    \/* Label text floating near marker *\/\r\n    .hotspot-label {\r\n      position: absolute;\r\n      left: 32px;\r\n      top: 50%;\r\n      transform: translateY(-50%);\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.95rem;\r\n      letter-spacing: 0.15em;\r\n      color: var(--color-heading);\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n      white-space: nowrap;\r\n      text-shadow: 0 0 6px var(--color-bg), 1px 1px 0px var(--color-bg);\r\n      opacity: 0.75;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .map-hotspot:hover .hotspot-label {\r\n      opacity: 1;\r\n      color: var(--color-gold);\r\n      left: 36px;\r\n    }\r\n\r\n    \/* ELEGANT MODAL SLIDE-IN MANUSCRIPT WINDOW *\/\r\n    .manuscript-window {\r\n      position: absolute;\r\n      top: 2rem;\r\n      right: 2rem;\r\n      bottom: 2rem;\r\n      width: 380px;\r\n      background-color: var(--color-bg);\r\n      border: 8px double var(--color-border);\r\n      box-shadow: -10px 0 20px rgba(75, 59, 42, 0.18);\r\n      padding: 3rem 2rem 2rem 2rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      z-index: 20;\r\n      transform: translateX(120%);\r\n      transition: transform 0.5s ease;\r\n      background: radial-gradient(circle at center, rgba(253,251,247,0.82) 0%, rgba(239,230,210,0.9) 100%);\r\n    }\r\n\r\n    .manuscript-window.active {\r\n      transform: translateX(0);\r\n    }\r\n\r\n    @media (prefers-reduced-motion: reduce) {\r\n      *, *::before, *::after {\r\n        animation-duration: 0.001ms !important;\r\n        animation-iteration-count: 1 !important;\r\n        transition-duration: 0.001ms !important;\r\n        scroll-behavior: auto !important;\r\n      }\r\n      .hotspot-ring {\r\n        box-shadow: none;\r\n      }\r\n      .quote-slide {\r\n        transition: none;\r\n      }\r\n      .stone-gate,\r\n      .manuscript-window,\r\n      .map-hotspot:hover .hotspot-ring {\r\n        transition: none;\r\n      }\r\n    }\r\n\r\n    .manuscript-close {\r\n      position: absolute;\r\n      top: 1rem;\r\n      right: 1rem;\r\n      width: 30px;\r\n      height: 30px;\r\n      border-radius: 50%;\r\n      border: 1px solid var(--color-border);\r\n      background-color: var(--color-alt-bg);\r\n      color: var(--color-body);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      cursor: pointer;\r\n      font-size: 1rem;\r\n      line-height: 1;\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .manuscript-close:hover {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n    }\r\n\r\n    .manuscript-header {\r\n      border-bottom: 1px dashed rgba(176, 141, 87, 0.4);\r\n      padding-bottom: 1rem;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .manuscript-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.8rem;\r\n      letter-spacing: 0.2em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      margin-bottom: 0.3rem;\r\n      display: block;\r\n    }\r\n\r\n    .manuscript-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.6rem;\r\n      color: var(--color-heading);\r\n    }\r\n\r\n    \/* Inside Artwork sketch *\/\r\n    .manuscript-artwork {\r\n      width: 100%;\r\n      height: 160px;\r\n      border: 2px solid var(--color-border);\r\n      margin-bottom: 1.5rem;\r\n      background-color: var(--color-alt-bg);\r\n      overflow: hidden;\r\n      position: relative;\r\n    }\r\n\r\n    .manuscript-artwork-inner {\r\n      width: 100%;\r\n      height: 100%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      opacity: 0.45;\r\n      stroke: var(--color-body);\r\n      padding: 1rem;\r\n    }\r\n\r\n    .manuscript-text {\r\n      font-family: var(--font-body);\r\n      font-size: 0.88rem;\r\n      line-height: 1.7;\r\n      color: var(--color-body);\r\n      text-align: justify;\r\n      overflow-y: auto;\r\n      flex-grow: 1;\r\n      padding-right: 0.5rem;\r\n    }\r\n\r\n    \/* Custom scrollbar for manuscript window description box *\/\r\n    .manuscript-text::-webkit-scrollbar {\r\n      width: 5px;\r\n    }\r\n    .manuscript-text::-webkit-scrollbar-track {\r\n      background: transparent;\r\n    }\r\n    .manuscript-text::-webkit-scrollbar-thumb {\r\n      background: var(--color-border);\r\n      border-radius: 4px;\r\n    }\r\n\r\n    \/* Instruct label when no marker is clicked *\/\r\n    .map-instruction {\r\n      position: absolute;\r\n      bottom: 2rem;\r\n      left: 2rem;\r\n      background-color: rgba(248, 244, 234, 0.85);\r\n      border: 1px solid var(--color-border);\r\n      padding: 0.6rem 1.2rem;\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.1em;\r\n      color: var(--color-body);\r\n      z-index: 10;\r\n      pointer-events: none;\r\n      text-transform: uppercase;\r\n      box-shadow: 0 5px 15px rgba(0,0,0,0.05);\r\n    }\r\n\r\n    \/* MOBILE RESPONSIVENESS *\/\r\n    @media (max-width: 1024px) {\r\n      .chapters-grid {\r\n        grid-template-columns: repeat(2, 1fr);\r\n      }\r\n      .map-wrapper {\r\n        aspect-ratio: auto;\r\n        height: 600px;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      section {\r\n        padding: 4rem 1rem;\r\n      }\r\n      .section-title {\r\n        font-size: 2rem;\r\n      }\r\n      .chapters-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 1.5rem;\r\n      }\r\n      .ink-quote-text {\r\n        font-size: 2rem;\r\n      }\r\n      .quotes-frame {\r\n        padding: 3rem 1.5rem;\r\n      }\r\n      .map-wrapper {\r\n        height: 500px;\r\n      }\r\n      .manuscript-window {\r\n        width: 100%;\r\n        top: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        border-width: 4px;\r\n      }\r\n      .hotspot-label {\r\n        display: none; \/* Hide floating labels on mobile to avoid overlapping *\/\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- SECTION 04: FEATURED CHAPTERS -->\r\n  <section class=\"chapters-section\" id=\"chapters\">\r\n    <div class=\"section-header\">\r\n      <span class=\"section-subtitle\">Excerpts from the Codex<\/span>\r\n      <h2 class=\"section-title\">Featured Chapters<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"chapters-grid\">\r\n      \r\n      <!-- Chapter 1 -->\r\n      <div class=\"tablet-container\" data-chapter=\"1\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter I<\/span>\r\n          <p class=\"parchment-quote\">Before the heavens were made, the silent spirit moved.<\/p>\r\n          <p class=\"parchment-desc\">An exploration of the pre-temporal state of existence, detailing the uncreated light and the initial division of the cosmos.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter I<\/span>\r\n            <h3 class=\"engraved-title\">The First Cause<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter I<\/span>\r\n            <h3 class=\"engraved-title\">The First Cause<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 2 -->\r\n      <div class=\"tablet-container\" data-chapter=\"2\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter II<\/span>\r\n          <p class=\"parchment-quote\">They bound themselves with mutual curses on the mount.<\/p>\r\n          <p class=\"parchment-desc\">The descent of the two hundred angels upon Mount Hermon, documenting their sacred covenant and the forbidden arts they brought.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter II<\/span>\r\n            <h3 class=\"engraved-title\">The Watchers' Oath<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter II<\/span>\r\n            <h3 class=\"engraved-title\">The Watchers' Oath<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 3 -->\r\n      <div class=\"tablet-container\" data-chapter=\"3\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter III<\/span>\r\n          <p class=\"parchment-quote\">I was carried up into the heavens, where the walls were built of crystal.<\/p>\r\n          <p class=\"parchment-desc\">Enoch's physical translation into the upper firmaments, passing through walls of fire and rivers of living light.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter III<\/span>\r\n            <h3 class=\"engraved-title\">The Silent Ascent<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter III<\/span>\r\n            <h3 class=\"engraved-title\">The Silent Ascent<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 4 -->\r\n      <div class=\"tablet-container\" data-chapter=\"4\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter IV<\/span>\r\n          <p class=\"parchment-quote\">I saw the portals of the sun and stars, and how they arise.<\/p>\r\n          <p class=\"parchment-desc\">An ancient astrological blueprint mapping the twelve gates of the winds and the mathematical cycles of the luminaries.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter IV<\/span>\r\n            <h3 class=\"engraved-title\">The Celestial Portals<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter IV<\/span>\r\n            <h3 class=\"engraved-title\">The Celestial Portals<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 5 -->\r\n      <div class=\"tablet-container\" data-chapter=\"5\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter V<\/span>\r\n          <p class=\"parchment-quote\">The decrees of the ages are carved in the eternal sapphire.<\/p>\r\n          <p class=\"parchment-desc\">A profound study of the heavenly books containing the history of all generations, shown to Enoch by the Archangel Uriel.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter V<\/span>\r\n            <h3 class=\"engraved-title\">The Tablet of Destiny<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter V<\/span>\r\n            <h3 class=\"engraved-title\">The Tablet of Destiny<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 6 -->\r\n      <div class=\"tablet-container\" data-chapter=\"6\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter VI<\/span>\r\n          <p class=\"parchment-quote\">Three towards the east, and three towards the south, of precious stones.<\/p>\r\n          <p class=\"parchment-desc\">Enoch's journey to the ends of the earth, documenting the cosmic throne of God carved from columns of alabaster and jasper.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter VI<\/span>\r\n            <h3 class=\"engraved-title\">The Seven Mountains<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter VI<\/span>\r\n            <h3 class=\"engraved-title\">The Seven Mountains<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 7 -->\r\n      <div class=\"tablet-container\" data-chapter=\"7\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter VII<\/span>\r\n          <p class=\"parchment-quote\">And the fountains of the deep arose to wash away the giants.<\/p>\r\n          <p class=\"parchment-desc\">A detailed account of the divine decree of the Deluge and the cosmic mechanics behind the cleansing waters.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter VII<\/span>\r\n            <h3 class=\"engraved-title\">The Great Cleansing<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter VII<\/span>\r\n            <h3 class=\"engraved-title\">The Great Cleansing<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 8 -->\r\n      <div class=\"tablet-container\" data-chapter=\"8\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter VIII<\/span>\r\n          <p class=\"parchment-quote\">Its fragrance is sweet, and its leaves do not wither.<\/p>\r\n          <p class=\"parchment-desc\">The discovery of the Garden of Righteousness and the fragrance of the Tree of Wisdom, from which the ancients ate.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter VIII<\/span>\r\n            <h3 class=\"engraved-title\">The Tree of Wisdom<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter VIII<\/span>\r\n            <h3 class=\"engraved-title\">The Tree of Wisdom<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Chapter 9 -->\r\n      <div class=\"tablet-container\" data-chapter=\"9\">\r\n        <div class=\"tablet-parchment\">\r\n          <span class=\"parchment-chapter-num\">Chapter IX<\/span>\r\n          <p class=\"parchment-quote\">The names of the holy angels who watch over the orbits.<\/p>\r\n          <p class=\"parchment-desc\">The final esoteric catalog of cosmic calculations, tracking the movement of planets, the moon, and the constellations.<\/p>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-left\">\r\n          <div class=\"stone-corner tl\"><\/div>\r\n          <div class=\"stone-corner bl\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter IX<\/span>\r\n            <h3 class=\"engraved-title\">The Secrets of Stars<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"stone-gate stone-right\">\r\n          <div class=\"stone-corner tr\"><\/div>\r\n          <div class=\"stone-corner br\"><\/div>\r\n          <div class=\"engraving-wrapper\">\r\n            <span class=\"engraved-num\">Chapter IX<\/span>\r\n            <h3 class=\"engraved-title\">The Secrets of Stars<\/h3>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 05: QUOTE GALLERY -->\r\n  <section class=\"quotes-section\" id=\"quotes\">\r\n    <div class=\"quotes-frame\">\r\n      \r\n      <div class=\"quote-gallery-container\">\r\n        \r\n        <!-- Slide 1 -->\r\n        <div class=\"quote-slide active\" data-slide=\"1\">\r\n          <p class=\"ink-quote-text\">I saw the path of the angels, and the winds which turn the sky, and force the orb of the sun to set.<\/p>\r\n          <span class=\"ink-quote-source\">\u2014 Book of Enoch 18:5<\/span>\r\n        <\/div>\r\n\r\n        <!-- Slide 2 -->\r\n        <div class=\"quote-slide\" data-slide=\"2\">\r\n          <p class=\"ink-quote-text\">Before all things, the Great Glory sat upon His throne, and the chambers of the winds were opened.<\/p>\r\n          <span class=\"ink-quote-source\">\u2014 Book of Enoch 9:3<\/span>\r\n        <\/div>\r\n\r\n        <!-- Slide 3 -->\r\n        <div class=\"quote-slide\" data-slide=\"3\">\r\n          <p class=\"ink-quote-text\">The waters which are above the heavens shall be the masculine, and the waters under the earth shall be the feminine.<\/p>\r\n          <span class=\"ink-quote-source\">\u2014 Book of Enoch 54:8<\/span>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Carousel Controls -->\r\n      <div class=\"quote-controls\">\r\n        <div class=\"quote-dots\">\r\n          <button class=\"quote-dot active\" data-slide=\"1\" aria-label=\"Quote 1\"><\/button>\r\n          <button class=\"quote-dot\" data-slide=\"2\" aria-label=\"Quote 2\"><\/button>\r\n          <button class=\"quote-dot\" data-slide=\"3\" aria-label=\"Quote 3\"><\/button>\r\n        <\/div>\r\n\r\n        <div class=\"quote-nav\" aria-label=\"Quote navigation\">\r\n          <button class=\"quote-arrow prev\" aria-label=\"Previous quote\">\u2039<\/button>\r\n          <button class=\"quote-arrow next\" aria-label=\"Next quote\">\u203a<\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 06: THE WORLD OF ENOCH -->\r\n  <section class=\"map-section\" id=\"world-map\">\r\n    <div class=\"section-header\">\r\n      <span class=\"section-subtitle\">Cosmography of the Giants<\/span>\r\n      <h2 class=\"section-title\">The World of Enoch<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"map-wrapper\">\r\n      <div class=\"map-container\">\r\n        \r\n        <!-- Ancient World Map Hand-drawn vector overlay -->\r\n        <svg class=\"map-vector\" viewBox=\"0 0 1000 600\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n          <!-- Outer Grid \/ Framing -->\r\n          <rect x=\"15\" y=\"15\" width=\"970\" height=\"570\" stroke=\"var(--color-border)\" stroke-width=\"1.5\" \/>\r\n          <rect x=\"22\" y=\"22\" width=\"956\" height=\"556\" stroke=\"var(--color-border)\" stroke-width=\"0.5\" stroke-dasharray=\"3 3\" \/>\r\n          \r\n          <!-- Latitude & Longitude grid lines -->\r\n          <line x1=\"15\" y1=\"150\" x2=\"985\" y2=\"150\" stroke=\"var(--color-border)\" stroke-width=\"0.3\" stroke-dasharray=\"4 8\" \/>\r\n          <line x1=\"15\" y1=\"300\" x2=\"985\" y2=\"300\" stroke=\"var(--color-border)\" stroke-width=\"0.4\" \/>\r\n          <line x1=\"15\" y1=\"450\" x2=\"985\" y2=\"450\" stroke=\"var(--color-border)\" stroke-width=\"0.3\" stroke-dasharray=\"4 8\" \/>\r\n          \r\n          <line x1=\"250\" y1=\"15\" x2=\"250\" y2=\"585\" stroke=\"var(--color-border)\" stroke-width=\"0.3\" stroke-dasharray=\"4 8\" \/>\r\n          <line x1=\"500\" y1=\"15\" x2=\"500\" y2=\"585\" stroke=\"var(--color-border)\" stroke-width=\"0.4\" \/>\r\n          <line x1=\"750\" y1=\"15\" x2=\"750\" y2=\"585\" stroke=\"var(--color-border)\" stroke-width=\"0.3\" stroke-dasharray=\"4 8\" \/>\r\n          \r\n          <!-- Astrolabe Ring \/ Celestial coordinates in center -->\r\n          <circle cx=\"500\" cy=\"300\" r=\"180\" stroke=\"var(--color-gold)\" stroke-width=\"0.4\" stroke-dasharray=\"2 2\" \/>\r\n          <circle cx=\"500\" cy=\"300\" r=\"220\" stroke=\"var(--color-gold)\" stroke-width=\"0.3\" \/>\r\n\r\n          <!-- Hand-drawn mountains (triangles with lines) -->\r\n          <!-- Mountain Range North (Top-left quadrant) -->\r\n          <path d=\"M100,120 L115,90 L130,120 M120,120 L132,100 L144,120 M135,120 L150,85 L165,120\" stroke=\"var(--color-border)\" stroke-width=\"0.8\" \/>\r\n          <path d=\"M107,110 L115,95 M125,112 L132,105 M142,110 L150,90\" stroke=\"var(--color-border)\" stroke-width=\"0.5\" \/>\r\n          \r\n          <!-- Mountain Range East (Right side) -->\r\n          <path d=\"M850,260 L865,230 L880,260 M870,260 L882,240 L894,260\" stroke=\"var(--color-border)\" stroke-width=\"0.8\" \/>\r\n          <path d=\"M857,250 L865,235 M875,252 L882,245\" stroke=\"var(--color-border)\" stroke-width=\"0.5\" \/>\r\n\r\n          <!-- Sea Monster \/ Leviathan illustration sketch in bottom left -->\r\n          <path d=\"M 120,480 C 135,465 150,470 160,490 C 170,510 185,505 200,485 C 190,520 160,530 140,510 Z\" stroke=\"var(--color-border)\" stroke-width=\"0.8\" \/>\r\n          <path d=\"M 148,475 C 152,472 157,472 161,475\" stroke=\"var(--color-border)\" stroke-width=\"0.5\" \/>\r\n          <!-- Small waves -->\r\n          <path d=\"M 100,520 Q 110,515 120,520 M 150,535 Q 160,530 170,535 M 220,500 Q 230,495 240,500\" stroke=\"var(--color-border)\" stroke-width=\"0.6\" \/>\r\n\r\n          <!-- Sailing Ship sketch in top right -->\r\n          <path d=\"M 780,110 L 810,110 L 805,120 L 785,120 Z\" stroke=\"var(--color-border)\" stroke-width=\"1\" \/>\r\n          <path d=\"M 795,110 L 795,80 L 780,95 Z M 802,110 L 802,85 L 815,98 Z\" stroke=\"var(--color-border)\" stroke-width=\"0.8\" fill=\"rgba(139,107,62,0.1)\" \/>\r\n          <path d=\"M 770,128 Q 795,122 820,128\" stroke=\"var(--color-border)\" stroke-width=\"0.5\" \/>\r\n\r\n          <!-- River vectors -->\r\n          <path d=\"M 680,220 Q 640,240 600,240 T 540,290 T 480,310 T 380,330\" stroke=\"var(--color-border)\" stroke-width=\"0.8\" \/>\r\n          <path d=\"M 740,320 Q 690,340 650,330 T 580,340\" stroke=\"var(--color-border)\" stroke-width=\"0.6\" \/>\r\n\r\n          <!-- Compass Rose \/ Sun symbol in top right -->\r\n          <g transform=\"translate(850, 100)\" stroke=\"var(--color-gold)\" stroke-width=\"0.5\">\r\n            <circle cx=\"0\" cy=\"0\" r=\"25\" fill=\"none\" stroke-dasharray=\"2 2\" \/>\r\n            <circle cx=\"0\" cy=\"0\" r=\"18\" fill=\"none\" \/>\r\n            <line x1=\"0\" y1=\"-32\" x2=\"0\" y2=\"32\" \/>\r\n            <line x1=\"-32\" y1=\"0\" x2=\"32\" y2=\"0\" \/>\r\n            <polygon points=\"0,-18 4,-4 18,0 4,4 0,18 -4,4 -18,0 -4,-4\" fill=\"none\" stroke=\"var(--color-gold)\" stroke-width=\"0.8\" \/>\r\n          <\/g>\r\n        <\/svg>\r\n\r\n        <!-- INTERACTIVE HOTSPOTS -->\r\n        \r\n        <!-- Hotspot 1: Heaven -->\r\n        <div class=\"map-hotspot\" style=\"top: 18%; left: 50%;\" data-spot=\"heaven\">\r\n          <div class=\"hotspot-center\"><\/div>\r\n          <div class=\"hotspot-ring\"><\/div>\r\n          <span class=\"hotspot-label\">Heaven<\/span>\r\n        <\/div>\r\n\r\n        <!-- Hotspot 2: Garden -->\r\n        <div class=\"map-hotspot\" style=\"top: 40%; left: 78%;\" data-spot=\"garden\">\r\n          <div class=\"hotspot-center\"><\/div>\r\n          <div class=\"hotspot-ring\"><\/div>\r\n          <span class=\"hotspot-label\">Garden of Eden<\/span>\r\n        <\/div>\r\n\r\n        <!-- Hotspot 3: Watchers -->\r\n        <div class=\"map-hotspot\" style=\"top: 30%; left: 24%;\" data-spot=\"watchers\">\r\n          <div class=\"hotspot-center\"><\/div>\r\n          <div class=\"hotspot-ring\"><\/div>\r\n          <span class=\"hotspot-label\">Mount Hermon<\/span>\r\n        <\/div>\r\n\r\n        <!-- Hotspot 4: Flood -->\r\n        <div class=\"map-hotspot\" style=\"top: 76%; left: 34%;\" data-spot=\"flood\">\r\n          <div class=\"hotspot-center\"><\/div>\r\n          <div class=\"hotspot-ring\"><\/div>\r\n          <span class=\"hotspot-label\">The Abyssal Deep<\/span>\r\n        <\/div>\r\n\r\n        <!-- Hotspot 5: Babel -->\r\n        <div class=\"map-hotspot\" style=\"top: 58%; left: 58%;\" data-spot=\"babel\">\r\n          <div class=\"hotspot-center\"><\/div>\r\n          <div class=\"hotspot-ring\"><\/div>\r\n          <span class=\"hotspot-label\">Plains of Shinar<\/span>\r\n        <\/div>\r\n\r\n        <!-- Instruction Overlay -->\r\n        <div class=\"map-instruction\">Click map markers to read ancient journals<\/div>\r\n\r\n        <!-- ELEGANT SLIDE-IN MANUSCRIPT WINDOW -->\r\n        <div class=\"manuscript-window\" id=\"manuscript-panel\">\r\n          <button class=\"manuscript-close\" aria-label=\"Close panel\">\u00d7<\/button>\r\n          \r\n          <div class=\"manuscript-header\">\r\n            <span class=\"manuscript-subtitle\" id=\"panel-sub\">Apocryphal Region<\/span>\r\n            <h3 class=\"manuscript-title\" id=\"panel-title\">Location Name<\/h3>\r\n          <\/div>\r\n\r\n          <!-- Artwork sketch area -->\r\n          <div class=\"manuscript-artwork\">\r\n            <div class=\"manuscript-artwork-inner\" id=\"panel-art\">\r\n              <!-- Inline SVGs will load dynamically -->\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"manuscript-text\" id=\"panel-desc\">\r\n            Select a point of revelation on the map above to view translated manuscript excerpts detailing the geographic boundaries and historical records of the ancient world.\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- JAVASCRIPT LOGIC -->\r\n  <script>\r\n    \/* 1. QUOTE GALLERY CAROUSEL SYSTEM *\/\r\n    const slides = document.querySelectorAll('.quote-slide');\r\n    const dots = document.querySelectorAll('.quote-dot');\r\n    let currentSlide = 0;\r\n\r\n    function showSlide(index) {\r\n      slides.forEach(slide => slide.classList.remove('active'));\r\n      dots.forEach(dot => dot.classList.remove('active'));\r\n\r\n      slides[index].classList.add('active');\r\n      dots[index].classList.add('active');\r\n      currentSlide = index;\r\n    }\r\n\r\n    function nextSlide() {\r\n      let next = (currentSlide + 1) % slides.length;\r\n      showSlide(next);\r\n    }\r\n\r\n    function prevSlide() {\r\n      let prev = (currentSlide - 1 + slides.length) % slides.length;\r\n      showSlide(prev);\r\n    }\r\n\r\n    const prevQuoteBtn = document.querySelector('.quote-arrow.prev');\r\n    const nextQuoteBtn = document.querySelector('.quote-arrow.next');\r\n\r\n    dots.forEach((dot, idx) => {\r\n      dot.addEventListener('click', () => showSlide(idx));\r\n    });\r\n\r\n    prevQuoteBtn.addEventListener('click', prevSlide);\r\n    nextQuoteBtn.addEventListener('click', nextSlide);\r\n\r\n    \/* 2. INTERACTIVE MAP SYSTEM *\/\r\n    const hotspotData = {\r\n      heaven: {\r\n        title: \"The Celestial Palace\",\r\n        subtitle: \"Aetherial Boundary\",\r\n        desc: \"The high heaven where Enoch was taken in vision. He passed through walls built of crystal and surrounded by tongues of fire. Here lies the sapphire throne, the storehouses of the winds, the chambers of snow and hail, and the paths of the holy angels who guide the paths of the sun and stars.\",\r\n        art: `<svg viewBox=\"0 0 100 100\" width=\"80\" height=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"40\" stroke-dasharray=\"2 2\"\/>\r\n                <circle cx=\"50\" cy=\"50\" r=\"25\"\/>\r\n                <polygon points=\"50,15 54,35 74,35 58,47 64,67 50,55 36,67 42,47 26,35 46,35\" stroke=\"var(--color-gold)\"\/>\r\n                <line x1=\"50\" y1=\"5\" x2=\"50\" y2=\"95\"\/>\r\n                <line x1=\"5\" y1=\"50\" x2=\"95\" y2=\"50\"\/>\r\n              <\/svg>`\r\n      },\r\n      garden: {\r\n        title: \"Garden of Eden\",\r\n        subtitle: \"Genesis Paradise\",\r\n        desc: \"The Garden of Righteousness, located at the eastern edge of the earth. Here Enoch observed the Tree of Wisdom, from which the ancient fathers ate. The tree is described as having a fragrance that spreads exceedingly far, leaves that do not wither, and fruit resembling beautiful grapes that fill the senses with understanding.\",\r\n        art: `<svg viewBox=\"0 0 100 100\" width=\"80\" height=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\r\n                <path d=\"M50,90 L50,60 M50,60 C40,40 15,45 15,30 C15,10 50,5 50,50 C50,5 85,10 85,30 C85,45 60,40 50,60\" stroke-width=\"1.5\"\/>\r\n                <circle cx=\"35\" cy=\"25\" r=\"2\" fill=\"var(--color-gold)\"\/>\r\n                <circle cx=\"65\" cy=\"25\" r=\"2\" fill=\"var(--color-gold)\"\/>\r\n                <circle cx=\"50\" cy=\"18\" r=\"3\" fill=\"var(--color-gold)\"\/>\r\n                <path d=\"M 30,75 Q 50,70 70,75\" stroke=\"var(--color-gold)\"\/>\r\n              <\/svg>`\r\n      },\r\n      watchers: {\r\n        title: \"Mount Hermon\",\r\n        subtitle: \"Summit of the Descent\",\r\n        desc: \"The rugged mountain peak where Semjaza and the two hundred Watchers descended in the days of Jared. On this peak, they swore their mutual oaths and bound themselves with curses to take wives from the daughters of men, forever sealing their transgression and teaching mankind the forbidden arts of metallurgy, cosmetics, and astrology.\",\r\n        art: `<svg viewBox=\"0 0 100 100\" width=\"80\" height=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\r\n                <polygon points=\"50,10 20,80 80,80\" stroke-width=\"1.5\"\/>\r\n                <polygon points=\"45,25 35,80 65,80\" stroke-dasharray=\"2 2\"\/>\r\n                <path d=\"M50,10 L30,45 L40,55 L35,80\" stroke=\"var(--color-gold)\"\/>\r\n                <line x1=\"20\" y1=\"85\" x2=\"80\" y2=\"85\" stroke-width=\"1.5\"\/>\r\n              <\/svg>`\r\n      },\r\n      flood: {\r\n        title: \"The Abyssal Deep\",\r\n        subtitle: \"The Waters of Cleansing\",\r\n        desc: \"The great deep where the fountains of the abyss burst open. According to the manuscript, the floodgates of heaven were opened and the waters of the deep arose to wash away the corrupted Nephilim and the giants. The waters subsided to form a covenant between the heavens and the earth, symbolized by the bow in the clouds.\",\r\n        art: `<svg viewBox=\"0 0 100 100\" width=\"80\" height=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\r\n                <path d=\"M10,30 Q 30,10 50,30 T 90,30\" stroke-width=\"1.5\"\/>\r\n                <path d=\"M10,50 Q 30,30 50,50 T 90,50\" stroke=\"var(--color-gold)\" stroke-width=\"1\"\/>\r\n                <path d=\"M10,70 Q 30,50 50,70 T 90,70\" stroke-width=\"1.5\"\/>\r\n                <circle cx=\"50\" cy=\"20\" r=\"3\" fill=\"var(--color-gold)\" opacity=\"0.6\"\/>\r\n              <\/svg>`\r\n      },\r\n      babel: {\r\n        title: \"Plains of Shinar\",\r\n        subtitle: \"The Hubris of Babel\",\r\n        desc: \"The plain where the survivors of the great flood gathered to construct a city and a tower with its top reaching to the heavens. This monument of human pride led to the divine confusion of language, the dispersion of the tribes across the face of the earth, and the division of Enoch's original codex into disparate tribal traditions.\",\r\n        art: `<svg viewBox=\"0 0 100 100\" width=\"80\" height=\"80\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\">\r\n                <rect x=\"35\" y=\"60\" width=\"30\" height=\"30\" stroke-width=\"1.5\"\/>\r\n                <rect x=\"40\" y=\"35\" width=\"20\" height=\"25\"\/>\r\n                <rect x=\"45\" y=\"15\" width=\"10\" height=\"20\" stroke=\"var(--color-gold)\"\/>\r\n                <line x1=\"25\" y1=\"90\" x2=\"75\" y2=\"90\" stroke-width=\"1.5\"\/>\r\n                <line x1=\"40\" y1=\"75\" x2=\"60\" y2=\"75\"\/>\r\n                <line x1=\"45\" y1=\"50\" x2=\"55\" y2=\"50\"\/>\r\n              <\/svg>`\r\n      }\r\n    };\r\n\r\n    const hotspots = document.querySelectorAll('.map-hotspot');\r\n    const panel = document.getElementById('manuscript-panel');\r\n    const panelSub = document.getElementById('panel-sub');\r\n    const panelTitle = document.getElementById('panel-title');\r\n    const panelArt = document.getElementById('panel-art');\r\n    const panelDesc = document.getElementById('panel-desc');\r\n    const panelClose = document.querySelector('.manuscript-close');\r\n\r\n    hotspots.forEach(spot => {\r\n      spot.addEventListener('click', (e) => {\r\n        e.stopPropagation();\r\n        const spotId = spot.getAttribute('data-spot');\r\n        const data = hotspotData[spotId];\r\n\r\n        if (data) {\r\n          panelSub.textContent = data.subtitle;\r\n          panelTitle.textContent = data.title;\r\n          panelArt.innerHTML = data.art;\r\n          panelDesc.textContent = data.desc;\r\n\r\n          \/\/ Open the manuscript window panel\r\n          panel.classList.add('active');\r\n              }\r\n      });\r\n    });\r\n\r\n    \/\/ Close panel trigger\r\n    panelClose.addEventListener('click', () => {\r\n      panel.classList.remove('active');\r\n    });\r\n\r\n    \/\/ Click anywhere on map background closes panel\r\n    document.querySelector('.map-container').addEventListener('click', () => {\r\n      panel.classList.remove('active');\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<div class=\"elementor-element elementor-element-775f5a6 e-con-full e-flex e-con e-parent\" data-id=\"775f5a6\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1cd4037 elementor-widget elementor-widget-html\" data-id=\"1cd4037\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t  <!-- SEO Meta Tags -->\r\n  <meta name=\"description\" content=\"Experience the Book of Enoch print edition. Preview the ancient manuscript, explore dual-language options, and purchase on Amazon or Barnes & Noble.\">\r\n  <meta name=\"keywords\" content=\"Enoch, Apocrypha, Ancient Manuscript, Bible, Watchers, Dual Language Edition\">\r\n  <meta name=\"author\" content=\"Author of Enoch\">\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=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&family=Pinyon+Script&display=swap\" rel=\"stylesheet\">\r\n\r\n  <!-- GSAP Library -->\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/gsap.min.js\"><\/script>\r\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.2\/ScrollTrigger.min.js\"><\/script>\r\n\r\n  <style>\r\n    \/* DESIGN SYSTEM & TOKENS *\/\r\n    :root {\r\n      --color-bg: #F8F4EA;\r\n      --color-alt-bg: #EFE6D2;\r\n      --color-card-bg: #D8C3A5;\r\n      --color-gold: #8B6B3E;\r\n      --color-heading: #25364A;\r\n      --color-body: #4B3B2A;\r\n      --color-hero-bg: #FDFBF7;\r\n      --color-border: #B08D57;\r\n      --color-dark-slate: #1C2630;\r\n      \r\n      --font-heading: 'Cinzel Decorative', serif;\r\n      --font-secondary: 'Cormorant Garamond', serif;\r\n      --font-body: 'Inter', sans-serif;\r\n      --font-quote: 'EB Garamond', serif;\r\n      --font-ink: 'Pinyon Script', cursive;\r\n    }\r\n\r\n    \/* GLOBAL RESET & STYLES *\/\r\n    * {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    body {\r\n      background-color: var(--color-bg);\r\n      color: var(--color-body);\r\n      font-family: var(--font-body);\r\n      overflow-x: hidden;\r\n      background-image: \r\n        radial-gradient(circle at center, rgba(253,251,247,0.2) 0%, rgba(239,230,210,0.4) 100%),\r\n        url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.045 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.85'\/%3E%3C\/svg%3E\");\r\n    }\r\n\r\n    \/* SCROLLBAR *\/\r\n    ::-webkit-scrollbar {\r\n      width: 12px;\r\n    }\r\n    ::-webkit-scrollbar-track {\r\n      background: var(--color-bg);\r\n      border-left: 1px solid var(--color-alt-bg);\r\n    }\r\n    ::-webkit-scrollbar-thumb {\r\n      background: var(--color-gold);\r\n      border: 3px solid var(--color-bg);\r\n      border-radius: 6px;\r\n    }\r\n    ::-webkit-scrollbar-thumb:hover {\r\n      background: var(--color-border);\r\n    }\r\n\r\n    \/* CUSTOM BRONZE CURSOR & DUST GLOW *\/\r\n    #custom-cursor {\r\n      position: fixed;\r\n      top: 0;\r\n      left: 0;\r\n      width: 28px;\r\n      height: 28px;\r\n      pointer-events: none;\r\n      z-index: 99999;\r\n      transform: translate3d(0, 0, 0);\r\n      will-change: transform;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      transition: width 0.3s ease, height 0.3s ease;\r\n      opacity: 0;\r\n    }\r\n\r\n    #custom-cursor svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      fill: var(--color-gold);\r\n      filter: drop-shadow(0 2px 4px rgba(75, 59, 42, 0.4));\r\n      transition: transform 0.3s ease, fill 0.3s ease;\r\n    }\r\n\r\n    #custom-cursor::before {\r\n      content: '';\r\n      position: absolute;\r\n      width: 40px;\r\n      height: 40px;\r\n      background: radial-gradient(circle, rgba(139, 107, 62, 0.3) 0%, rgba(176, 141, 87, 0) 70%);\r\n      border-radius: 50%;\r\n      opacity: 0;\r\n      transform: scale(0.5);\r\n      transition: transform 0.3s ease, opacity 0.3s ease;\r\n      z-index: -1;\r\n    }\r\n\r\n    #custom-cursor.cursor-hover::before {\r\n      opacity: 1;\r\n      transform: scale(1.8);\r\n    }\r\n\r\n    #custom-cursor.cursor-hover svg {\r\n      transform: scale(1.2) rotate(15deg);\r\n      fill: #B08D57;\r\n    }\r\n\r\n    body.reduced-motion-body #custom-cursor {\r\n      display: none !important;\r\n    }\r\n\r\n    \/* premium header styles moved to header.html *\/\r\n\r\n    \/* LAYOUT SECTION STYLE *\/\r\n    section {\r\n      padding: 8rem 2rem;\r\n      border-bottom: 2px solid var(--color-border);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .section-header {\r\n      max-width: 800px;\r\n      margin: 0 auto 4rem auto;\r\n      text-align: center;\r\n    }\r\n\r\n    .section-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.05rem;\r\n      letter-spacing: 0.3em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      margin-bottom: 0.6rem;\r\n      font-weight: 700;\r\n      display: block;\r\n    }\r\n\r\n    .section-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.8rem;\r\n      color: var(--color-heading);\r\n      letter-spacing: 0.05em;\r\n      text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.8);\r\n    }\r\n\r\n    \/* SECTION 07: BOOK SHOWCASE *\/\r\n    .showcase-section {\r\n      background-color: var(--color-hero-bg);\r\n      min-height: 100vh;\r\n      display: flex;\r\n      align-items: center;\r\n      padding-top: 10rem;\r\n    }\r\n\r\n    .showcase-container {\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      width: 100%;\r\n      display: grid;\r\n      grid-template-columns: 1.1fr 0.9fr;\r\n      align-items: center;\r\n      gap: 5rem;\r\n      z-index: 2;\r\n    }\r\n\r\n    .showcase-left {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .showcase-desc {\r\n      font-family: var(--font-body);\r\n      font-size: 1.1rem;\r\n      line-height: 1.85;\r\n      color: var(--color-body);\r\n      margin-bottom: 2.5rem;\r\n      font-weight: 300;\r\n    }\r\n\r\n    \/* INTERACTIVE SWITCHERS *\/\r\n    .switcher-row {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 3rem;\r\n      margin-bottom: 3.5rem;\r\n      border-top: 1px dashed rgba(176, 141, 87, 0.25);\r\n      border-bottom: 1px dashed rgba(176, 141, 87, 0.25);\r\n      padding: 1.8rem 0;\r\n    }\r\n\r\n    .switcher-group {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.6rem;\r\n    }\r\n\r\n    .switcher-label {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.8rem;\r\n      color: var(--color-gold);\r\n      letter-spacing: 0.2em;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .switcher-options {\r\n      display: flex;\r\n      background-color: var(--color-alt-bg);\r\n      padding: 4px;\r\n      border: 1px solid var(--color-border);\r\n      border-radius: 4px;\r\n    }\r\n\r\n    .switcher-btn {\r\n      padding: 0.6rem 1.4rem;\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.9rem;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      font-weight: 600;\r\n      border: none;\r\n      background: none;\r\n      color: var(--color-body);\r\n      cursor: pointer;\r\n      transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\r\n      border-radius: 2px;\r\n    }\r\n    \r\n    .switcher-btn:hover {\r\n        background-color: #81643B !important\r\n    }\r\n\r\n    .switcher-btn.active {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      box-shadow: 0 4px 8px rgba(139, 107, 62, 0.25);\r\n    }\r\n\r\n    \/* STONE-STYLE PLAQUE BUTTONS (ancient finish) *\/\r\n    .plaque-buttons-group {\r\n      display: flex;\r\n      gap: 1.25rem;\r\n    }\r\n\r\n    .plaque-btn {\r\n      flex: 1;\r\n      padding: 1rem 1.6rem;\r\n      font-family: var(--font-secondary);\r\n      font-weight: 700;\r\n      font-size: 1rem;\r\n      letter-spacing: 0.12em;\r\n      text-transform: uppercase;\r\n      color: #efe8dd;\r\n      background: linear-gradient(180deg, #8f7a62 0%, #6f5c49 40%, #594A3B 100%);\r\n      border: 2px solid rgba(40,34,30,0.6);\r\n      box-shadow:\r\n        inset 0 6px 14px rgba(0,0,0,0.45),\r\n        0 8px 20px rgba(20,16,14,0.45);\r\n      text-decoration: none !important;\r\n      text-align: center;\r\n      position: relative;\r\n      overflow: visible;\r\n      border-radius: 10px;\r\n      transition: transform 0.28s ease, box-shadow 0.28s ease;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 0.75rem;\r\n      background-size: 200% 200%;\r\n    }\r\n\r\n    .plaque-btn::before {\r\n      content: '';\r\n      position: absolute;\r\n      inset: 6px;\r\n      border-radius: 8px;\r\n      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));\r\n      pointer-events: none;\r\n      mix-blend-mode: overlay;\r\n      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -8px 24px rgba(0,0,0,0.45);\r\n    }\r\n\r\n    .plaque-btn svg {\r\n      width: 18px;\r\n      height: 18px;\r\n      fill: #e9e2d8;\r\n      opacity: 0.95;\r\n      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.45));\r\n      transition: transform 0.28s ease;\r\n      \r\n    }\r\n\r\n    .plaque-btn:hover {\r\n      transform: translateY(-6px) scale(1.01);\r\n      box-shadow:\r\n        inset 0 8px 20px rgba(0,0,0,0.5),\r\n        0 18px 40px rgba(18,14,12,0.55);\r\n      color: white !important;\r\n    }\r\n\r\n    .plaque-btn:hover svg { transform: translateY(-2px) scale(1.05) rotate(2deg); }\r\n\r\n    .plaque-btn:active {\r\n      transform: translateY(0px) scale(0.995);\r\n      box-shadow: inset 0 6px 14px rgba(0,0,0,0.55), 0 6px 10px rgba(0,0,0,0.25);\r\n    }\r\n\r\n    \/* RIGHT COLUMN: 3D BOOK & PEDESTAL *\/\r\n    .showcase-right {\r\n      position: relative;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-height: 600px;\r\n    }\r\n\r\n    \/* Interactive 3D Book Mockup *\/\r\n    .book-3d-scene {\r\n      perspective: 1500px;\r\n      width: 280px;\r\n      height: 410px;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      z-index: 3;\r\n      transform: translateY(-20px);\r\n    }\r\n\r\n    .book-3d {\r\n      width: 260px;\r\n      height: 380px;\r\n      position: relative;\r\n      transform-style: preserve-3d;\r\n      transform: rotateY(-25deg) rotateX(15deg);\r\n      transition: transform 0.1s ease-out;\r\n      will-change: transform;\r\n    }\r\n\r\n    .book-side {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      box-shadow: 0 0 15px rgba(0,0,0,0.1);\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    \/* Front Cover *\/\r\n    .book-cover-front {\r\n      background-color: var(--color-dark-slate);\r\n      background-image: \r\n        radial-gradient(circle at center, rgba(37,54,74,0.7) 0%, rgba(10,15,20,0.95) 100%),\r\n        url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='leather'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23leather)'\/%3E%3C\/svg%3E\");\r\n      border: 1px solid #000;\r\n      transform: translateZ(16px);\r\n      z-index: 2;\r\n      padding: 2rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      border-radius: 4px 6px 6px 4px;\r\n      box-shadow: inset 0 0 15px rgba(255,255,255,0.05), 3px 0 10px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    \/* Ornate Gold Foil Borders on Front Cover *\/\r\n    .book-cover-front::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 10px;\r\n      bottom: 10px;\r\n      left: 10px;\r\n      right: 10px;\r\n      border: 2px solid #8B6B3E;\r\n      border-radius: inherit;\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px #B08D57;\r\n    }\r\n\r\n    \/* Corner Ornaments on cover *\/\r\n    .cover-corner {\r\n      position: absolute;\r\n      width: 20px;\r\n      height: 20px;\r\n      border: 2px solid #B08D57;\r\n      pointer-events: none;\r\n      z-index: 5;\r\n    }\r\n    .cover-corner.tl { top: 15px; left: 15px; border-right: none; border-bottom: none; }\r\n    .cover-corner.tr { top: 15px; right: 15px; border-left: none; border-bottom: none; }\r\n    .cover-corner.bl { bottom: 15px; left: 15px; border-right: none; border-top: none; }\r\n    .cover-corner.br { bottom: 15px; right: 15px; border-left: none; border-top: none; }\r\n\r\n    .cover-crest {\r\n      width: 90px;\r\n      height: 90px;\r\n      fill: none;\r\n      stroke: #B08D57;\r\n      stroke-width: 1.2;\r\n      margin-top: 2rem;\r\n      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));\r\n    }\r\n\r\n    .cover-title-group {\r\n      text-align: center;\r\n      z-index: 3;\r\n    }\r\n\r\n    .cover-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.7rem;\r\n      font-weight: 700;\r\n      color: #FFF;\r\n      background: linear-gradient(135deg, #FFE082 0%, #B08D57 100%);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n      margin-bottom: 0.5rem;\r\n      text-shadow: 0 2px 4px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    .cover-subtitle {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.85rem;\r\n      font-style: italic;\r\n      color: #D8C3A5;\r\n      letter-spacing: 0.15em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .cover-footer {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.72rem;\r\n      letter-spacing: 0.25em;\r\n      color: #B08D57;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      z-index: 3;\r\n    }\r\n\r\n    \/* Back Cover *\/\r\n    .book-cover-back {\r\n      background-color: #0F161E;\r\n      background-image: url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='leather'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'\/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23leather)'\/%3E%3C\/svg%3E\");\r\n      border: 1px solid #000;\r\n      transform: translateZ(-16px) rotateY(180deg);\r\n      border-radius: 6px 4px 4px 6px;\r\n      box-shadow: inset 0 0 15px rgba(255,255,255,0.05), -3px 0 10px rgba(0,0,0,0.3);\r\n    }\r\n\r\n    .book-cover-back::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 10px;\r\n      bottom: 10px;\r\n      left: 10px;\r\n      right: 10px;\r\n      border: 1px solid rgba(176, 141, 87, 0.4);\r\n      border-radius: inherit;\r\n    }\r\n\r\n    \/* Spine *\/\r\n    .book-spine {\r\n      width: 32px;\r\n      height: 380px;\r\n      background-color: #0A0F14;\r\n      background-image: linear-gradient(to right, #05070A, #1C2630, #05070A);\r\n      position: absolute;\r\n      left: calc(50% - 16px);\r\n      transform: rotateY(-90deg) translateZ(130px);\r\n      box-shadow: inset 0 0 8px rgba(255,255,255,0.05);\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      padding: 2.5rem 0;\r\n      box-sizing: border-box;\r\n      border-left: 1px solid rgba(0,0,0,0.4);\r\n      border-right: 1px solid rgba(0,0,0,0.4);\r\n    }\r\n\r\n    .spine-rib {\r\n      width: 100%;\r\n      height: 3px;\r\n      background: linear-gradient(90deg, #5A4632, #B08D57, #5A4632);\r\n      box-shadow: 0 1px 2px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    .spine-text {\r\n      font-family: var(--font-heading);\r\n      font-size: 0.72rem;\r\n      font-weight: 700;\r\n      color: #B08D57;\r\n      letter-spacing: 0.3em;\r\n      text-transform: uppercase;\r\n      writing-mode: vertical-rl;\r\n      text-orientation: mixed;\r\n      transform: rotate(180deg);\r\n      text-shadow: 0 -1px 1px rgba(0,0,0,0.5);\r\n    }\r\n\r\n    \/* Gilded Gold Pages *\/\r\n    .book-pages-right {\r\n      width: 30px;\r\n      height: 374px;\r\n      top: 3px;\r\n      background: repeating-linear-gradient(90deg, #F8F4EA 0px, #EFE6D2 2px, #D8C3A5 4px, #B08D57 6px, #F8F4EA 8px);\r\n      position: absolute;\r\n      left: calc(50% - 15px);\r\n      transform: rotateY(90deg) translateZ(128px);\r\n      box-shadow: inset 3px 0 5px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .book-pages-top {\r\n      width: 254px;\r\n      height: 30px;\r\n      left: 3px;\r\n      background: repeating-linear-gradient(180deg, #F8F4EA 0px, #EFE6D2 2px, #D8C3A5 4px, #B08D57 6px, #F8F4EA 8px);\r\n      position: absolute;\r\n      top: calc(50% - 15px);\r\n      transform: rotateX(90deg) translateZ(188px);\r\n      box-shadow: inset 0 3px 5px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .book-pages-bottom {\r\n      width: 254px;\r\n      height: 30px;\r\n      left: 3px;\r\n      background: repeating-linear-gradient(0deg, #F8F4EA 0px, #EFE6D2 2px, #D8C3A5 4px, #B08D57 6px, #F8F4EA 8px);\r\n      position: absolute;\r\n      top: calc(50% - 15px);\r\n      transform: rotateX(-90deg) translateZ(188px);\r\n      box-shadow: inset 0 -3px 5px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    \/* GLOWING STONE PEDESTAL *\/\r\n    .pedestal-wrapper {\r\n      position: absolute;\r\n      bottom: 20px;\r\n      width: 480px;\r\n      height: 200px;\r\n      z-index: 1;\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Glowing runes\/rings on floor *\/\r\n    .floor-runes {\r\n      position: absolute;\r\n      top: 50px;\r\n      width: 380px;\r\n      height: 120px;\r\n      opacity: 0.6;\r\n      animation: pulseRuneGlow 6s ease-in-out infinite alternate;\r\n    }\r\n\r\n    @keyframes pulseRuneGlow {\r\n      0% { opacity: 0.3; transform: scale(0.97); }\r\n      100% { opacity: 0.75; transform: scale(1.03); }\r\n    }\r\n\r\n    .stone-pedestal {\r\n      position: relative;\r\n      width: 280px;\r\n      height: 60px;\r\n      background: linear-gradient(180deg, #7C7060 0%, #3D352C 100%);\r\n      border-top: 3px solid var(--color-border);\r\n      border-radius: 4px;\r\n      box-shadow: \r\n        0 15px 35px rgba(0,0,0,0.4),\r\n        0 0 25px rgba(176, 141, 87, 0.25),\r\n        inset 0 1px 0 rgba(255,255,255,0.15);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      top: 70px;\r\n    }\r\n\r\n    .stone-pedestal::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -15px;\r\n      width: 310px;\r\n      height: 15px;\r\n      background: linear-gradient(180deg, #A89B88 0%, #7C7060 100%);\r\n      border-radius: 4px 4px 0 0;\r\n      border: 1px solid rgba(176, 141, 87, 0.4);\r\n      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);\r\n    }\r\n\r\n    \/* Soft glowing pedestal light *\/\r\n    .pedestal-glow {\r\n      position: absolute;\r\n      top: -60px;\r\n      width: 180px;\r\n      height: 80px;\r\n      background: radial-gradient(ellipse at center, rgba(251, 245, 183, 0.35) 0%, rgba(139, 107, 62, 0) 70%);\r\n      filter: blur(10px);\r\n      z-index: 2;\r\n      animation: pulseLight 4s ease-in-out infinite alternate;\r\n    }\r\n\r\n    @keyframes pulseLight {\r\n      0% { opacity: 0.5; transform: scale(0.9); }\r\n      100% { opacity: 1; transform: scale(1.1); }\r\n    }\r\n\r\n    \/* SECTION 08: MANUSCRIPT PREVIEW *\/\r\n    .manuscript-section {\r\n      background-color: var(--color-alt-bg);\r\n      min-height: 100vh;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: center;\r\n    }\r\n\r\n    .manuscript-desc-text {\r\n      text-align: center;\r\n      max-width: 700px;\r\n      margin: -2rem auto 3rem auto;\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.25rem;\r\n      line-height: 1.7;\r\n      color: var(--color-body);\r\n    }\r\n\r\n    \/* Ancient Open Book Desk Layout *\/\r\n    .desk-container {\r\n      max-width: 1050px;\r\n      margin: 0 auto;\r\n      width: 100%;\r\n      position: relative;\r\n      z-index: 5;\r\n    }\r\n\r\n    .manuscript-book {\r\n      position: relative;\r\n      width: 100%;\r\n      height: 580px;\r\n      background-color: #2F241A; \/* Wood stand background shadow *\/\r\n      border: 16px double #3D2D1B; \/* Dark wood frame *\/\r\n      box-shadow: \r\n        0 30px 70px rgba(0, 0, 0, 0.45),\r\n        0 0 40px rgba(139, 107, 62, 0.15),\r\n        inset 0 0 20px rgba(0,0,0,0.8);\r\n      border-radius: 4px;\r\n      display: flex;\r\n      perspective: 1600px;\r\n    }\r\n\r\n    \/* Fine corner brackets for wood stand *\/\r\n    .desk-bracket {\r\n      position: absolute;\r\n      width: 25px;\r\n      height: 25px;\r\n      border: 2px solid var(--color-border);\r\n      pointer-events: none;\r\n      z-index: 20;\r\n    }\r\n    .desk-bracket.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }\r\n    .desk-bracket.tr { top: 6px; right: 6px; border-left: none; border-bottom: none; }\r\n    .desk-bracket.bl { bottom: 6px; left: 6px; border-right: none; border-top: none; }\r\n    .desk-bracket.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }\r\n\r\n    \/* Central Book spine shadows *\/\r\n    .manuscript-spine-shadow {\r\n      position: absolute;\r\n      left: 50%;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: 40px;\r\n      transform: translateX(-50%);\r\n      background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0.3) 100%);\r\n      z-index: 10;\r\n      pointer-events: none;\r\n    }\r\n\r\n    \/* Individual Page Styles *\/\r\n    .manuscript-page {\r\n      width: 50%;\r\n      height: 100%;\r\n      background: radial-gradient(circle at center, rgba(253,251,247,1) 0%, rgba(240,231,211,1) 100%);\r\n      box-shadow: inset 0 0 40px rgba(75, 59, 42, 0.12);\r\n      padding: 3.5rem 3rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      box-sizing: border-box;\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    \/* Page inner double-border line *\/\r\n    .manuscript-page::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 15px;\r\n      bottom: 15px;\r\n      left: 15px;\r\n      right: 15px;\r\n      border: 1px solid rgba(176, 141, 87, 0.35);\r\n      pointer-events: none;\r\n    }\r\n    \r\n    .manuscript-page::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 19px;\r\n      bottom: 19px;\r\n      left: 19px;\r\n      right: 19px;\r\n      border: 0.5px dashed rgba(176, 141, 87, 0.2);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .left-page {\r\n      border-radius: 4px 0 0 4px;\r\n      padding-right: 4rem; \/* fold gap *\/\r\n      border-right: 1px solid rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    .right-page {\r\n      border-radius: 0 4px 4px 0;\r\n      padding-left: 4rem; \/* fold gap *\/\r\n      border-left: 1px solid rgba(0, 0, 0, 0.15);\r\n    }\r\n\r\n    \/* Contents of manuscript page *\/\r\n    .manuscript-header-script {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.8rem;\r\n      letter-spacing: 0.2em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      border-bottom: 1px dashed rgba(139, 107, 62, 0.25);\r\n      padding-bottom: 0.5rem;\r\n      margin-bottom: 1.5rem;\r\n      display: flex;\r\n      justify-content: space-between;\r\n    }\r\n\r\n    .manuscript-text-body {\r\n      font-family: var(--font-quote);\r\n      font-size: 1.15rem;\r\n      line-height: 1.7;\r\n      color: var(--color-body);\r\n      text-align: justify;\r\n      flex-grow: 1;\r\n    }\r\n\r\n    .manuscript-illustration {\r\n      width: 100%;\r\n      height: 200px;\r\n      border: 1px solid rgba(139, 107, 62, 0.3);\r\n      background-color: rgba(239, 230, 210, 0.4);\r\n      margin: 1.5rem 0 0 0;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      position: relative;\r\n      opacity: 0.75;\r\n    }\r\n\r\n    .manuscript-illustration svg {\r\n      width: 85%;\r\n      height: 85%;\r\n      stroke: var(--color-gold);\r\n      stroke-width: 0.8;\r\n      fill: none;\r\n    }\r\n\r\n    .dropcap-ornament {\r\n      float: left;\r\n      font-family: var(--font-heading);\r\n      font-size: 3.2rem;\r\n      line-height: 0.9;\r\n      padding-top: 4px;\r\n      padding-right: 8px;\r\n      color: var(--color-gold);\r\n      font-weight: 900;\r\n      text-shadow: 1px 1px 0px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    \/* DYNAMIC FLIPPING PAGE LAYER *\/\r\n    .flipping-page-container {\r\n      position: absolute;\r\n      top: 0;\r\n      right: 0;\r\n      width: 50%;\r\n      height: 100%;\r\n      transform-origin: left center;\r\n      transform-style: preserve-3d;\r\n      z-index: 15;\r\n      display: none; \/* activated in JS *\/\r\n      pointer-events: none;\r\n    }\r\n\r\n    .flipping-face {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      backface-visibility: hidden;\r\n      box-shadow: inset 0 0 40px rgba(75, 59, 42, 0.12);\r\n      padding: 3.5rem 3rem;\r\n      box-sizing: border-box;\r\n      display: flex;\r\n      flex-direction: column;\r\n      background: radial-gradient(circle at center, rgba(253,251,247,1) 0%, rgba(240,231,211,1) 100%);\r\n    }\r\n\r\n    .flipping-face::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 15px;\r\n      bottom: 15px;\r\n      left: 15px;\r\n      right: 15px;\r\n      border: 1px solid rgba(176, 141, 87, 0.35);\r\n    }\r\n\r\n    .flipping-face::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 19px;\r\n      bottom: 19px;\r\n      left: 19px;\r\n      right: 19px;\r\n      border: 0.5px dashed rgba(176, 141, 87, 0.2);\r\n    }\r\n\r\n    .flipping-face-front {\r\n      \/* Looks like a Right Page initially, will fold to the left *\/\r\n      padding-left: 4rem;\r\n      border-left: 1px solid rgba(0, 0, 0, 0.15);\r\n      border-radius: 0 4px 4px 0;\r\n      z-index: 2;\r\n    }\r\n\r\n    .flipping-face-back {\r\n      \/* Looks like a Left Page, faces the rear *\/\r\n      padding-right: 4rem;\r\n      border-right: 1px solid rgba(0, 0, 0, 0.15);\r\n      border-radius: 4px 0 0 4px;\r\n      transform: rotateY(180deg);\r\n      z-index: 1;\r\n    }\r\n\r\n    \/* PAGE TURN CONTROL NAVIGATION TABS *\/\r\n    .desk-controls {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      margin-top: 2rem;\r\n      padding: 0 1rem;\r\n    }\r\n\r\n    .desk-nav-btn {\r\n      background: var(--color-card-bg);\r\n      border: 2px solid var(--color-border);\r\n      padding: 0.8rem 2rem;\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.9rem;\r\n      font-weight: 700;\r\n      letter-spacing: 0.15em;\r\n      text-transform: uppercase;\r\n      color: var(--color-heading);\r\n      cursor: pointer;\r\n      box-shadow: \r\n        inset 0 1px 0 rgba(255,255,255,0.4),\r\n        0 4px 10px rgba(0,0,0,0.1);\r\n      transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 0.6rem;\r\n      border-radius: 2px;\r\n    }\r\n\r\n    .desk-nav-btn:hover:not(:disabled) {\r\n      background-color: var(--color-gold);\r\n      color: var(--color-hero-bg);\r\n      border-color: var(--color-gold);\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 15px rgba(139, 107, 62, 0.25);\r\n    }\r\n\r\n    .desk-nav-btn:disabled {\r\n      opacity: 0.4;\r\n      cursor: not-allowed;\r\n      box-shadow: none;\r\n    }\r\n\r\n    \/* SECTION 09: WHY READ ENOCH? *\/\r\n    .why-read-section {\r\n      background-color: var(--color-bg);\r\n    }\r\n\r\n    .why-read-grid {\r\n      max-width: 1300px;\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: 0.95fr 1.05fr;\r\n      gap: 6rem;\r\n      align-items: center;\r\n    }\r\n\r\n    \/* Left Side: Ancient Wax-Sealed Letter Scroll *\/\r\n    .scroll-letter-box {\r\n      background-color: var(--color-hero-bg);\r\n      border: 8px double var(--color-border);\r\n      padding: 4.5rem 3.5rem;\r\n      box-shadow: \r\n        0 20px 45px rgba(75, 59, 42, 0.15),\r\n        inset 0 0 15px rgba(75,59,42,0.05);\r\n      position: relative;\r\n      transform: rotate(-1deg);\r\n      border-radius: 2px;\r\n      background-image: \r\n        radial-gradient(circle at center, rgba(253,251,247,0.1) 0%, rgba(239,230,210,0.2) 100%);\r\n    }\r\n\r\n    .scroll-letter-box::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 8px;\r\n      bottom: 8px;\r\n      left: 8px;\r\n      right: 8px;\r\n      border: 1px dashed rgba(176, 141, 87, 0.35);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .scroll-letter-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.8rem;\r\n      color: var(--color-heading);\r\n      margin-bottom: 2rem;\r\n      border-bottom: 1.5px solid var(--color-border);\r\n      padding-bottom: 1rem;\r\n      text-align: center;\r\n    }\r\n\r\n    .scroll-letter-body {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.25rem;\r\n      line-height: 1.8;\r\n      color: var(--color-body);\r\n      text-align: justify;\r\n      margin-bottom: 3rem;\r\n    }\r\n\r\n    .scroll-letter-footer {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      border-top: 1px dashed rgba(176, 141, 87, 0.3);\r\n      padding-top: 1.5rem;\r\n    }\r\n\r\n    .signature-group {\r\n      display: flex;\r\n      flex-direction: column;\r\n    }\r\n\r\n    .sig-label {\r\n      font-family: var(--font-body);\r\n      font-size: 0.72rem;\r\n      letter-spacing: 0.15em;\r\n      color: var(--color-gold);\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .sig-text {\r\n      font-family: var(--font-ink);\r\n      font-size: 2.2rem;\r\n      color: #1A2530;\r\n      margin-top: 0.2rem;\r\n    }\r\n\r\n    \/* Crimson Wax Seal Component *\/\r\n    .wax-seal {\r\n      width: 76px;\r\n      height: 76px;\r\n      background-color: #8C1C1C;\r\n      background-image: radial-gradient(circle at 30% 30%, #BF2E2E 0%, #8C1C1C 65%, #4D0A0A 100%);\r\n      border-radius: 50% 48% 52% 49% \/ 49% 51% 48% 52%;\r\n      box-shadow: \r\n        inset 0 4px 6px rgba(255,255,255,0.25),\r\n        inset 0 -4px 6px rgba(0,0,0,0.4),\r\n        3px 6px 15px rgba(0,0,0,0.3);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      position: relative;\r\n      cursor: pointer;\r\n      transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);\r\n    }\r\n\r\n    .wax-seal::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 10%;\r\n      left: 10%;\r\n      width: 80%;\r\n      height: 80%;\r\n      border: 2.5px solid rgba(77, 10, 10, 0.35);\r\n      border-radius: 50% 51% 48% 52% \/ 50% 48% 52% 49%;\r\n      pointer-events: none;\r\n    }\r\n\r\n    .wax-seal-inner {\r\n      width: 48px;\r\n      height: 48px;\r\n      background-color: #7A1717;\r\n      border-radius: 50%;\r\n      box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 1px 2px rgba(255,255,255,0.15);\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      color: #DFC070;\r\n    }\r\n\r\n    .wax-seal-inner svg {\r\n      width: 25px;\r\n      height: 25px;\r\n      fill: none;\r\n      stroke: #DFC070;\r\n      stroke-width: 1.5;\r\n      filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.4)) drop-shadow(0 1px 0 rgba(255,255,255,0.25));\r\n    }\r\n\r\n    .wax-seal:hover {\r\n      transform: scale(1.1) rotate(6deg);\r\n      box-shadow: \r\n        inset 0 4px 6px rgba(255,255,255,0.35),\r\n        inset 0 -4px 6px rgba(0,0,0,0.3),\r\n        5px 12px 25px rgba(140, 28, 28, 0.4);\r\n    }\r\n\r\n    \/* Right Side: Vertical list of points with Seals *\/\r\n    .why-points-list {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 2.5rem;\r\n    }\r\n\r\n    .why-point-item {\r\n      display: flex;\r\n      gap: 2rem;\r\n      align-items: flex-start;\r\n      padding: 1.5rem;\r\n      border: 1px solid transparent;\r\n      border-radius: 4px;\r\n      transition: all 0.4s ease;\r\n    }\r\n\r\n    .why-point-item:hover {\r\n      background-color: var(--color-hero-bg);\r\n      border-color: var(--color-border);\r\n      box-shadow: 0 10px 25px rgba(75, 59, 42, 0.08);\r\n      transform: translateX(10px);\r\n    }\r\n\r\n    .point-content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.5rem;\r\n    }\r\n\r\n    .point-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.3rem;\r\n      color: var(--color-heading);\r\n      letter-spacing: 0.05em;\r\n    }\r\n\r\n    .point-desc {\r\n      font-family: var(--font-body);\r\n      font-size: 0.95rem;\r\n      line-height: 1.7;\r\n      color: var(--color-body);\r\n      font-weight: 300;\r\n    }\r\n\r\n    \/* SECTION 10: BUY EVERYWHERE *\/\r\n    .buy-everywhere-section {\r\n      background-color: var(--color-alt-bg);\r\n    }\r\n\r\n    .buy-panels-container {\r\n      max-width: 1100px;\r\n      margin: 0 auto;\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr;\r\n      gap: 4rem;\r\n      perspective: 1600px;\r\n    }\r\n\r\n    .purchase-panel {\r\n      position: relative;\r\n      height: 560px;\r\n      width: 100%;\r\n      border-radius: 8px;\r\n      transform-style: preserve-3d;\r\n      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);\r\n    }\r\n\r\n    \/* Cover \/ Door *\/\r\n    .panel-cover-door {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      backface-visibility: hidden;\r\n      z-index: 5;\r\n      padding: 3rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.85s cubic-bezier(0.25, 1, 0.5, 1);\r\n      box-sizing: border-box;\r\n      border: 1px solid rgba(0,0,0,0.6);\r\n      box-shadow: 5px 5px 15px rgba(0,0,0,0.25);\r\n    }\r\n\r\n    .panel-cover-door::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 12px;\r\n      bottom: 12px;\r\n      left: 12px;\r\n      right: 12px;\r\n      border: 2px solid #B08D57;\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px rgba(176,141,87,0.3);\r\n    }\r\n\r\n    \/* Left Panel: Amazon (opens left) *\/\r\n    .amazon-panel .panel-cover-door {\r\n      background: radial-gradient(circle at center, #2C3540 0%, #161D26 100%);\r\n      transform-origin: left center;\r\n      border-radius: 4px 8px 8px 4px;\r\n    }\r\n\r\n    .amazon-panel:hover .panel-cover-door {\r\n      transform: rotateY(-115deg);\r\n      box-shadow: 15px 5px 30px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    \/* Right Panel: Barnes & Noble (opens right) *\/\r\n    .bn-panel .panel-cover-door {\r\n      background: radial-gradient(circle at center, #1B352E 0%, #0F1F1A 100%);\r\n      transform-origin: right center;\r\n      border-radius: 8px 4px 4px 8px;\r\n    }\r\n\r\n    .bn-panel:hover .panel-cover-door {\r\n      transform: rotateY(115deg);\r\n      box-shadow: -15px 5px 30px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    \/* Cover Branding elements *\/\r\n    .panel-crest {\r\n      width: 100px;\r\n      height: 100px;\r\n      fill: none;\r\n      stroke: #B08D57;\r\n      stroke-width: 1.2;\r\n      margin-top: 1.5rem;\r\n    }\r\n\r\n    .panel-door-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 2.1rem;\r\n      font-weight: 700;\r\n      color: #FFF;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.1em;\r\n      text-align: center;\r\n      background: linear-gradient(135deg, #FFE082 0%, #B08D57 100%);\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      text-shadow: 0 2px 4px rgba(0,0,0,0.4);\r\n    }\r\n\r\n    .panel-door-hint {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.25em;\r\n      color: #B08D57;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 0.5rem;\r\n    }\r\n\r\n    .panel-door-hint svg {\r\n      width: 14px;\r\n      height: 14px;\r\n      fill: #B08D57;\r\n      animation: rotateSlow 8s linear infinite;\r\n    }\r\n\r\n    @keyframes rotateSlow {\r\n      0% { transform: rotate(0deg); }\r\n      100% { transform: rotate(360deg); }\r\n    }\r\n\r\n    \/* Inside Card Content (Static behind Cover) *\/\r\n    .panel-inside-content {\r\n      position: absolute;\r\n      top: 0;\r\n      left: 0;\r\n      width: 100%;\r\n      height: 100%;\r\n      z-index: 1;\r\n      background: radial-gradient(circle at center, rgba(253,251,247,1) 0%, rgba(240,231,211,1) 100%);\r\n      border: 8px double var(--color-border);\r\n      border-radius: 8px;\r\n      padding: 3.5rem 2.5rem;\r\n      display: flex;\r\n      flex-direction: column;\r\n      justify-content: space-between;\r\n      box-sizing: border-box;\r\n      box-shadow: inset 0 0 30px rgba(75, 59, 42, 0.15);\r\n    }\r\n\r\n    .panel-inside-content::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: 8px;\r\n      bottom: 8px;\r\n      left: 8px;\r\n      right: 8px;\r\n      border: 1px dashed rgba(176, 141, 87, 0.35);\r\n      pointer-events: none;\r\n    }\r\n\r\n    .panel-inside-header {\r\n      text-align: center;\r\n    }\r\n\r\n    .panel-edition-tag {\r\n      font-family: var(--font-secondary);\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.2em;\r\n      color: var(--color-gold);\r\n      font-weight: 700;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .panel-inside-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.6rem;\r\n      color: var(--color-heading);\r\n      margin-top: 0.5rem;\r\n      letter-spacing: 0.05em;\r\n    }\r\n\r\n    .panel-specs-list {\r\n      list-style: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.8rem;\r\n      margin: 1.5rem 0;\r\n      border-top: 1px dashed rgba(176,141,87,0.3);\r\n      border-bottom: 1px dashed rgba(176,141,87,0.3);\r\n      padding: 1.5rem 0;\r\n    }\r\n\r\n    .panel-spec-item {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      font-family: var(--font-body);\r\n      font-size: 0.9rem;\r\n      color: var(--color-body);\r\n    }\r\n\r\n    .spec-label {\r\n      font-weight: 500;\r\n      text-transform: uppercase;\r\n      font-size: 0.78rem;\r\n      color: var(--color-gold);\r\n      letter-spacing: 0.1em;\r\n    }\r\n\r\n    .spec-value {\r\n      font-weight: 300;\r\n    }\r\n\r\n    .panel-price-row {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .panel-price-label {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.1rem;\r\n      color: var(--color-body);\r\n      font-style: italic;\r\n    }\r\n\r\n    .panel-price-val {\r\n      font-family: var(--font-heading);\r\n      font-size: 1.8rem;\r\n      color: var(--color-heading);\r\n      font-weight: 700;\r\n    }\r\n\r\n    \/* Inside Plaque Button *\/\r\n    .panel-inside-content .plaque-btn {\r\n      width: 100%;\r\n      flex: none;\r\n      padding: 1rem;\r\n      font-size: 0.95rem;\r\n    }\r\n\r\n    \/* Footer styles moved\/removed (footer is managed in separate file) *\/\r\n\r\n    \/* Loader moved to separate file; loader CSS removed from book.html *\/\r\n\r\n    \/* RESPONSIVENESS *\/\r\n    @media (max-width: 1100px) {\r\n      .showcase-container {\r\n        grid-template-columns: 1fr;\r\n        gap: 4rem;\r\n        text-align: center;\r\n      }\r\n      .showcase-left {\r\n        align-items: center;\r\n      }\r\n      .switcher-row {\r\n        justify-content: center;\r\n      }\r\n      .plaque-buttons-group {\r\n        width: 100%;\r\n        max-width: 600px;\r\n      }\r\n      .why-read-grid {\r\n        grid-template-columns: 1fr;\r\n        gap: 4rem;\r\n      }\r\n      .scroll-letter-box {\r\n        transform: none;\r\n      }\r\n      .buy-panels-container {\r\n        grid-template-columns: 1fr;\r\n        max-width: 500px;\r\n        gap: 3rem;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 768px) {\r\n      section {\r\n        padding: 5rem 1rem;\r\n      }\r\n      .section-title {\r\n        font-size: 2.2rem;\r\n        text-align: center;\r\n      }\r\n      .section-subtitle {\r\n        font-size: 15px;\r\n        text-align: center;\r\n      }\r\n      .plaque-buttons-group {\r\n        flex-direction: column;\r\n        gap: 1rem;\r\n      }\r\n      .manuscript-book {\r\n        height: 520px;\r\n        border-width: 8px;\r\n      }\r\n      .manuscript-page {\r\n        padding: 2rem 1.5rem;\r\n      }\r\n      .left-page {\r\n        padding-right: 2rem;\r\n      }\r\n      .right-page {\r\n        padding-left: 2rem;\r\n      }\r\n      .manuscript-text-body {\r\n        font-size: 1rem;\r\n        line-height: 1.6;\r\n      }\r\n      .manuscript-illustration {\r\n        height: 140px;\r\n      }\r\n      .why-point-item {\r\n        flex-direction: column;\r\n        align-items: center;\r\n        text-align: center;\r\n        gap: 1rem;\r\n      }\r\n      \/* premium header responsive rules moved to header.html *\/\r\n    }\r\n    \/* ============================================= *\/\r\n\/* NEW: ADDITIONAL RESPONSIVE CSS FOR SECTIONS    *\/\r\n\/* (added without changing any existing rules)    *\/\r\n\/* ============================================= *\/\r\n\r\n@media (max-width: 900px) {\r\n  .showcase-right {\r\n    min-height: 500px;\r\n  }\r\n  .book-3d-scene {\r\n    width: 240px;\r\n    height: 350px;\r\n  }\r\n  .book-3d {\r\n    width: 220px;\r\n    height: 320px;\r\n  }\r\n  .pedestal-wrapper {\r\n    width: 100%;\r\n    max-width: 380px;\r\n  }\r\n  .stone-pedestal {\r\n    width: 220px;\r\n  }\r\n  .stone-pedestal::before {\r\n    width: 250px;\r\n  }\r\n  .desk-container {\r\n    max-width: 100%;\r\n  }\r\n  .manuscript-book {\r\n    height: 500px;\r\n  }\r\n  .why-read-grid {\r\n    gap: 3rem;\r\n  }\r\n  .scroll-letter-box {\r\n    padding: 3rem 2rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 600px) {\r\n  section {\r\n    padding: 4rem 1rem;\r\n  }\r\n  .section-title {\r\n    font-size: 1.9rem;\r\n  }\r\n  .section-subtitle {\r\n    font-size: 0.85rem;\r\n    letter-spacing: 0.2em;\r\n  }\r\n\r\n  \/* Showcase section *\/\r\n  .showcase-section {\r\n    padding-top: 7rem;\r\n  }\r\n  .showcase-desc {\r\n    font-size: 0.95rem;\r\n    line-height: 1.7;\r\n  }\r\n  .switcher-row {\r\n    gap: 1.5rem;\r\n    padding: 1.2rem 0;\r\n    justify-content: center;\r\n  }\r\n  .switcher-btn {\r\n    padding: 0.5rem 1rem;\r\n    font-size: 0.8rem;\r\n  }\r\n  .plaque-btn {\r\n    padding: 0.85rem 1.2rem;\r\n    font-size: 0.85rem;\r\n  }\r\n  .showcase-right {\r\n    min-height: 420px;\r\n  }\r\n  .book-3d-scene {\r\n    width: 190px;\r\n    height: 280px;\r\n    transform: translateY(0);\r\n  }\r\n  .book-3d {\r\n    width: 170px;\r\n    height: 250px;\r\n  }\r\n  .cover-title {\r\n    font-size: 1.2rem;\r\n  }\r\n  .cover-subtitle {\r\n    font-size: 0.7rem;\r\n  }\r\n  .cover-crest {\r\n    width: 60px;\r\n    height: 60px;\r\n    margin-top: 1rem;\r\n  }\r\n  .pedestal-wrapper {\r\n    bottom: 0;\r\n    max-width: 260px;\r\n    height: 140px;\r\n  }\r\n  .floor-runes {\r\n    width: 220px;\r\n    top: 30px;\r\n  }\r\n  .stone-pedestal {\r\n    width: 160px;\r\n    height: 45px;\r\n    top: 45px;\r\n  }\r\n  .stone-pedestal::before {\r\n    width: 185px;\r\n    top: -12px;\r\n  }\r\n\r\n  \/* Manuscript section *\/\r\n  .manuscript-desc-text {\r\n    font-size: 1rem;\r\n    margin: -1rem auto 2rem auto;\r\n  }\r\n  .manuscript-book {\r\n    height: 460px;\r\n    border-width: 6px;\r\n  }\r\n  .manuscript-page {\r\n    padding: 1.5rem 1rem;\r\n  }\r\n  .left-page {\r\n    padding-right: 1.2rem;\r\n  }\r\n  .right-page {\r\n    padding-left: 1.2rem;\r\n  }\r\n  .manuscript-header-script {\r\n    font-size: 0.65rem;\r\n    margin-bottom: 1rem;\r\n  }\r\n  .manuscript-text-body {\r\n    font-size: 0.85rem;\r\n    line-height: 1.5;\r\n  }\r\n  .dropcap-ornament {\r\n    font-size: 2.2rem;\r\n  }\r\n  .manuscript-illustration {\r\n    height: 90px;\r\n    margin-top: 1rem;\r\n  }\r\n  .flipping-face {\r\n    padding: 1.5rem 1rem;\r\n  }\r\n  .flipping-face-front {\r\n    padding-left: 1.2rem;\r\n  }\r\n  .flipping-face-back {\r\n    padding-right: 1.2rem;\r\n  }\r\n  .desk-controls {\r\n    padding: 0;\r\n  }\r\n  .desk-nav-btn {\r\n    padding: 0.6rem 1.1rem;\r\n    font-size: 0.75rem;\r\n    gap: 0.4rem;\r\n  }\r\n\r\n  \/* Why read section *\/\r\n  .scroll-letter-box {\r\n    padding: 2.2rem 1.4rem;\r\n    border-width: 5px;\r\n  }\r\n  .scroll-letter-title {\r\n    font-size: 1.4rem;\r\n    margin-bottom: 1.2rem;\r\n  }\r\n  .scroll-letter-body {\r\n    font-size: 1.05rem;\r\n    line-height: 1.65;\r\n    margin-bottom: 2rem;\r\n  }\r\n  .sig-text {\r\n    font-size: 1.7rem;\r\n  }\r\n  .wax-seal {\r\n    width: 58px;\r\n    height: 58px;\r\n  }\r\n  .wax-seal-inner {\r\n    width: 36px;\r\n    height: 36px;\r\n  }\r\n  .wax-seal-inner svg {\r\n    width: 18px;\r\n    height: 18px;\r\n  }\r\n  .why-point-item {\r\n    padding: 1rem;\r\n  }\r\n  .point-title {\r\n    font-size: 1.1rem;\r\n  }\r\n  .point-desc {\r\n    font-size: 0.88rem;\r\n  }\r\n\r\n  \/* Buy everywhere section *\/\r\n  .buy-panels-container {\r\n    gap: 2rem;\r\n  }\r\n  .purchase-panel {\r\n    height: 460px;\r\n  }\r\n  .panel-cover-door {\r\n    padding: 1.8rem;\r\n  }\r\n  .panel-crest {\r\n    width: 70px;\r\n    height: 70px;\r\n    margin-top: 0.5rem;\r\n  }\r\n  .panel-door-title {\r\n    font-size: 1.5rem;\r\n  }\r\n  .panel-door-hint {\r\n    font-size: 0.7rem;\r\n    letter-spacing: 0.15em;\r\n  }\r\n  .panel-inside-content {\r\n    padding: 2rem 1.4rem;\r\n    border-width: 5px;\r\n  }\r\n  .panel-inside-title {\r\n    font-size: 1.3rem;\r\n  }\r\n  .panel-specs-list {\r\n    margin: 1rem 0;\r\n    padding: 1rem 0;\r\n    gap: 0.6rem;\r\n  }\r\n  .panel-spec-item {\r\n    font-size: 0.8rem;\r\n  }\r\n  .panel-price-val {\r\n    font-size: 1.4rem;\r\n  }\r\n  .panel-inside-content .plaque-btn {\r\n    padding: 0.8rem;\r\n    font-size: 0.85rem;\r\n  }\r\n}\r\n\r\n@media (max-width: 400px) {\r\n  .section-title {\r\n    font-size: 1.6rem;\r\n  }\r\n  .book-3d-scene {\r\n    width: 160px;\r\n    height: 235px;\r\n  }\r\n  .book-3d {\r\n    width: 145px;\r\n    height: 210px;\r\n  }\r\n  .manuscript-book {\r\n    height: 420px;\r\n  }\r\n  .manuscript-text-body {\r\n    font-size: 0.8rem;\r\n  }\r\n  .scroll-letter-box {\r\n    padding: 1.8rem 1rem;\r\n  }\r\n  .plaque-buttons-group {\r\n    gap: 0.8rem;\r\n  }\r\n  .purchase-panel {\r\n    height: 420px;\r\n  }\r\n  .panel-door-title {\r\n    font-size: 1.3rem;\r\n  }\r\n}\r\n\r\n\/* Landscape \/ short-height mobile devices *\/\r\n@media (max-height: 480px) and (orientation: landscape) {\r\n  .showcase-section {\r\n    min-height: auto;\r\n    padding: 3rem 1rem;\r\n  }\r\n  .showcase-right {\r\n    min-height: 320px;\r\n  }\r\n  .book-3d-scene {\r\n    width: 170px;\r\n    height: 250px;\r\n  }\r\n  .manuscript-section {\r\n    min-height: auto;\r\n    padding: 3rem 0;\r\n  }\r\n  .manuscript-book {\r\n    height: 380px;\r\n  }\r\n}\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- CUSTOM BRONZE CURSOR -->\r\n  <div id=\"custom-cursor\">\r\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <path d=\"M12 2C11.3 2 10.7 2.6 10.7 3.3V10.7H3.3C2.6 10.7 2 11.3 2 12C2 12.7 2.6 13.3 3.3 13.3H10.7V20.7C10.7 21.4 11.3 22 12 22C12.7 22 13.3 21.4 13.3 20.7V13.3H20.7C21.4 13.3 22 12.7 22 12C22 11.3 21.4 10.7 20.7 10.7H13.3V3.3C13.3 2.6 12.7 2 12 2ZM12 4.7C12.4 4.7 12.7 5 12.7 5.3V10.7C12.7 11.4 13.3 12 14 12H19.3C19.7 12 20 12.3 20 12.7C20 13.1 19.7 13.3 19.3 13.3H14C13.3 13.3 12.7 13.9 12.7 14.7V19.3C12.7 19.7 12.4 20 12 20C11.6 20 11.3 19.7 11.3 19.3V14.7C11.3 13.9 10.7 13.3 10 13.3H4.7C4.3 13.3 4 13.1 4 12.7C4 12.3 4.3 12 4.7 12H10C10.7 12 11.3 11.4 11.3 10.7V5.3C11.3 5 11.6 4.7 12 4.7Z\"\/>\r\n      <circle cx=\"12\" cy=\"12\" r=\"3\" stroke-width=\"1.2\" stroke=\"var(--color-gold)\" fill=\"none\"\/>\r\n    <\/svg>\r\n  <\/div>\r\n\r\n  <!-- Loader removed: using external loader file -->\r\n\r\n  <!-- premium header removed and moved to header.html -->\r\n\r\n  <!-- SECTION 07: BOOK SHOWCASE -->\r\n  <section class=\"showcase-section\" id=\"showcase\">\r\n    <div class=\"showcase-container\">\r\n      \r\n      <!-- Left side: Description & Plaque Buttons -->\r\n      <div class=\"showcase-left\">\r\n        <div class=\"section-header\" style=\"text-align: left; margin: 0 0 2rem 0;\">\r\n          <span class=\"section-subtitle\">Tactile Masterpiece<\/span>\r\n          <h2 class=\"section-title\" id=\"showcase-title\">The Print Edition<\/h2>\r\n        <\/div>\r\n        \r\n        <p class=\"showcase-desc\" id=\"showcase-desc\">\r\n          An editorial marvel designed for collectors, historians, and seekers of ancient truth. \r\n          This physical codex binds the mysterious Book of Enoch in a dual-language presentation, complete \r\n          with exhaustive theological commentary, historical timelines, and sacred astronomical drawings. \r\n          Printed on luxury cream parchment-finish paper with gold gilded edges and leather embossing.\r\n        <\/p>\r\n\r\n        <!-- Interactive Switchers -->\r\n        <div class=\"switcher-row\">\r\n          <!-- Language Selector -->\r\n          <div class=\"switcher-group\">\r\n            <span class=\"switcher-label\">Select Translation<\/span>\r\n            <div class=\"switcher-options\">\r\n              <button class=\"switcher-btn active\" id=\"lang-en\">English<\/button>\r\n              <button class=\"switcher-btn\" id=\"lang-es\">Spanish<\/button>\r\n            <\/div>\r\n          <\/div>\r\n          \r\n          <!-- Publisher\/Edition Selector -->\r\n          <div class=\"switcher-group\">\r\n            <span class=\"switcher-label\">Select Edition<\/span>\r\n            <div class=\"switcher-options\">\r\n              <button class=\"switcher-btn active\" id=\"edition-reg\">Regular<\/button>\r\n              <button class=\"switcher-btn\" id=\"edition-col\">Collector<\/button>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Engraved Gold Plaque Purchase Buttons -->\r\n        <div class=\"plaque-buttons-group\">\r\n          <a href=\"https:\/\/a.co\/d\/0ghVPlrm\" target=\"_blank\" class=\"plaque-btn\">\r\n            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n              <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5h-2v-2h2v2zm0-4h-2v-4h2v4z\"\/>\r\n            <\/svg>\r\n            <span id=\"btn-amazon-txt\">Buy on Amazon<\/span>\r\n          <\/a>\r\n          <a href=\"https:\/\/www.barnesandnoble.com\/w\/enoc-enoch-jjj\/1150804354?ean=9798256163051\" target=\"_blank\" class=\"plaque-btn\">\r\n            <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n              <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5h-2v-2h2v2zm0-4h-2v-4h2v4z\"\/>\r\n            <\/svg>\r\n            <span id=\"btn-bn-txt\">Buy on Barnes & Noble<\/span>\r\n          <\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Right side: Placeholder image (replaces 3D mockup) -->\r\n      <div class=\"showcase-right\">\r\n        <div class=\"book-placeholder-image\" aria-hidden=\"false\" style=\"width:100%;max-width:420px;margin:0 auto;\">\r\n          <!-- Replace the src below with your uploaded image file -->\r\n          <img decoding=\"async\" src=\"https:\/\/demowebdesign.live\/juan\/wp-content\/uploads\/2026\/07\/Front-Juan.png\" alt=\"Book cover placeholder \u2014 replace with your image\" style=\"width:100%;height:auto;border-radius:16px;border:1px solid rgba(0,0,0,0.08);box-shadow:0 18px 40px rgba(10,10,10,0.12);background:linear-gradient(180deg,#EEE7D6,#DDD3B8);display:block;\" \/>\r\n          <div style=\"text-align:center;margin-top:0.85rem;color:var(--color-body);font-family:var(--font-secondary);font-size:0.92rem;letter-spacing:0.12em;\">Floating Premium Edition (placeholder)<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 08: MANUSCRIPT PREVIEW -->\r\n  <section class=\"manuscript-section\" id=\"manuscript\">\r\n    <div class=\"section-header\">\r\n      <span class=\"section-subtitle\">Tactile Codex Experience<\/span>\r\n      <h2 class=\"section-title\">Manuscript Preview<\/h2>\r\n    <\/div>\r\n\r\n    <p class=\"manuscript-desc-text\" id=\"manuscript-lead\">\r\n      Interact directly with the codex. Flip through high-fidelity manuscript pages containing \r\n      bilingual scriptural transcriptions, diagrams of cosmic portals, and prophetic translations.\r\n    <\/p>\r\n\r\n    <!-- Reading Desk with Open Book Mockup -->\r\n    <div class=\"desk-container\">\r\n      <div class=\"manuscript-book\">\r\n        <div class=\"desk-bracket tl\"><\/div>\r\n        <div class=\"desk-bracket tr\"><\/div>\r\n        <div class=\"desk-bracket bl\"><\/div>\r\n        <div class=\"desk-bracket br\"><\/div>\r\n        \r\n        <!-- Central fold shadow overlay -->\r\n        <div class=\"manuscript-spine-shadow\"><\/div>\r\n\r\n        <!-- STATIC LEFT PAGE -->\r\n        <div class=\"manuscript-page left-page\" id=\"page-left-static\">\r\n          <div class=\"manuscript-header-script\">\r\n            <span id=\"man-left-head-num\">Page I<\/span>\r\n            <span id=\"man-left-head-title\">Ge'ez Script<\/span>\r\n          <\/div>\r\n          <div class=\"manuscript-text-body\" id=\"page-left-content\">\r\n            <span class=\"dropcap-ornament\">\u1260<\/span>\u1235\u1218\u1361 \u12a5\u130d\u12da\u12a0\u1265\u1214\u122d\u1361 \u1218\u1210\u122a\u1361 \u12d8\u12ed\u1220\u122d\u133d\u1361 \u12a5\u121d\u1245\u12f5\u1218\u1361 \u12d3\u1208\u121d\u1362 \u1243\u1208\u1361 \u1260\u1228\u12a8\u1275\u1361 \u12d8\u1204\u1296\u12ad\u1361 \u12d8\u12a8\u1218\u1361 \u1263\u1228\u12a8\u1361 \u1285\u1229\u12eb\u1290\u1361 \u12c8\u133b\u12f5\u1243\u1290\u1361 \u12a5\u1208\u1361 \u1200\u1208\u12c9\u1361 \u12ed\u12a9\u1291\u1361 \u1260\u12d5\u1208\u1270\u1361 \u121d\u1295\u12f3\u1264\u1361 \u1208\u12a0\u1230\u1235\u120e\u1270\u1361 \u12b5\u1209\u1361 \u12a5\u12a9\u12eb\u1295\u1361 \u12c8\u1228\u1232\u12d3\u1295\u1362 \u12c8\u12ed\u1264\u1361 \u1204\u1296\u12ad\u1361 \u1265\u12a5\u1232\u1361 \u133b\u12f5\u1245\u1361 \u12d8\u12a5\u121d\u1290\u1361 \u12a5\u130d\u12da\u12a0\u1265\u1214\u122d\u1361 \u12d0\u12ed\u1295\u1361 \u122d\u12a5\u12e8\u1361 \u1218\u12ad\u1348\u1275\u1361 \u12d8\u1260\u1230\u121b\u12eb\u1275\u1362\r\n          <\/div>\r\n          <div class=\"manuscript-illustration\" id=\"man-left-ill\">\r\n            <svg viewBox=\"0 0 100 100\">\r\n              <circle cx=\"50\" cy=\"50\" r=\"40\" \/>\r\n              <line x1=\"10\" y1=\"50\" x2=\"90\" y2=\"50\" \/>\r\n              <line x1=\"50\" y1=\"10\" x2=\"50\" y2=\"90\" \/>\r\n              <polygon points=\"50,10 90,50 50,90 10,50\" \/>\r\n              <circle cx=\"50\" cy=\"50\" r=\"20\" stroke-dasharray=\"2 2\" \/>\r\n            <\/svg>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- STATIC RIGHT PAGE -->\r\n        <div class=\"manuscript-page right-page\" id=\"page-right-static\">\r\n          <div class=\"manuscript-header-script\">\r\n            <span id=\"man-right-head-title\">English Translation<\/span>\r\n            <span id=\"man-right-head-num\">Page II<\/span>\r\n          <\/div>\r\n          <div class=\"manuscript-text-body\" id=\"page-right-content\">\r\n            <span class=\"dropcap-ornament\">T<\/span>he word of the blessing of Enoch, how he blessed the elect and the righteous, who were to exist in the time of trouble, when all the wicked and godless are to be removed. And Enoch, a righteous man whose eyes were opened by God, spoke and said: I saw the vision of the Holy One in the heavens, which the angels showed me.\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- FLIPPING PAGE LAYER (Hidden initially, animated in Y rotation) -->\r\n        <div class=\"flipping-page-container\" id=\"flipping-page\">\r\n          <!-- Front side of the page (facing right, lifts from right side) -->\r\n          <div class=\"flipping-face flipping-face-front\" id=\"flip-front-content\">\r\n            <div class=\"manuscript-header-script\">\r\n              <span id=\"flip-front-head-title\">English Translation<\/span>\r\n              <span id=\"flip-front-head-num\">Page II<\/span>\r\n            <\/div>\r\n            <div class=\"manuscript-text-body\" id=\"flip-front-text\">\r\n              <!-- Content loaded dynamically -->\r\n            <\/div>\r\n          <\/div>\r\n          <!-- Back side of the page (facing left, lays down on left side) -->\r\n          <div class=\"flipping-face flipping-face-back\" id=\"flip-back-content\">\r\n            <div class=\"manuscript-header-script\">\r\n              <span id=\"flip-back-head-num\">Page III<\/span>\r\n              <span id=\"flip-back-head-title\">Ge'ez Diagram<\/span>\r\n            <\/div>\r\n            <div class=\"manuscript-text-body\" id=\"flip-back-text\">\r\n              <!-- Content loaded dynamically -->\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Desk Controls -->\r\n      <div class=\"desk-controls\">\r\n        <button class=\"desk-nav-btn\" id=\"prev-page-btn\" disabled>\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <polyline points=\"15 18 9 12 15 6\"><\/polyline>\r\n          <\/svg>\r\n          Previous page\r\n        <\/button>\r\n        <button class=\"desk-nav-btn\" id=\"next-page-btn\">\r\n          Next page\r\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\r\n            <polyline points=\"9 18 15 12 9 6\"><\/polyline>\r\n          <\/svg>\r\n        <\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 09: WHY READ ENOCH? -->\r\n  <section class=\"why-read-section\" id=\"why-read\">\r\n    <div class=\"section-header\">\r\n      <span class=\"section-subtitle\">A Singular Codex<\/span>\r\n      <h2 class=\"section-title\">Why Read ENOCH?<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"why-read-grid\">\r\n      <!-- Left side: Ancient wax-sealed parchment letter -->\r\n      <div class=\"scroll-letter-box\">\r\n        <h3 class=\"scroll-letter-title\" id=\"letter-title\">The Scribe's Mandate<\/h3>\r\n        <p class=\"scroll-letter-body\" id=\"letter-body\">\r\n          \"Observe how the trees cover themselves with green leaves and bear fruit... and see how all His works \r\n          continue from year to year. I have written these books, the scrolls of wisdom, to serve as a beacon \r\n          for generations yet unborn, who shall walk in times of darkness and seek the primordial light of the first dawn.\"\r\n        <\/p>\r\n        <div class=\"scroll-letter-footer\">\r\n          <div class=\"signature-group\">\r\n            <span class=\"sig-label\">CHRONICLED BY<\/span>\r\n            <span class=\"sig-text\">Enoch<\/span>\r\n          <\/div>\r\n          <!-- Red Wax Seal -->\r\n          <div class=\"wax-seal\" id=\"letter-seal\">\r\n            <div class=\"wax-seal-inner\">\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 2C11.3 2 10.7 2.6 10.7 3.3V10.7H3.3C2.6 10.7 2 11.3 2 12s.6 1.3 1.3 1.3h7.4v7.4c0 .7.6 1.3 1.3 1.3s1.3-.6 1.3-1.3v-7.4h7.4c.7 0 1.3-.6 1.3-1.3s-.6-1.3-1.3-1.3h-7.4V3.3C13.3 2.6 12.7 2 12 2z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Right side: List of key principles with wax seals -->\r\n      <div class=\"why-points-list\">\r\n        \r\n        <!-- Point 1 -->\r\n        <div class=\"why-point-item\">\r\n          <div class=\"wax-seal\">\r\n            <div class=\"wax-seal-inner\">\r\n              <!-- Scroll icon -->\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"point-content\">\r\n            <h4 class=\"point-title\" id=\"pt1-title\">Scripture-Based<\/h4>\r\n            <p class=\"point-desc\" id=\"pt1-desc\">\r\n              Grounded in rigorous archaeological scholarship, preserving structural nuances, original \r\n              divine titles, and prophetic formatting from the Dead Sea Scroll fragments.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Point 2 -->\r\n        <div class=\"why-point-item\">\r\n          <div class=\"wax-seal\">\r\n            <div class=\"wax-seal-inner\">\r\n              <!-- Dove icon -->\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M21 9c-1.1 0-2 .9-2 2v2.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V8c0-1.66-1.34-3-3-3s-3 1.34-3 3v7.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V10c0-1.66-1.34-3-3-3s-3 1.34-3 3v7.5c0 .28-.22.5-.5.5s-.5-.22-.5-.5V12c0-1.66-1.34-3-3-3s-3 1.34-3 3v2.5C2 17.54 4.46 20 7.5 20c3.04 0 5.5-2.46 5.5-5.5V11c0-.55.45-1 1-1s1 .45 1 1v3.5c0 3.04 2.46 5.5 5.5 5.5 3.04 0 5.5-2.46 5.5-5.5V11c0-1.1-.9-2-2-2z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"point-content\">\r\n            <h4 class=\"point-title\" id=\"pt2-title\">Historical Interpretation<\/h4>\r\n            <p class=\"point-desc\" id=\"pt2-desc\">\r\n              Unravels the traditions of the Watchers (fallen angels), the origins of the Nephilim giants, \r\n              and the antediluvian priesthood that existed before the global deluge.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Point 3 -->\r\n        <div class=\"why-point-item\">\r\n          <div class=\"wax-seal\">\r\n            <div class=\"wax-seal-inner\">\r\n              <!-- Fleur-de-lis \/ Star crest icon -->\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 2L9 9H2l5.5 5.5L5 22l7-4.5 7 4.5-2.5-7.5L22 9h-7l-3-7z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"point-content\">\r\n            <h4 class=\"point-title\" id=\"pt3-title\">Dual Language Edition<\/h4>\r\n            <p class=\"point-desc\" id=\"pt3-desc\">\r\n              Presents the text in both English and Spanish in a premium parallel column layout, \r\n              preserving translation fidelity across both global languages.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Point 4 -->\r\n        <div class=\"why-point-item\">\r\n          <div class=\"wax-seal\">\r\n            <div class=\"wax-seal-inner\">\r\n              <!-- Book icon -->\r\n              <svg viewBox=\"0 0 24 24\">\r\n                <path d=\"M12 11.55C9.64 9.35 6.48 8 3 8v11c3.48 0 6.64 1.35 9 3.55 2.36-2.2 5.52-3.55 9-3.55V8c-3.48 0-6.64 1.35-9 3.55zM12 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z\"\/>\r\n              <\/svg>\r\n            <\/div>\r\n          <\/div>\r\n          <div class=\"point-content\">\r\n            <h4 class=\"point-title\" id=\"pt4-title\">Extensive Biblical Narrative<\/h4>\r\n            <p class=\"point-desc\" id=\"pt4-desc\">\r\n              Expands on canonical scripture references, linking Jude's epistle, Genesis, and Revelation \r\n              to the complete Enochian cosmological and theological framework.\r\n            <\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- SECTION 10: BUY EVERYWHERE -->\r\n  <section class=\"buy-everywhere-section\" id=\"buy\">\r\n    <div class=\"section-header\">\r\n      <span class=\"section-subtitle\">Acquire the Codex<\/span>\r\n      <h2 class=\"section-title\">Buy Everywhere<\/h2>\r\n    <\/div>\r\n\r\n    <!-- Two Huge Premium 3D Book Panels -->\r\n    <div class=\"buy-panels-container\">\r\n      \r\n      <!-- Amazon Panel -->\r\n      <div class=\"purchase-panel amazon-panel\">\r\n        <div class=\"panel-inside-content\">\r\n          <div class=\"panel-inside-header\">\r\n            <span class=\"panel-edition-tag\">Regular \/ Kindle<\/span>\r\n            <h3 class=\"panel-inside-title\">Amazon Global<\/h3>\r\n          <\/div>\r\n          \r\n          <ul class=\"panel-specs-list\">\r\n            <li class=\"panel-spec-item\">\r\n              <span class=\"spec-label\">Format<\/span>\r\n              <span class=\"spec-value\" id=\"spec-am-format\">Paperback & Digital<\/span>\r\n            <\/li>\r\n            <li class=\"panel-spec-item\">\r\n              <span class=\"spec-label\">Shipping<\/span>\r\n              <span class=\"spec-value\" id=\"spec-am-shipping\">Prime Worldwide<\/span>\r\n            <\/li>\r\n            <li class=\"panel-spec-item\">\r\n              <span class=\"spec-label\">Language<\/span>\r\n              <span class=\"spec-value\" id=\"spec-am-lang\">English & Spanish<\/span>\r\n            <\/li>\r\n          <\/ul>\r\n\r\n          <div class=\"panel-price-row\">\r\n            <span class=\"panel-price-label\">Starting at<\/span>\r\n            <span class=\"panel-price-val\">$14.99<\/span>\r\n          <\/div>\r\n\r\n          <a href=\"https:\/\/a.co\/d\/0ghVPlrm\" target=\"_blank\" class=\"plaque-btn\">\r\n            <span>Order on Amazon<\/span>\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <!-- Cover Door (Swings Left) -->\r\n        <div class=\"panel-cover-door\">\r\n          <div class=\"cover-corner tl\"><\/div>\r\n          <div class=\"cover-corner tr\"><\/div>\r\n          <div class=\"cover-corner bl\"><\/div>\r\n          <div class=\"cover-corner br\"><\/div>\r\n          \r\n          <svg class=\"panel-crest\" viewBox=\"0 0 100 100\">\r\n            <polygon points=\"50,15 90,50 50,90 10,50\" stroke=\"#B08D57\" stroke-width=\"1.2\" fill=\"none\" \/>\r\n            <circle cx=\"50\" cy=\"50\" r=\"15\" stroke=\"#B08D57\" fill=\"none\" \/>\r\n          <\/svg>\r\n          \r\n          <h3 class=\"panel-door-title\">AMAZON<\/h3>\r\n          \r\n          <div class=\"panel-door-hint\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L9 9H2l5.5 5.5L5 22l7-4.5 7 4.5-2.5-7.5L22 9h-7l-3-7z\"\/><\/svg>\r\n            <span>Hover to Open<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- Barnes & Noble Panel -->\r\n      <div class=\"purchase-panel bn-panel\">\r\n        <div class=\"panel-inside-content\">\r\n          <div class=\"panel-inside-header\">\r\n            <span class=\"panel-edition-tag\">Hardcover \/ Nook<\/span>\r\n            <h3 class=\"panel-inside-title\">Barnes & Noble<\/h3>\r\n          <\/div>\r\n          \r\n          <ul class=\"panel-specs-list\">\r\n            <li class=\"panel-spec-item\">\r\n              <span class=\"spec-label\">Format<\/span>\r\n              <span class=\"spec-value\" id=\"spec-bn-format\">Gold Embossed Hardcover<\/span>\r\n            <\/li>\r\n            <li class=\"panel-spec-item\">\r\n              <span class=\"spec-label\">Shipping<\/span>\r\n              <span class=\"spec-value\" id=\"spec-bn-shipping\">Free National Shipping<\/span>\r\n            <\/li>\r\n            <li class=\"panel-spec-item\">\r\n              <span class=\"spec-label\">Language<\/span>\r\n              <span class=\"spec-value\" id=\"spec-bn-lang\">English & Spanish<\/span>\r\n            <\/li>\r\n          <\/ul>\r\n\r\n          <div class=\"panel-price-row\">\r\n            <span class=\"panel-price-label\">Starting at<\/span>\r\n            <span class=\"panel-price-val\">$24.99<\/span>\r\n          <\/div>\r\n\r\n          <a href=\"https:\/\/www.barnesandnoble.com\/w\/enoc-enoch-jjj\/1150804354?ean=9798256163051\" target=\"_blank\" class=\"plaque-btn\">\r\n            <span>Order on B&N<\/span>\r\n          <\/a>\r\n        <\/div>\r\n\r\n        <!-- Cover Door (Swings Right) -->\r\n        <div class=\"panel-cover-door\">\r\n          <div class=\"cover-corner tl\"><\/div>\r\n          <div class=\"cover-corner tr\"><\/div>\r\n          <div class=\"cover-corner bl\"><\/div>\r\n          <div class=\"cover-corner br\"><\/div>\r\n          \r\n          <svg class=\"panel-crest\" viewBox=\"0 0 100 100\">\r\n            <circle cx=\"50\" cy=\"50\" r=\"30\" stroke=\"#B08D57\" stroke-width=\"1.2\" fill=\"none\" \/>\r\n            <path d=\"M35 50h30M50 35v30\" stroke=\"#B08D57\" stroke-width=\"1.2\" \/>\r\n          <\/svg>\r\n          \r\n          <h3 class=\"panel-door-title\">BARNES & NOBLE<\/h3>\r\n          \r\n          <div class=\"panel-door-hint\">\r\n            <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L9 9H2l5.5 5.5L5 22l7-4.5 7 4.5-2.5-7.5L22 9h-7l-3-7z\"\/><\/svg>\r\n            <span>Hover to Open<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- Footer removed from book.html (managed separately) -->\r\n\r\n  <!-- JAVASCRIPT LOGIC -->\r\n  <script>\r\n   (function() { \/* Global Page State Variables *\/\r\n    let currentLanguage = 'en';\r\n    let currentEdition = 'regular';\r\n    let currentManuscriptPage = 0;\r\n\r\n    \/* Content Data in Bilingual Format *\/\r\n    const contentData = {\r\n      en: {\r\n        showcaseTitle: \"The Print Edition\",\r\n        showcaseDesc: \"An editorial marvel designed for collectors, historians, and seekers of ancient truth. This physical codex binds the mysterious Book of Enoch in a dual-language presentation, complete with exhaustive theological commentary, historical timelines, and sacred astronomical drawings. Printed on luxury cream parchment-finish paper with gold gilded edges and leather embossing.\",\r\n        btnAmazon: \"Buy on Amazon\",\r\n        btnBN: \"Buy on Barnes & Noble\",\r\n        bookCoverTitle: \"The Book of Enoch\",\r\n        bookCoverSub: \"Dual-Language Edition\",\r\n        manuscriptLead: \"Interact directly with the codex. Flip through high-fidelity manuscript pages containing bilingual scriptural transcriptions, diagrams of cosmic portals, and prophetic translations.\",\r\n        letterTitle: \"The Scribe's Mandate\",\r\n        letterBody: `\"Observe how the trees cover themselves with green leaves and bear fruit... and see how all His works continue from year to year. I have written these books, the scrolls of wisdom, to serve as a beacon for generations yet unborn, who shall walk in times of darkness and seek the primordial light of the first dawn.\"`,\r\n        pt1Title: \"Scripture-Based\",\r\n        pt1Desc: \"Grounded in rigorous archaeological scholarship, preserving structural nuances, original divine titles, and prophetic formatting from the Dead Sea Scroll fragments.\",\r\n        pt2Title: \"Historical Interpretation\",\r\n        pt2Desc: \"Unravels the traditions of the Watchers (fallen angels), the origins of the Nephilim giants, and the antediluvian priesthood that existed before the global deluge.\",\r\n        pt3Title: \"Dual Language Edition\",\r\n        pt3Desc: \"Presents the text in both English and Spanish in a premium parallel column layout, preserving translation fidelity across both global languages.\",\r\n        pt4Title: \"Extensive Biblical Narrative\",\r\n        pt4Desc: \"Expands on canonical scripture references, linking Jude's epistle, Genesis, and Revelation to the complete Enochian cosmological and theological framework.\",\r\n        specFormat: \"Paperback & Digital\",\r\n        specShipping: \"Prime Worldwide\",\r\n        specLang: \"English & Spanish\",\r\n        specBNFormat: \"Gold Embossed Hardcover\",\r\n        specBNShipping: \"Free National Shipping\",\r\n        specBNLang: \"English & Spanish\"\r\n      },\r\n      es: {\r\n        showcaseTitle: \"La Edici\u00f3n Impresa\",\r\n        showcaseDesc: \"Una maravilla editorial dise\u00f1ada para coleccionistas, historiadores y buscadores de la verdad antigua. Este c\u00f3dice f\u00edsico encuaderna el misterioso Libro de Enoc en una presentaci\u00f3n biling\u00fce, con comentarios teol\u00f3gicos exhaustivos, l\u00edneas de tiempo hist\u00f3ricas y dibujos astron\u00f3micos sagrados. Impreso en papel pergamino color crema de lujo con cantos dorados y relieve en cuero.\",\r\n        btnAmazon: \"Comprar en Amazon\",\r\n        btnBN: \"Comprar en Barnes & Noble\",\r\n        bookCoverTitle: \"El Libro de Enoc\",\r\n        bookCoverSub: \"Edici\u00f3n Biling\u00fce\",\r\n        manuscriptLead: \"Interact\u00fae directamente con el c\u00f3dice. Pase las p\u00e1ginas del manuscrito de alta fidelidad que contienen transcripciones b\u00edblicas biling\u00fces, diagramas de portales c\u00f3smicos y traducciones prof\u00e9ticas.\",\r\n        letterTitle: \"El Mandato del Escriba\",\r\n        letterBody: `\"Observad c\u00f3mo los \u00e1rboles se cubren de hojas verdes y dan fruto... y ved c\u00f3mo todas Sus obras contin\u00faan de a\u00f1o en a\u00f1o. He escrito estos libros, los rollos de la sabidur\u00eda, para que sirvan de faro a las generaciones venideras, que caminar\u00e1n en tiempos de oscuridad y buscar\u00e1n la luz primordial del primer amanecer.\"`,\r\n        pt1Title: \"Basado en Escrituras\",\r\n        pt1Desc: \"Basado en una rigurosa erudici\u00f3n arqueol\u00f3gica, preservando los matices estructurales, los t\u00edtulos divinos originales y el formato prof\u00e9tico de los fragmentos de los Rollos del Mar Muerto.\",\r\n        pt2Title: \"Interpretaci\u00f3n Hist\u00f3rica\",\r\n        pt2Desc: \"Desentra\u00f1a las tradiciones de los Vigilantes (\u00e1ngeles ca\u00eddos), los or\u00edgenes de los gigantes Nephilim y el sacerdocio antediluviano que existi\u00f3 antes del diluvio global.\",\r\n        pt3Title: \"Edici\u00f3n Biling\u00fce\",\r\n        pt3Desc: \"Presenta el texto tanto en ingl\u00e9s como en espa\u00f1ol en un dise\u00f1o de columnas paralelas premium, conservando la fidelidad de la traducci\u00f3n en ambos idiomas globales.\",\r\n        pt4Title: \"Narrativa B\u00edblica Extensa\",\r\n        pt4Desc: \"Ampl\u00eda las referencias de las escrituras can\u00f3nicas, vinculando la ep\u00edstola de Judas, el G\u00e9nesis y el Apocalipsis con el marco cosmol\u00f3gico y teol\u00f3gico enoquiano completo.\",\r\n        specFormat: \"Tapa blanda y Digital\",\r\n        specShipping: \"Prime a nivel mundial\",\r\n        specLang: \"Ingl\u00e9s y Espa\u00f1ol\",\r\n        specBNFormat: \"Tapa Dura con Relieve Dorado\",\r\n        specBNShipping: \"Env\u00edo Nacional Gratuito\",\r\n        specBNLang: \"Ingl\u00e9s y Espa\u00f1ol\"\r\n      }\r\n    };\r\n\r\n    \/* Manuscript Page Spreads Data *\/\r\n    const manuscriptSpreads = [\r\n      {\r\n        leftNum: \"Page I\",\r\n        leftTitle: \"Ge'ez Script\",\r\n        leftText: \"\u1260\u1235\u1218\u1361 \u12a5\u130d\u12da\u12a0\u1265\u1214\u122d\u1361 \u1218\u1210\u122a\u1361 \u12d8\u12ed\u1220\u122d\u133d\u1361 \u12a5\u121d\u1245\u12f5\u1218\u1361 \u12d3\u1208\u121d\u1362 \u1243\u1208\u1361 \u1260\u1228\u12a8\u1275\u1361 \u12d8\u1204\u1296\u12ad\u1361 \u12d8\u12a8\u1218\u1361 \u1263\u1228\u12a8\u1361 \u1285\u1229\u12eb\u1290\u1361 \u12c8\u133b\u12f5\u1243\u1290\u1361 \u12a5\u1208\u1361 \u1200\u1208\u12c9\u1361 \u12ed\u12a9\u1291\u1361 \u1260\u12d5\u1208\u1270\u1361 \u121d\u1295\u12f3\u1264\u1361 \u1208\u12a0\u1230\u1235\u120e\u1270\u1361 \u12b5\u1209\u1361 \u12a5\u12a9\u12eb\u1295\u1361 \u12c8\u1228\u1232\u12d3\u1295\u1362 \u12c8\u12ed\u1264\u1361 \u1204\u1296\u12ad\u1361 \u1265\u12a5\u1232\u1361 \u133b\u12f5\u1245\u1361 \u12d8\u12a5\u121d\u1290\u1361 \u12a5\u130d\u12da\u12a0\u1265\u1214\u122d\u1361 \u12d0\u12ed\u1295\u1361 \u122d\u12a5\u12e8\u1361 \u1218\u12ad\u1348\u1275\u1361 \u12d8\u1260\u1230\u121b\u12eb\u1275\u1362\",\r\n        leftHasIllustration: true,\r\n        leftIllType: \"astronomy\",\r\n        rightNum: \"Page II\",\r\n        rightTitleEN: \"English Translation\",\r\n        rightTitleES: \"Traducci\u00f3n al Espa\u00f1ol\",\r\n        rightTextEN: `<span class=\"dropcap-ornament\">T<\/span>he word of the blessing of Enoch, how he blessed the elect and the righteous, who were to exist in the time of trouble, when all the wicked and godless are to be removed. And Enoch, a righteous man whose eyes were opened by God, spoke and said: I saw the vision of the Holy One in the heavens, which the angels showed me.`,\r\n        rightTextES: `<span class=\"dropcap-ornament\">L<\/span>a palabra de bendici\u00f3n con que Enoc bendijo a los elegidos y justos que vivir\u00e1n en el d\u00eda de la tribulaci\u00f3n, cuando todos los imp\u00edos y malvados ser\u00e1n removidos. Y Enoc, var\u00f3n justo cuyos ojos fueron abiertos por Dios, habl\u00f3 y dijo: Vi la visi\u00f3n del Santo en los cielos, la cual me mostraron los \u00e1ngeles.`\r\n      },\r\n      {\r\n        leftNum: \"Page III\",\r\n        leftTitle: \"The Watchers' Oath\",\r\n        leftText: \"\u1260\u12a5\u1295\u1270\u1361 \u1218\u120b\u12a5\u12ad\u1275\u1361 \u12a5\u1208\u1361 \u12c8\u1228\u12f1\u1361 \u12c8\u1270\u122b\u12a8\u1261\u1361 \u121d\u1235\u1208\u1361 \u12a0\u12cb\u120d\u12f0\u1361 \u12a5\u1313\u1208\u1361 \u12a5\u1218\u1215\u12eb\u12cd\u1362 \u12c8\u12ed\u1264\u1209\u1361 \u1260\u1260\u12ed\u1293\u1272\u1206\u121d\u1361 \u1295\u12d1\u1361 \u1295\u1285\u1228\u12ed\u1361 \u1208\u1290\u1361 \u12a0\u1295\u1235\u1270\u1361 \u12a5\u121d\u12cd\u1209\u12f0\u1361 \u1230\u1265\u12a5\u1361 \u12c8\u1295\u12cd\u1208\u12f5\u1361 \u1208\u1290\u1361 \u12cd\u1209\u12f0\u1362 \u12c8\u12a0\u12cd\u1225\u12a0\u1361 \u1230\u121d\u12eb\u12db\u1361 \u12d8\u1290\u1260\u1228\u1361 \u1218\u120d\u12d5\u120d\u1272\u1206\u121d\u2026\",\r\n        leftHasIllustration: false,\r\n        rightNum: \"Page IV\",\r\n        rightTitleEN: \"English Translation\",\r\n        rightTitleES: \"Traducci\u00f3n al Espa\u00f1ol\",\r\n        rightTextEN: `<span class=\"dropcap-ornament\">A<\/span>nd it came to pass when the children of men had multiplied that in those days were born unto them beautiful and comely daughters. And the angels, the children of the heaven, saw and lusted after them, and said to one another: 'Come, let us choose us wives from among the children of men and beget us children.' And Semjaza, who was their leader, said unto them: 'I fear ye will not indeed agree to do this deed...'`,\r\n        rightTextES: `<span class=\"dropcap-ornament\">Y<\/span> sucedi\u00f3 que cuando se multiplicaron los hijos de los hombres, en aquellos d\u00edas les nacieron hijas hermosas y bellas. Y los \u00e1ngeles, los hijos del cielo, las vieron y las codiciaron, y se dijeron unos a otros: 'Venid, elijamos esposas de entre los hijos de los hombres y engendremos hijos'. Y Semjaza, que era su l\u00edder, les dijo: 'Temo que no quer\u00e1is cumplir este hecho...'`\r\n      },\r\n      {\r\n        leftNum: \"Page V\",\r\n        leftTitle: \"Ancient Sigils\",\r\n        leftText: \"\u1260\u12a5\u1295\u1270\u1361 \u12a5\u1233\u1270\u1361 \u12d8\u12ed\u1290\u12f5\u12f5\u1361 \u12c8\u12e8\u12d3\u12cd\u12f3\u1361 \u1208\u1264\u1275\u1361 \u12d3\u1262\u12ed\u1362 \u12c8\u1216\u122d\u12a9\u1361 \u12c8\u1260\u133b\u1215\u12a9\u1361 \u12a5\u1235\u12a8\u1361 \u12a5\u1240\u12cd\u121d\u1361 \u1245\u12f5\u1218\u1361 \u12a5\u1233\u1271\u1361 \u12c8\u12d3\u1228\u134d\u1271\u1361 \u12a5\u1208\u1361 \u12a5\u121d\u12ad\u122a\u1235\u1273\u120d\u1361 \u130d\u1265\u122b\u1272\u1206\u121d\u1362 \u12c8\u12a0\u120d\u1266\u1361 \u12d8\u12ed\u12ad\u120d\u1361 \u1218\u12ca\u12a0\u1361 \u12a5\u1233\u1271\u1362\",\r\n        leftHasIllustration: true,\r\n        leftIllType: \"sigils\",\r\n        rightNum: \"Page VI\",\r\n        rightTitleEN: \"English Translation\",\r\n        rightTitleES: \"Traducci\u00f3n al Espa\u00f1ol\",\r\n        rightTextEN: `<span class=\"dropcap-ornament\">A<\/span>nd I went in until I drew nigh to a wall which is built of crystals and surrounded by tongues of fire: and it began to affright me. I went into the tongues of fire and drew nigh to a large house which was built of crystals: and the walls of the house were like a tessellated floor of crystals, and its groundwork was of crystal. Its ceiling was like the path of the stars and the lightnings...`,\r\n        rightTextES: `<span class=\"dropcap-ornament\">Y<\/span> entr\u00e9 hasta acercarme a un muro construido de cristales y rodeado de lenguas de fuego; y comenz\u00f3 a asustarme. Entr\u00e9 en las lenguas de fuego y me acerqu\u00e9 a una gran casa construida de cristales; y los muros de la casa eran como un piso teselado de cristales, y sus cimientos eran de cristal. Su techo era como el curso de las estrellas y los rel\u00e1mpagos...`\r\n      }\r\n    ];\r\n\r\n    \/* Dynamic UI Translation Logic *\/\r\n    function safeSetText(id, value) {\r\n      const element = document.getElementById(id);\r\n      if (element) element.textContent = value;\r\n    }\r\n\r\n    function safeSetHTML(id, value) {\r\n      const element = document.getElementById(id);\r\n      if (element) element.innerHTML = value;\r\n    }\r\n\r\n    function setLanguage(lang) {\r\n      currentLanguage = lang;\r\n      \r\n      \/\/ Update switcher buttons state\r\n      const langEnBtn = document.getElementById('lang-en');\r\n      const langEsBtn = document.getElementById('lang-es');\r\n      if (langEnBtn) langEnBtn.classList.toggle('active', lang === 'en');\r\n      if (langEsBtn) langEsBtn.classList.toggle('active', lang === 'es');\r\n\r\n      \/\/ Update text values\r\n      const data = contentData[lang];\r\n      safeSetText('showcase-title', data.showcaseTitle);\r\n      safeSetText('showcase-desc', data.showcaseDesc);\r\n      safeSetText('btn-amazon-txt', data.btnAmazon);\r\n      safeSetText('btn-bn-txt', data.btnBN);\r\n      safeSetText('book-cover-title', data.bookCoverTitle);\r\n      safeSetText('book-cover-subtitle', data.bookCoverSub);\r\n      safeSetText('book-spine-title', data.bookCoverTitle);\r\n      safeSetText('manuscript-lead', data.manuscriptLead);\r\n      safeSetText('letter-title', data.letterTitle);\r\n      safeSetText('letter-body', data.letterBody);\r\n      safeSetText('pt1-title', data.pt1Title);\r\n      safeSetText('pt1-desc', data.pt1Desc);\r\n      safeSetText('pt2-title', data.pt2Title);\r\n      safeSetText('pt2-desc', data.pt2Desc);\r\n      safeSetText('pt3-title', data.pt3Title);\r\n      safeSetText('pt3-desc', data.pt3Desc);\r\n      safeSetText('pt4-title', data.pt4Title);\r\n      safeSetText('pt4-desc', data.pt4Desc);\r\n\r\n      \/\/ Update specs labels in Buy Section\r\n      safeSetText('spec-am-format', data.specFormat);\r\n      safeSetText('spec-am-shipping', data.specShipping);\r\n      safeSetText('spec-am-lang', data.specLang);\r\n      safeSetText('spec-bn-format', data.specBNFormat);\r\n      safeSetText('spec-bn-shipping', data.specBNShipping);\r\n      safeSetText('spec-bn-lang', data.specBNLang);\r\n\r\n      \/\/ Force update of the current manuscript display\r\n      renderManuscriptPages();\r\n    }\r\n\r\n    function setEdition(edition) {\r\n      currentEdition = edition;\r\n      const editionRegBtn = document.getElementById('edition-reg');\r\n      const editionColBtn = document.getElementById('edition-col');\r\n      if (editionRegBtn) editionRegBtn.classList.toggle('active', edition === 'regular');\r\n      if (editionColBtn) editionColBtn.classList.toggle('active', edition === 'collector');\r\n\r\n      if (typeof gsap === 'undefined') return;\r\n      const coverFrontExists = document.querySelector('.book-cover-front');\r\n      if (!coverFrontExists) return;\r\n\r\n      if (edition === 'collector') {\r\n        \/\/ Change front cover to gold\/dark theme\r\n        gsap.to('.book-cover-front', {\r\n          background: 'radial-gradient(circle at center, #3D2D1B 0%, #16100A 100%)',\r\n          borderColor: '#DFC070',\r\n          duration: 0.5\r\n        });\r\n        gsap.to('.cover-crest', { stroke: '#DFC070', duration: 0.5 });\r\n        gsap.to('.cover-title', { background: 'linear-gradient(135deg, #FFF5C0 0%, #DFC070 100%)', webkitTextFillColor: 'transparent', duration: 0.5 });\r\n      } else {\r\n        \/\/ Revert to original slate theme\r\n        gsap.to('.book-cover-front', {\r\n          background: 'radial-gradient(circle at center, rgba(37,54,74,0.7) 0%, rgba(10,15,20,0.95) 100%)',\r\n          borderColor: '#000',\r\n          duration: 0.5\r\n        });\r\n        gsap.to('.cover-crest', { stroke: '#B08D57', duration: 0.5 });\r\n        gsap.to('.cover-title', { background: 'linear-gradient(135deg, #FFE082 0%, #B08D57 100%)', webkitTextFillColor: 'transparent', duration: 0.5 });\r\n      }\r\n    }\r\n\r\n    \/* Manuscript Interactive Book Flipping Code *\/\r\n    function renderManuscriptPages() {\r\n      const spread = manuscriptSpreads[currentManuscriptPage];\r\n      \r\n      \/\/ Update Left Static Page\r\n      safeSetText('man-left-head-num', spread.leftNum);\r\n      safeSetText('man-left-head-title', spread.leftTitle);\r\n      safeSetHTML('page-left-content', spread.leftText);\r\n      \r\n      const leftIll = document.getElementById('man-left-ill');\r\n      if (leftIll) {\r\n        if (spread.leftHasIllustration) {\r\n          leftIll.style.display = 'flex';\r\n          if (spread.leftIllType === 'astronomy') {\r\n            leftIll.innerHTML = `\r\n              <svg viewBox=\"0 0 100 100\">\r\n                <circle cx=\"50\" cy=\"50\" r=\"40\" \/>\r\n                <line x1=\"10\" y1=\"50\" x2=\"90\" y2=\"50\" \/>\r\n                <line x1=\"50\" y1=\"10\" x2=\"50\" y2=\"90\" \/>\r\n                <polygon points=\"50,10 90,50 50,90 10,50\" \/>\r\n                <circle cx=\"50\" cy=\"50\" r=\"20\" stroke-dasharray=\"2 2\" \/>\r\n              <\/svg>`;\r\n          } else {\r\n            leftIll.innerHTML = `\r\n              <svg viewBox=\"0 0 100 100\">\r\n                <polygon points=\"50,5 95,30 95,75 50,95 5,75 5,30\" \/>\r\n                <circle cx=\"50\" cy=\"50\" r=\"30\" \/>\r\n                <polygon points=\"50,20 76,65 24,65\" \/>\r\n              <\/svg>`;\r\n          }\r\n        } else {\r\n          leftIll.style.display = 'none';\r\n        }\r\n      }\r\n\r\n      \/\/ Update Right Static Page\r\n      safeSetText('man-right-head-num', spread.rightNum);\r\n      safeSetText('man-right-head-title', currentLanguage === 'en' ? spread.rightTitleEN : spread.rightTitleES);\r\n      safeSetHTML('page-right-content', currentLanguage === 'en' ? spread.rightTextEN : spread.rightTextES);\r\n      \r\n      \/\/ Toggle button states\r\n      const prevBtn = document.getElementById('prev-page-btn');\r\n      const nextBtn = document.getElementById('next-page-btn');\r\n      if (prevBtn) prevBtn.disabled = (currentManuscriptPage === 0);\r\n      if (nextBtn) nextBtn.disabled = (currentManuscriptPage === manuscriptSpreads.length - 1);\r\n    }\r\n\r\n    function nextPage() {\r\n      if (currentManuscriptPage >= manuscriptSpreads.length - 1) return;\r\n      \r\n      const flipPageContainer = document.getElementById('flipping-page');\r\n      const currentSpread = manuscriptSpreads[currentManuscriptPage];\r\n      const nextSpread = manuscriptSpreads[currentManuscriptPage + 1];\r\n\r\n      \/\/ Prepare flip contents\r\n      \/\/ Front of flipping page represents the current page being turned away\r\n      document.getElementById('flip-front-head-num').textContent = currentSpread.rightNum;\r\n      document.getElementById('flip-front-head-title').textContent = currentLanguage === 'en' ? currentSpread.rightTitleEN : currentSpread.rightTitleES;\r\n      document.getElementById('flip-front-text').innerHTML = currentLanguage === 'en' ? currentSpread.rightTextEN : currentSpread.rightTextES;\r\n\r\n      \/\/ Back of flipping page represents the next left page laying down\r\n      document.getElementById('flip-back-head-num').textContent = nextSpread.leftNum;\r\n      document.getElementById('flip-back-head-title').textContent = nextSpread.leftTitle;\r\n      document.getElementById('flip-back-text').innerHTML = nextSpread.leftText;\r\n\r\n      \/\/ Temporarily update static right page to show the next page's contents immediately\r\n      document.getElementById('man-right-head-num').textContent = nextSpread.rightNum;\r\n      document.getElementById('man-right-head-title').textContent = currentLanguage === 'en' ? nextSpread.rightTitleEN : nextSpread.rightTitleES;\r\n      document.getElementById('page-right-content').innerHTML = currentLanguage === 'en' ? nextSpread.rightTextEN : nextSpread.rightTextES;\r\n\r\n      \/\/ Show flip container and execute 3D rotation (with GSAP fallback)\r\n      flipPageContainer.style.display = 'block';\r\n      if (typeof gsap !== 'undefined') {\r\n        gsap.set(flipPageContainer, { rotateY: 0 });\r\n        gsap.to(flipPageContainer, {\r\n          rotateY: -180,\r\n          duration: 1.2,\r\n          ease: 'power2.inOut',\r\n          onComplete: () => {\r\n            flipPageContainer.style.display = 'none';\r\n            currentManuscriptPage++;\r\n            renderManuscriptPages();\r\n          }\r\n        });\r\n      } else {\r\n        \/\/ Simple non-animated fallback\r\n        setTimeout(() => {\r\n          flipPageContainer.style.display = 'none';\r\n          currentManuscriptPage++;\r\n          renderManuscriptPages();\r\n        }, 250);\r\n      }\r\n    }\r\n\r\n    function prevPage() {\r\n      if (currentManuscriptPage <= 0) return;\r\n\r\n      const flipPageContainer = document.getElementById('flipping-page');\r\n      const currentSpread = manuscriptSpreads[currentManuscriptPage];\r\n      const prevSpread = manuscriptSpreads[currentManuscriptPage - 1];\r\n\r\n      \/\/ Prepare flip contents for reverse turn\r\n      \/\/ Back of flipping page represents the current left page lifting off\r\n      document.getElementById('flip-back-head-num').textContent = currentSpread.leftNum;\r\n      document.getElementById('flip-back-head-title').textContent = currentSpread.leftTitle;\r\n      document.getElementById('flip-back-text').innerHTML = currentSpread.leftText;\r\n\r\n      \/\/ Front of flipping page represents the previous right page laying down\r\n      document.getElementById('flip-front-head-num').textContent = prevSpread.rightNum;\r\n      document.getElementById('flip-front-head-title').textContent = currentLanguage === 'en' ? prevSpread.rightTitleEN : prevSpread.rightTitleES;\r\n      document.getElementById('flip-front-text').innerHTML = currentLanguage === 'en' ? prevSpread.rightTextEN : prevSpread.rightTextES;\r\n\r\n      \/\/ Update static left page to show the previous left page immediately\r\n      document.getElementById('man-left-head-num').textContent = prevSpread.leftNum;\r\n      document.getElementById('man-left-head-title').textContent = prevSpread.leftTitle;\r\n      document.getElementById('page-left-content').innerHTML = prevSpread.leftText;\r\n\r\n      flipPageContainer.style.display = 'block';\r\n      if (typeof gsap !== 'undefined') {\r\n        gsap.set(flipPageContainer, { rotateY: -180 });\r\n        gsap.to(flipPageContainer, {\r\n          rotateY: 0,\r\n          duration: 1.2,\r\n          ease: 'power2.inOut',\r\n          onComplete: () => {\r\n            flipPageContainer.style.display = 'none';\r\n            currentManuscriptPage--;\r\n            renderManuscriptPages();\r\n          }\r\n        });\r\n      } else {\r\n        \/\/ Simple non-animated fallback\r\n        setTimeout(() => {\r\n          flipPageContainer.style.display = 'none';\r\n          currentManuscriptPage--;\r\n          renderManuscriptPages();\r\n        }, 250);\r\n      }\r\n    }\r\n\r\n    \/* CUSTOM CURSOR & GOLDEN DUST PARTICLES *\/\r\n    const cursor = document.getElementById('custom-cursor');\r\n    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    const lowPowerDevice = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;\r\n    const customCursorEnabled = !prefersReducedMotion && !('ontouchstart' in window) && !lowPowerDevice;\r\n\r\n    let mouseX = 0, mouseY = 0;\r\n    let cursorX = 0, cursorY = 0;\r\n    let isHovering = false;\r\n    let cursorInitialized = false;\r\n    let activeParticleCount = 0;\r\n    const maxParticles = 20;\r\n\r\n    if (prefersReducedMotion) {\r\n      document.body.classList.add('reduced-motion-body');\r\n    }\r\n\r\n    document.addEventListener('mousemove', (e) => {\r\n      if (!customCursorEnabled) return;\r\n\r\n      mouseX = e.clientX;\r\n      mouseY = e.clientY;\r\n      \r\n      if (!cursorInitialized) {\r\n        cursorInitialized = true;\r\n        if (cursor) {\r\n          cursor.style.opacity = '1';\r\n          document.body.style.cursor = 'none';\r\n        }\r\n        if (typeof gsap !== 'undefined' && gsap.ticker) {\r\n          gsap.ticker.add(updateCursor);\r\n        }\r\n      }\r\n      \r\n      if (Math.random() < (isHovering ? 0.10 : 0.01)) {\r\n        createDustParticle(e.clientX, e.clientY);\r\n      }\r\n    });\r\n\r\n    document.addEventListener('touchstart', () => {\r\n      if (!cursorInitialized) {\r\n        if (cursor) cursor.style.display = 'none';\r\n        document.body.style.cursor = 'auto';\r\n      }\r\n    }, { once: true });\r\n\r\n    function updateCursor() {\r\n      const dt = 0.22;\r\n      cursorX += (mouseX - cursorX) * dt;\r\n      cursorY += (mouseY - cursorY) * dt;\r\n      if (cursor) {\r\n        cursor.style.transform = `translate3d(${cursorX - 14}px, ${cursorY - 14}px, 0)`;\r\n      }\r\n    }\r\n\r\n    function initCursorHoverEffects() {\r\n      const interactives = document.querySelectorAll('a, button, .switcher-btn, .wax-seal, .purchase-panel');\r\n      interactives.forEach(el => {\r\n        el.addEventListener('mouseenter', () => {\r\n          isHovering = true;\r\n          if (cursor) cursor.classList.add('cursor-hover');\r\n        });\r\n        el.addEventListener('mouseleave', () => {\r\n          isHovering = false;\r\n          if (cursor) cursor.classList.remove('cursor-hover');\r\n        });\r\n      });\r\n    }\r\n\r\n    function createDustParticle(x, y) {\r\n      if (typeof gsap === 'undefined' || activeParticleCount >= maxParticles) return;\r\n      const particle = document.createElement('div');\r\n      document.body.appendChild(particle);\r\n      activeParticleCount += 1;\r\n      \r\n      const size = Math.random() * 4 + 1.5;\r\n      const angle = Math.random() * Math.PI * 2;\r\n      const velocity = Math.random() * 45 + 15;\r\n      const destinationX = x + Math.cos(angle) * velocity;\r\n      const destinationY = y + Math.sin(angle) * velocity - 25;\r\n      \r\n      gsap.set(particle, {\r\n        x: x,\r\n        y: y,\r\n        width: size,\r\n        height: size,\r\n        backgroundColor: '#8B6B3E',\r\n        boxShadow: '0 0 6px #B08D57, 0 0 2px #F8F4EA',\r\n        borderRadius: '50%',\r\n        position: 'fixed',\r\n        pointerEvents: 'none',\r\n        zIndex: 99998,\r\n        opacity: Math.random() * 0.7 + 0.3\r\n      });\r\n      \r\n      gsap.to(particle, {\r\n        x: destinationX,\r\n        y: destinationY,\r\n        opacity: 0,\r\n        scale: 0.1,\r\n        duration: Math.random() * 1.2 + 0.6,\r\n        ease: 'power2.out',\r\n        onComplete: () => {\r\n          particle.remove();\r\n          activeParticleCount = Math.max(0, activeParticleCount - 1);\r\n        }\r\n      });\r\n    }\r\n\r\n    \/* Pedestal Spark Emitter (Canvas-free micro-elements) *\/\r\n    function spawnPedestalSparks() {\r\n      const pedestal = document.querySelector('.stone-pedestal');\r\n      if (!pedestal || prefersReducedMotion || typeof gsap === 'undefined') return;\r\n      \r\n      setInterval(() => {\r\n        if (document.hidden) return;\r\n        const spark = document.createElement('div');\r\n        pedestal.appendChild(spark);\r\n        \r\n        const startX = Math.random() * 260 + 10;\r\n        const size = Math.random() * 3 + 1;\r\n        \r\n        gsap.set(spark, {\r\n          x: startX,\r\n          y: -10,\r\n          width: size,\r\n          height: size,\r\n          backgroundColor: '#FCF6BA',\r\n          boxShadow: '0 0 4px #B08D57',\r\n          borderRadius: '50%',\r\n          position: 'absolute',\r\n          pointerEvents: 'none',\r\n          opacity: 0.8\r\n        });\r\n        \r\n        gsap.to(spark, {\r\n          y: -120 - Math.random() * 80,\r\n          x: startX + (Math.random() * 40 - 20),\r\n          opacity: 0,\r\n          scale: 0.2,\r\n          duration: Math.random() * 2 + 1.5,\r\n          ease: 'power1.out',\r\n          onComplete: () => spark.remove()\r\n        });\r\n      }, 700);\r\n    }\r\n\r\n    \/* 3D Interactive Tilting of Book on Mouse Hover *\/\r\n    function initBook3DTilt() {\r\n      const scene = document.getElementById('book-scene');\r\n      const book = document.getElementById('interactive-book');\r\n      if (!scene || !book || prefersReducedMotion || typeof gsap === 'undefined') return;\r\n\r\n      scene.addEventListener('mousemove', (e) => {\r\n        const rect = scene.getBoundingClientRect();\r\n        const x = e.clientX - rect.left - rect.width \/ 2;\r\n        const y = e.clientY - rect.top - rect.height \/ 2;\r\n        \r\n        const tiltX = (y \/ (rect.height \/ 2)) * -20; \/\/ max 20deg X\r\n        const tiltY = (x \/ (rect.width \/ 2)) * 25;   \/\/ max 25deg Y\r\n        \r\n        gsap.to(book, {\r\n          rotateX: tiltX + 15, \/\/ base X rotation offset\r\n          rotateY: tiltY - 25, \/\/ base Y rotation offset\r\n          duration: 0.4,\r\n          ease: 'power1.out'\r\n        });\r\n      });\r\n\r\n      scene.addEventListener('mouseleave', () => {\r\n        \/\/ Animate back to idle floating state\r\n        gsap.to(book, {\r\n          rotateX: 15,\r\n          rotateY: -25,\r\n          duration: 0.8,\r\n          ease: 'power2.out'\r\n        });\r\n      });\r\n    }\r\n\r\n    function bindButton(id, handler) {\r\n      const button = document.getElementById(id);\r\n      if (!button) return false;\r\n      if (!button.dataset.bound) {\r\n        button.addEventListener('click', handler);\r\n        button.dataset.bound = 'true';\r\n      }\r\n      return true;\r\n    }\r\n\r\n    function bindInteractiveControls(attempt = 1) {\r\n      const prevBtnBound = bindButton('prev-page-btn', prevPage);\r\n      const nextBtnBound = bindButton('next-page-btn', nextPage);\r\n      const langEnBound = bindButton('lang-en', () => setLanguage('en'));\r\n      const langEsBound = bindButton('lang-es', () => setLanguage('es'));\r\n      const editionRegBound = bindButton('edition-reg', () => setEdition('regular'));\r\n      const editionColBound = bindButton('edition-col', () => setEdition('collector'));\r\n      const sealBound = bindButton('letter-seal', triggerSealInteraction);\r\n\r\n      const requiredControlsReady = prevBtnBound && nextBtnBound && langEnBound && langEsBound && editionRegBound && editionColBound;\r\n      if (!requiredControlsReady && attempt < 6) {\r\n        setTimeout(() => bindInteractiveControls(attempt + 1), 250);\r\n      }\r\n\r\n      if (!prevBtnBound || !nextBtnBound) {\r\n        console.warn('Manuscript buttons not initialized on attempt', attempt, { prevBtnBound, nextBtnBound });\r\n      }\r\n    }\r\n\r\n    function initBookPage() {\r\n      try {\r\n        bindInteractiveControls();\r\n        document.addEventListener('keydown', (e) => {\r\n          if (e.key === 'ArrowRight') nextPage();\r\n          if (e.key === 'ArrowLeft') prevPage();\r\n        });\r\n      } catch (err) {\r\n        console.warn('Failed to bind manuscript controls:', err);\r\n      }\r\n\r\n      if (typeof gsap !== 'undefined') {\r\n        animatePageElementsIn();\r\n        spawnPedestalSparks();\r\n        initBook3DTilt();\r\n      } else {\r\n        console.warn('GSAP not available: visual effects disabled. Manuscript pages will still work.');\r\n      }\r\n\r\n      initCursorHoverEffects();\r\n      renderManuscriptPages();\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      window.addEventListener('DOMContentLoaded', initBookPage);\r\n    } else {\r\n      initBookPage();\r\n    }\r\n\r\n    \/* Reveal entrance animation *\/\r\n    function animatePageElementsIn() {\r\n      if (typeof gsap === 'undefined') return;\r\n      gsap.from('.showcase-left', {\r\n        x: -50,\r\n        opacity: 0,\r\n        duration: 1.2,\r\n        ease: 'power3.out'\r\n      });\r\n      gsap.from('.showcase-right', {\r\n        x: 50,\r\n        opacity: 0,\r\n        duration: 1.2,\r\n        ease: 'power3.out'\r\n      });\r\n    }\r\n\r\n    \/* Dummy interactive feedback for Scribe letter Seal *\/\r\n    function triggerSealInteraction() {\r\n      const seal = document.getElementById('letter-seal');\r\n      if (!seal || typeof gsap === 'undefined') return;\r\n      \r\n      gsap.to(seal, {\r\n        scale: 1.15,\r\n        rotate: '+=15',\r\n        yoyo: true,\r\n        repeat: 1,\r\n        duration: 0.25,\r\n        ease: 'power1.inOut'\r\n      });\r\n\r\n      \/\/ Simple premium ripple sparks from seal\r\n      for (let i = 0; i < 8; i++) {\r\n        setTimeout(() => {\r\n          const rect = seal.getBoundingClientRect();\r\n          createDustParticle(rect.left + rect.width \/ 2, rect.top + rect.height \/ 2);\r\n        }, i * 50);\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<div class=\"elementor-element elementor-element-85d782d e-con-full e-flex e-con e-parent\" data-id=\"85d782d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1f2cc8f elementor-widget elementor-widget-html\" data-id=\"1f2cc8f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t  <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=Cinzel+Decorative:wght@400;700;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500;600;700&family=Pinyon+Script&display=swap\" rel=\"stylesheet\">\r\n  <style>\r\n    :root {\r\n      --color-bg: #F8F4EA;\r\n      --color-alt-bg: #EFE6D2;\r\n      --color-card-bg: #D8C3A5;\r\n      --color-gold: #8B6B3E;\r\n      --color-heading: #25364A;\r\n      --color-body: #4B3B2A;\r\n      --color-hero-bg: #FDFBF7;\r\n      --color-border: #B08D57;\r\n      --color-dark-slate: #1C2630;\r\n      --font-heading: 'Cinzel Decorative', serif;\r\n      --font-secondary: 'Cormorant Garamond', serif;\r\n      --font-body: 'Inter', sans-serif;\r\n      --font-ink: 'Pinyon Script', cursive;\r\n    }\r\n\r\n    .premium-footer {\r\n      position: relative;\r\n      background-color: var(--color-alt-bg);\r\n      background-image:\r\n        radial-gradient(circle at 20% 0%, rgba(139,107,62,0.08) 0%, rgba(239,230,210,0) 45%),\r\n        radial-gradient(circle at 85% 100%, rgba(139,107,62,0.06) 0%, rgba(239,230,210,0) 50%);\r\n      color: var(--color-body);\r\n      padding: 5rem 2rem 0 2rem;\r\n      overflow: hidden;\r\n      border-top: 3px solid var(--color-gold);\r\n    }\r\n\r\n    \/* thin gold hairline glow along the very top edge *\/\r\n    .premium-footer::before {\r\n      content: '';\r\n      position: absolute;\r\n      top: -1px;\r\n      left: 0;\r\n      right: 0;\r\n      height: 1px;\r\n      background: linear-gradient(90deg, transparent 0%, rgba(176,141,87,0.9) 50%, transparent 100%);\r\n    }\r\n\r\n    .footer-container {\r\n      max-width: 1400px;\r\n      margin: 0 auto;\r\n      position: relative;\r\n      z-index: 2;\r\n    }\r\n\r\n    \/* TOP GRID: brand \/ nav \/ contact \/ newsletter *\/\r\n    .footer-top {\r\n      display: grid;\r\n      grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr;\r\n      gap: 3rem;\r\n      padding-bottom: 3.5rem;\r\n      border-bottom: 1px dashed rgba(176, 141, 87, 0.25);\r\n    }\r\n\r\n    .footer-brand-logo {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    text-decoration: none;\r\n}\r\n\r\n.footer-brand-logo img {\r\n    height: 80px !important; \/* Adjust as needed *\/\r\n    width: auto;\r\n    display: block;\r\n}\r\n\r\n    .footer-tagline {\r\n      font-family: var(--font-secondary);\r\n      font-style: italic;\r\n      font-size: 1.05rem;\r\n      line-height: 1.75;\r\n      color: var(--color-body);\r\n      max-width: 340px;\r\n      margin-bottom: 1.6rem;\r\n    }\r\n\r\n    .footer-socials {\r\n      display: flex;\r\n      gap: 0.9rem;\r\n    }\r\n\r\n    .footer-social-link {\r\n      width: 38px;\r\n      height: 38px;\r\n      border: 1px solid rgba(176, 141, 87, 0.5);\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      text-decoration: none;\r\n      background-color: var(--color-hero-bg);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .footer-social-link svg {\r\n      width: 16px;\r\n      height: 16px;\r\n      fill: var(--color-gold);\r\n      transition: fill 0.3s ease;\r\n    }\r\n\r\n    .footer-social-link:hover {\r\n      background-color: var(--color-gold);\r\n      border-color: var(--color-gold);\r\n      transform: translateY(-3px);\r\n    }\r\n\r\n    .footer-social-link:hover svg { fill: var(--color-hero-bg); }\r\n\r\n    .footer-col-title {\r\n      font-family: var(--font-heading);\r\n      font-size: 0.95rem;\r\n      letter-spacing: 0.18em;\r\n      text-transform: uppercase;\r\n      color: var(--color-gold);\r\n      margin-bottom: 1.5rem;\r\n      position: relative;\r\n      padding-bottom: 0.8rem;\r\n    }\r\n\r\n    .footer-col-title::after {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 0;\r\n      width: 34px;\r\n      height: 1.5px;\r\n      background-color: var(--color-gold);\r\n    }\r\n\r\n    .footer-nav-list {\r\n      list-style: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 0.9rem;\r\n      margin-left: -20px !important;\r\n    }\r\n\r\n    .footer-nav-list a {\r\n      font-family: var(--font-secondary);\r\n      font-size: 1.05rem;\r\n      font-weight: 600;\r\n      letter-spacing: 0.04em;\r\n      color: var(--color-body);\r\n      text-decoration: none !important;\r\n      position: relative;\r\n      transition: color 0.3s ease, padding-left 0.3s ease;\r\n      padding-left: 0 !important;\r\n    }\r\n\r\n    .footer-nav-list a::before {\r\n      content: '\u2014';\r\n      position: absolute;\r\n      left: -18px;\r\n      opacity: 0;\r\n      color: var(--color-gold);\r\n      transition: all 0.3s ease;\r\n    }\r\n\r\n    .footer-nav-list a:hover {\r\n      color: var(--color-gold);\r\n      padding-left: 18px;\r\n    }\r\n\r\n    .footer-nav-list a:hover::before {\r\n      opacity: 1;\r\n      left: 0;\r\n    }\r\n\r\n    .footer-contact-list {\r\n      list-style: none;\r\n      display: flex;\r\n      flex-direction: column;\r\n      gap: 1.1rem;\r\n      margin-left: -20px !important;\r\n    }\r\n\r\n    .footer-contact-item {\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 0.8rem;\r\n      font-family: var(--font-body);\r\n      font-size: 0.92rem;\r\n      font-weight: 300;\r\n      color: var(--color-body);\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .footer-contact-item a {\r\n      color: var(--color-body);\r\n      text-decoration: none !important;\r\n      transition: color 0.3s ease;\r\n      \r\n    }\r\n\r\n    .footer-contact-item a:hover { color: var(--color-gold); }\r\n\r\n    .footer-contact-item svg {\r\n      width: 16px;\r\n      height: 16px;\r\n      fill: none;\r\n      stroke: var(--color-gold);\r\n      stroke-width: 1.6;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n    }\r\n\r\n    \/* Newsletter *\/\r\n    .footer-newsletter-text {\r\n      font-family: var(--font-body);\r\n      font-size: 0.92rem;\r\n      font-weight: 300;\r\n      color: var(--color-body);\r\n      line-height: 1.7;\r\n      margin-bottom: 1.4rem;\r\n    }\r\n\r\n    .footer-newsletter-form {\r\n      display: flex;\r\n      border: 1px solid rgba(176, 141, 87, 0.5);\r\n      border-radius: 3px;\r\n      overflow: hidden;\r\n      background-color: var(--color-hero-bg);\r\n    }\r\n\r\n    .footer-newsletter-form input[type=\"email\"] {\r\n      flex: 1;\r\n      background: transparent;\r\n      border: none;\r\n      outline: none;\r\n      padding: 0.9rem 1rem;\r\n      font-family: var(--font-body);\r\n      font-size: 0.9rem;\r\n      color: var(--color-body);\r\n    }\r\n\r\n    .footer-newsletter-form input[type=\"email\"]::placeholder {\r\n      color: rgba(75, 59, 42, 0.45);\r\n    }\r\n\r\n    .footer-newsletter-form button {\r\n      background-color: var(--color-gold);\r\n      border: none;\r\n      padding: 0 1.4rem;\r\n      color: var(--color-hero-bg);\r\n      font-family: var(--font-secondary);\r\n      font-weight: 700;\r\n      font-size: 0.85rem;\r\n      letter-spacing: 0.1em;\r\n      text-transform: uppercase;\r\n      cursor: pointer;\r\n      transition: background-color 0.3s ease;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .footer-newsletter-form button:hover {\r\n      background-color: #DFC070;\r\n    }\r\n\r\n    \/* BOTTOM BAR *\/\r\n    .footer-bottom {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      flex-wrap: wrap;\r\n      gap: 1rem;\r\n      padding: 1.8rem 0 2rem 0;\r\n    }\r\n\r\n    .footer-copyright {\r\n      font-family: var(--font-body);\r\n      font-size: 0.82rem;\r\n      font-weight: 300;\r\n      letter-spacing: 0.03em;\r\n      color: rgba(75, 59, 42, 0.6);\r\n    }\r\n\r\n    .footer-legal-links {\r\n      display: flex;\r\n      gap: 1.8rem;\r\n    }\r\n\r\n    .footer-legal-links a {\r\n      font-family: var(--font-body);\r\n      font-size: 0.82rem;\r\n      font-weight: 300;\r\n      color: rgba(75, 59, 42, 0.6);\r\n      text-decoration: none;\r\n      transition: color 0.3s ease;\r\n    }\r\n\r\n    .footer-legal-links a:hover { color: var(--color-gold); }\r\n\r\n    \/* Small decorative wax-seal style crest divider between top and bottom on mobile *\/\r\n    .footer-crest-divider {\r\n      display: none;\r\n    }\r\n\r\n    \/* RESPONSIVE *\/\r\n    @media (max-width: 1100px) {\r\n      .footer-top {\r\n        grid-template-columns: 1fr 1fr;\r\n        gap: 3rem 2.5rem;\r\n      }\r\n    }\r\n\r\n    @media (max-width: 640px) {\r\n      .premium-footer {\r\n        padding: 3.5rem 1.25rem 0 1.25rem;\r\n      }\r\n      .footer-top {\r\n        grid-template-columns: 1fr;\r\n        gap: 2.5rem;\r\n      }\r\n      .footer-bottom {\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        text-align: left;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <footer class=\"premium-footer\">\r\n    <div class=\"footer-container\">\r\n\r\n      <div class=\"footer-top\">\r\n\r\n        <!-- Brand column -->\r\n        <div class=\"footer-brand-col\">\r\n          <a href=\"home.html\" class=\"footer-brand-logo\"> <svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M12 2C11.3 2 10.7 2.6 10.7 3.3V10.7H3.3C2.6 10.7 2 11.3 2 12C2 12.7 2.6 13.3 3.3 13.3H10.7V20.7C10.7 21.4 11.3 22 12 22C12.7 22 13.3 21.4 13.3 20.7V13.3H20.7C21.4 13.3 22 12.7 22 12C22 11.3 21.4 10.7 20.7 10.7H13.3V3.3C13.3 2.6 12.7 2 12 2Z\"\/><\/svg> ENOCH <\/a>\r\n          <p class=\"footer-tagline\">\r\n            A journey through the origins of creation, the heavenly realm, and the forgotten history that shaped humanity.\r\n          <\/p>\r\n          <div class=\"footer-socials\">\r\n            <a href=\"#\" class=\"footer-social-link\" aria-label=\"Facebook\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8v-6.93H7.9V12H10V9.7c0-2.07 1.23-3.21 3.11-3.21.9 0 1.84.16 1.84.16v2.02h-1.04c-1.02 0-1.34.64-1.34 1.3V12h2.28l-.36 2.87h-1.92V21.8c4.56-.93 8-4.96 8-9.8z\"\/><\/svg>\r\n            <\/a>\r\n            <a href=\"#\" class=\"footer-social-link\" aria-label=\"Instagram\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.2c3.2 0 3.58.01 4.85.07 1.17.05 1.97.24 2.43.4.6.24 1.03.51 1.48.96.45.45.72.88.96 1.48.16.46.35 1.26.4 2.43.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.24 1.97-.4 2.43-.24.6-.51 1.03-.96 1.48-.45.45-.88.72-1.48.96-.46.16-1.26.35-2.43.4-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.97-.24-2.43-.4-.6-.24-1.03-.51-1.48-.96-.45-.45-.72-.88-.96-1.48-.16-.46-.35-1.26-.4-2.43C2.21 15.58 2.2 15.2 2.2 12s.01-3.58.07-4.85c.05-1.17.24-1.97.4-2.43.24-.6.51-1.03.96-1.48.45-.45.88-.72 1.48-.96.46-.16 1.26-.35 2.43-.4C8.42 2.21 8.8 2.2 12 2.2zm0 3.2a6.6 6.6 0 1 0 0 13.2 6.6 6.6 0 0 0 0-13.2zm0 10.89a4.29 4.29 0 1 1 0-8.58 4.29 4.29 0 0 1 0 8.58zm6.86-11.15a1.54 1.54 0 1 1-3.08 0 1.54 1.54 0 0 1 3.08 0z\"\/><\/svg>\r\n            <\/a>\r\n            <!--<a href=\"#\" class=\"footer-social-link\" aria-label=\"X \/ Twitter\">-->\r\n            <!--  <svg viewBox=\"0 0 24 24\"><path d=\"M18.9 2H22l-7.6 8.7L23.3 22h-6.9l-5.4-6.6L4.8 22H1.7l8.1-9.3L1 2h7l4.9 6.1L18.9 2zm-1.2 18h1.9L7.4 4H5.4l12.3 16z\"\/><\/svg>-->\r\n            <!--<\/a>-->\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Nav column -->\r\n        <div class=\"footer-nav-col\">\r\n          <h4 class=\"footer-col-title\">Navigate<\/h4>\r\n          <ul class=\"footer-nav-list\">\r\n            <li><a href=\"home.html\">Home<\/a><\/li>\r\n            <li><a href=\"about.html\">About<\/a><\/li>\r\n            <li><a href=\"books.html\">Books<\/a><\/li>\r\n            <li><a href=\"contact.html\">Contact<\/a><\/li>\r\n          <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Contact column -->\r\n        <div class=\"footer-contact-col\">\r\n          <h4 class=\"footer-col-title\">Contact<\/h4>\r\n          <ul class=\"footer-contact-list\">\r\n            <li class=\"footer-contact-item\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v16H4z\" fill=\"none\"\/><path d=\"M4 6l8 6 8-6M4 6v12h16V6\" fill=\"none\"\/><\/svg>\r\n              <a href=\"mailto:hello@enochbook.com\">hello@enochbook.com<\/a>\r\n            <\/li>\r\n            <li class=\"footer-contact-item\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.68 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.32 1.85.55 2.81.68A2 2 0 0 1 22 16.92z\" fill=\"none\"\/><\/svg>\r\n              <a href=\"tel:+10000000000\">+1 (000) 000-0000<\/a>\r\n            <\/li>\r\n            <li class=\"footer-contact-item\">\r\n              <svg viewBox=\"0 0 24 24\"><path d=\"M21 10c0 7-9 12-9 12s-9-5-9-12a9 9 0 0 1 18 0z\" fill=\"none\"\/><circle cx=\"12\" cy=\"10\" r=\"3\" fill=\"none\"\/><\/svg>\r\n              <span>Available worldwide via Amazon &amp; Barnes &amp; Noble<\/span>\r\n            <\/li>\r\n          <\/ul>\r\n        <\/div>\r\n\r\n        <!-- Newsletter column -->\r\n        <div class=\"footer-newsletter-col\">\r\n          <h4 class=\"footer-col-title\">Stay Informed<\/h4>\r\n          <p class=\"footer-newsletter-text\">\r\n            Subscribe for release updates, translated excerpts, and reflections on the ancient texts.\r\n          <\/p>\r\n          <form class=\"footer-newsletter-form\" onsubmit=\"return false;\">\r\n            <input type=\"email\" placeholder=\"Your email address\" required>\r\n            <button type=\"submit\">Subscribe<\/button>\r\n          <\/form>\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <!-- Bottom bar -->\r\n      <div class=\"footer-bottom\">\r\n        <p class=\"footer-copyright\">&copy; <span id=\"footer-year\">2026<\/span> ENOCH. All rights reserved.<\/p>\r\n        <!--<div class=\"footer-legal-links\">-->\r\n        <!--  <a href=\"#\">Privacy Policy<\/a>-->\r\n        <!--  <a href=\"#\">Terms of Service<\/a>-->\r\n        <!--<\/div>-->\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/footer>\r\n\r\n  <script>\r\n    (function() {\r\n      var yearEl = document.getElementById('footer-year');\r\n      if (yearEl) { yearEl.textContent = new Date().getFullYear(); }\r\n    })();\r\n  <\/script>\r\n\r\n<\/body>\r\n<\/html>\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>ENOCH Home About Books Contact Buy Now MERIDIES (SOUTH) SEPTENTRIO (NORTH) ORIENS (EAST) OCCIDENS (WEST) FRAGMENTA SECULI II A.C. \u2014 [&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-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":145,"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/pages\/12\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/demowebdesign.live\/juan\/index.php\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}