/* ==========================================================================
   Judith Hobson theme — main.css
   Ported from Next.js globals.css + component Tailwind classes.
   Sections: 1) Variables & base  2) Typography helpers  3) Keyframes
             4) Header  5) Footer  6) Utilities  7) Blog content
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Variables & base (ported from :root and body in globals.css)
   -------------------------------------------------------------------------- */
:root {
  --background: #ffffff;
  --foreground: #171717;
  --header-height-desktop: 96px;
  --header-padding-x: 48px;
  --hero-bg-gradient-angle: 135deg;

  /* Font stacks (Google Fonts enqueued in functions.php) */
  --font-anton: 'Anton', sans-serif;
  --font-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-poppins: 'Poppins', sans-serif;
  --font-barlow: 'Barlow Condensed', sans-serif;

  /* Site palette (extracted from components) */
  --color-dark-gray: #575757;   /* footer bg, admin button */
  --color-darker: #404040;      /* admin button hover */
  --color-btn-dark: #333333;    /* footer ENTER button */
  --color-input-gray: #D9D9D9;  /* footer textarea bg */
  --color-placeholder: #777777;
  --color-page-light: #F5F5F5;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-inter);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* Original: h1,h2,h3 default to Georgia serif (book titles use this) */
h1, h2, h3 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   2) Typography helpers (ported)
   -------------------------------------------------------------------------- */
.font-anton {
  font-family: var(--font-anton);
  font-weight: 400; /* Anton has a single weight; original set 200 which browsers resolve to 400 */
  letter-spacing: 0.05em;
}
.font-poppins { font-family: var(--font-poppins); }
.font-inter   { font-family: var(--font-inter); }
.font-barlow  { font-family: var(--font-barlow); }

/* --------------------------------------------------------------------------
   3) Keyframes & animation classes (ported verbatim from globals.css)
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-100px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(100px); }
  to   { opacity: 1; transform: translateX(0); }
}
.animate-fade-in     { animation: fadeIn 0.8s ease-out; }
.animate-slide-up    { animation: slideUp 0.8s ease-out 0.2s both; }
.animate-slide-left  { animation: slideLeft 0.8s ease-out; }
.animate-slide-right { animation: slideRight 0.8s ease-out; }

@keyframes smoothFloat     { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }
@keyframes smoothFloatSlow { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);}  }
@keyframes smoothFloatFast { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-12px);} }
.animate-float      { animation: smoothFloat 3s ease-in-out infinite; }
.animate-float-slow { animation: smoothFloatSlow 4s ease-in-out infinite; }
.animate-float-fast { animation: smoothFloatFast 2s ease-in-out infinite; }

@keyframes bookHingeLeft {
  0%,100% { transform: rotateY(0deg) translateY(0);   transform-origin: left center; }
  50%     { transform: rotateY(15deg) translateY(-15px); transform-origin: left center; }
}
@keyframes bookHingeRight {
  0%,100% { transform: rotateY(0deg) translateY(0);   transform-origin: right center; }
  50%     { transform: rotateY(15deg) translateY(-15px); transform-origin: right center; }
}
.animate-book-hinge-left  { animation: bookHingeLeft 4s ease-in-out infinite; }
.animate-book-hinge-right { animation: bookHingeRight 4s ease-in-out infinite; }

/* Marquee (replaces react-fast-marquee) */
@keyframes jh-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.jh-marquee { overflow: hidden; white-space: nowrap; }
.jh-marquee__track {
  display: inline-flex;
  animation: jh-marquee var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}

/* Scroll-reveal (replaces framer-motion entrance animations).
   JS adds .is-visible when the element enters the viewport. */
.jh-reveal { opacity: 0; }
.jh-reveal.is-visible.reveal-up    { animation: slideUp 0.8s ease-out both; }
.jh-reveal.is-visible.reveal-fade  { animation: fadeIn 0.8s ease-out both; }
.jh-reveal.is-visible.reveal-left  { animation: slideLeft 0.8s ease-out both; }
.jh-reveal.is-visible.reveal-right { animation: slideRight 0.8s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .jh-reveal { opacity: 1; }
  .jh-reveal.is-visible, .jh-marquee__track,
  .animate-float, .animate-float-slow, .animate-float-fast,
  .animate-book-hinge-left, .animate-book-hinge-right { animation: none !important; }
}

/* --------------------------------------------------------------------------
   4) Header (ported from Header.tsx)
   Absolute, transparent, sits over the hero.
   -------------------------------------------------------------------------- */
.jh-header {
  position: absolute;
  top: -8px; /* -top-2 */
  left: 0; right: 0;
  z-index: 30;
  padding: 0 16px; /* px-4 */
}
@media (min-width: 640px)  { .jh-header { padding: 0 24px; } } /* sm:px-6 */
@media (min-width: 768px)  { .jh-header { padding: 0 32px; } } /* md:px-8 */

.jh-header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1280px; /* max-w-screen-xl */
  margin: 0 auto;
  font-family: var(--font-poppins);
}

.jh-header__logo { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.jh-header__logo img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 640px)  { .jh-header__logo { width: 80px;  height: 80px;  } }
@media (min-width: 768px)  { .jh-header__logo { width: 96px;  height: 96px;  } }
@media (min-width: 1024px) { .jh-header__logo { width: 128px; height: 128px; } }

.jh-header__menu {
  display: none;
  list-style: none;
  margin: 0; padding: 0;
  align-items: center;
  gap: 32px; /* space-x-8 */
}
@media (min-width: 768px)  { .jh-header__menu { display: flex; } }
@media (min-width: 1024px) { .jh-header__menu { gap: 40px; } } /* lg:space-x-10 */

.jh-header__menu a {
  font-size: 1rem;           /* text-base */
  font-weight: 600;          /* font-semibold */
  letter-spacing: 0.05em;    /* tracking-wider */
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  transition: all 0.2s ease-out;
}
.jh-header__menu a:hover { color: #4b5563; transform: translateY(-1px); }
.jh-header__menu .current-menu-item a { color: #000; }

.jh-header__actions { display: flex; align-items: center; gap: 4px; }

.jh-btn-admin {
  background: var(--color-dark-gray);
  color: #fff;
  font-family: var(--font-poppins);
  font-weight: 500;
  font-size: 0.875rem;
  padding: 8px 16px;
  border: none;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  text-decoration: none;
  transition: all 0.3s;
  display: inline-block;
}
.jh-btn-admin:hover { background: var(--color-darker); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

.jh-cart-toggle {
  position: relative;
  padding: 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  transition: background-color 0.2s;
  display: inline-flex;
}
.jh-cart-toggle:hover { background: rgba(243,244,246,0.7); }
.jh-cart-toggle svg { width: 24px; height: 24px; color: #000; }
.jh-cart-count {
  position: absolute; top: -4px; right: -4px;
  background: #ef4444; color: #fff;
  font-size: 0.75rem; font-weight: 600;
  height: 20px; width: 20px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
}

/* Mobile hamburger + drawer */
.jh-hamburger {
  display: inline-flex;
  padding: 8px;
  border: none; background: transparent; border-radius: 6px;
}
.jh-hamburger svg { width: 24px; height: 24px; color: #000; }
@media (min-width: 768px) { .jh-hamburger { display: none; } }

.jh-mobile-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.jh-mobile-drawer.is-open { opacity: 1; pointer-events: auto; }
.jh-mobile-drawer a {
  font-family: var(--font-poppins);
  font-size: 1.25rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: #000; text-decoration: none;
}
.jh-mobile-drawer__close {
  position: absolute; top: 20px; right: 20px;
  background: transparent; border: none; padding: 8px;
}
.jh-mobile-drawer__close svg { width: 28px; height: 28px; }

/* --------------------------------------------------------------------------
   5) Footer (ported from Contact.tsx)
   -------------------------------------------------------------------------- */
.jh-footer-wrap { background: #fff; padding-top: 48px; overflow-x: hidden; }

.jh-footer {
  background: var(--color-dark-gray);
  border-radius: 40px 40px 0 0;
  color: #e5e7eb;
  font-family: var(--font-poppins);
}

.jh-footer__inner {
  max-width: 1280px; /* max-w-7xl */
  margin: 0 auto;
  padding: 64px 32px; /* py-16 px-8 */
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 48px;
  column-gap: 32px;
}
@media (min-width: 640px) { .jh-footer__inner { padding-left: 48px; padding-right: 48px; } }
@media (min-width: 768px) { .jh-footer__inner { grid-template-columns: 1fr 1fr; } }

.jh-footer__brand > * + * { margin-top: 16px; }

.jh-footer__title {
  font-family: var(--font-anton);
  font-size: 1.875rem; /* text-3xl */
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 0.05em;
  margin: 0;
  /* subtle chromatic offset seen in original screenshots */
  text-shadow: 1.5px 0 0 rgba(255,60,60,0.55), -1.5px 0 0 rgba(80,120,255,0.55);
}

.jh-footer__bio {
  font-size: 0.875rem;
  line-height: 1.7;
  color: #d1d5db;
  max-width: 20rem; /* max-w-xs */
  margin: 0;
}

.jh-footer__socials { display: flex; gap: 16px; padding-top: 8px; }
.jh-footer__socials a {
  display: flex; align-items: center; justify-content: center;
  height: 48px; width: 48px; border-radius: 9999px;
  color: #fff;
  transition: all 0.3s;
}
.jh-footer__socials a:hover { transform: scale(1.1); box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
.jh-footer__socials svg { height: 24px; width: 24px; fill: currentColor; }
.jh-social--amazon    { background: linear-gradient(to bottom right, #fb923c, #ea580c); }
.jh-social--bn        { background: linear-gradient(to bottom right, #3b82f6, #1d4ed8); }
.jh-social--booktopia { background: linear-gradient(to bottom right, #22c55e, #15803d); }
.jh-social--google    { background: linear-gradient(to bottom right, #ef4444, #b91c1c); }

.jh-footer__form-title {
  font-size: 0.875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: #fff; margin: 0 0 16px;
}

/* Elementor form override — makes the embedded Elementor Pro form
   pixel-match the original footer form. Scoped under .jh-footer-form. */
.jh-footer-form .elementor-form .elementor-field-group { margin-bottom: 16px; padding: 0; }
.jh-footer-form .elementor-form textarea.elementor-field {
  width: 100%;
  border-radius: 16px;           /* rounded-2xl */
  border: none;
  background: var(--color-input-gray);
  padding: 16px;
  font-size: 0.875rem;
  color: var(--color-dark-gray);
  font-family: var(--font-poppins);
  min-height: 120px;             /* rows=4 */
  resize: vertical;
}
.jh-footer-form .elementor-form textarea.elementor-field::placeholder {
  color: var(--color-placeholder);
  text-transform: uppercase;
}
.jh-footer-form .elementor-form textarea.elementor-field:focus {
  outline: none;
  box-shadow: 0 0 0 2px #ffffff;
}
.jh-footer-form .elementor-form .elementor-button {
  width: 100%;
  border-radius: 16px;
  background: var(--color-btn-dark);
  padding: 12px 24px;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  transition: background-color 0.2s;
}
.jh-footer-form .elementor-form .elementor-button:hover { background: #000; }

.jh-footer__copyright {
  border-top: 1px solid rgba(156,163,175,0.3);
}
.jh-footer__copyright p {
  max-width: 1280px; margin: 0 auto;
  padding: 20px 32px;
  text-align: center;
  font-size: 0.75rem;
  color: #9ca3af;
}

/* --------------------------------------------------------------------------
   6) Generic utilities used across templates
   -------------------------------------------------------------------------- */
.jh-container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.skip-link {
  position: absolute; top: -40px; left: 6px;
  background: #000; color: #fff; padding: 8px;
  text-decoration: none; border-radius: 4px; z-index: 100;
  transition: top 0.3s;
}
.skip-link:focus { top: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   7) Blog content (ported from .blog-content in globals.css)
   Applied to the WordPress post content wrapper so Gutenberg output
   matches the original blog styling.
   -------------------------------------------------------------------------- */
.blog-content { line-height: 1.8; }
.blog-content img {
  max-width: 100%; height: auto; border-radius: 8px;
  margin: 1.5rem auto; display: block;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6 {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-weight: bold;
  margin-top: 2rem; margin-bottom: 1rem; line-height: 1.3;
}
.blog-content h1 { font-size: 2.5rem; }
.blog-content h2 { font-size: 2rem; }
.blog-content h3 { font-size: 1.75rem; }
.blog-content p  { margin-bottom: 1.25rem; }
.blog-content ul, .blog-content ol { margin: 1.25rem 0; padding-left: 2rem; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content a { color: #2563eb; text-decoration: underline; transition: color 0.2s; }
.blog-content a:hover { color: #1d4ed8; }
.blog-content strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   8) HERO (ported from Hero.tsx + HeroContent.tsx)
   -------------------------------------------------------------------------- */
.jh-hero {
  position: relative;
  height: 38vh;                       /* h-[38vh] */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-bottom: 0;
  margin-bottom: 0;
  background: radial-gradient(ellipse at center 80%, #8A8A8A 40%, #F5F5F5 100%);
}
@media (min-width: 640px)  { .jh-hero { height: 65vh; } }   /* sm */
@media (min-width: 768px)  { .jh-hero { height: 85vh; } }   /* md */
@media (min-width: 1024px) { .jh-hero { height: 100vh; } }  /* lg+ */

.jh-hero__content {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 48px;                  /* pt-12 */
}
@media (min-width: 640px)  { .jh-hero__content { padding-top: 64px; } }   /* sm:pt-16 */
@media (min-width: 768px)  { .jh-hero__content { padding-top: 80px; } }   /* md:pt-20 */
@media (min-width: 1024px) { .jh-hero__content { padding-top: 120px; } }  /* lg:pt-30 */

.jh-hero__title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #ffffff;
  font-weight: 500;
  user-select: none;
  pointer-events: none;
  font-size: clamp(80px, 25vw, 450px);
  line-height: 0.8;
}
.jh-hero__title-part { letter-spacing: 0.05em; display: inline-block; }
.jh-hero__title-gap  { letter-spacing: 0.2em; margin-left: 0.4em; display: inline-block; }

.jh-hero__portrait {
  position: relative;
  z-index: 10;
  width: 250px;  height: 333px;       /* base */
  margin-top: 16px;                   /* mt-4 */
}
.jh-hero__portrait img { width: 100%; height: 100%; object-fit: contain; }
@media (min-width: 640px)  { .jh-hero__portrait { width: 350px; height: 467px;  margin-top: 24px; } }  /* sm */
@media (min-width: 768px)  { .jh-hero__portrait { width: 450px; height: 600px;  margin-top: 32px; } }  /* md */
@media (min-width: 1024px) { .jh-hero__portrait { width: 550px; height: 733px;  margin-top: 48px; } }  /* lg */
@media (min-width: 1280px) { .jh-hero__portrait { width: 750px; height: 1000px; margin-top: 64px; } }  /* xl */

/* Extra reveal variant used by the hero portrait (y:100 like the original) */
@keyframes slideUp100 {
  from { opacity: 0; transform: translateY(100px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jh-reveal.is-visible.reveal-up-100 { animation: slideUp100 0.8s ease-out both; }

/* --------------------------------------------------------------------------
   9) ABOUT ME + MARQUEE (ported from About.tsx)
   -------------------------------------------------------------------------- */
.jh-about {
  background: #E6E6E6;
  width: 100%;
  min-height: 60vh;                   /* min-h-[60vh] */
  overflow-x: hidden;
  padding-bottom: 32px;               /* pb-8 */
}
@media (min-width: 640px) { .jh-about { min-height: 100vh; padding-bottom: 0; } }  /* sm */
@media (min-width: 768px) { .jh-about { padding-bottom: 96px; } }                  /* md:pb-24 */

.jh-about__marquee-bar {
  width: 100%;
  padding: 12px 0;                    /* py-3 */
  border-top: 1px solid #d1d5db;      /* border-gray-300 */
  border-bottom: 1px solid #d1d5db;
  overflow: hidden;
  background: #F5F5F5;
}
@media (min-width: 640px) { .jh-about__marquee-bar { padding: 16px 0; } }  /* sm:py-4 */

.jh-about__marquee-bar .jh-marquee__track {
  font-size: 0.75rem;                 /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #000;
}
@media (min-width: 640px) { .jh-about__marquee-bar .jh-marquee__track { font-size: 0.875rem; } }  /* sm:text-sm */
.jh-about__marquee-bar .jh-marquee__track span { margin: 0 32px; }  /* mx-8 */

.jh-about__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 16px 8px;             /* pt-4 pb-2 px-4 */
}
@media (min-width: 640px) { .jh-about__inner { padding: 64px 24px; } }        /* sm:py-16 sm:px-6 */
@media (min-width: 768px) { .jh-about__inner { padding: 96px 32px; } }        /* md:py-24 md:px-8 */
@media (min-width: 1024px) { .jh-about__inner { padding-bottom: 32px; } }     /* lg:pb-8 */

.jh-about__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 24px;                      /* gap-y-6 */
  column-gap: 32px;                   /* gap-x-8 */
  align-items: center;
}
@media (min-width: 640px)  { .jh-about__grid { row-gap: 48px; } }             /* sm:gap-y-12 */
@media (min-width: 1024px) { .jh-about__grid { grid-template-columns: 1fr 1fr; row-gap: 64px; } }

.jh-about__text { order: 2; text-align: center; }
@media (min-width: 1024px) { .jh-about__text { order: 1; text-align: left; } }

.jh-about__heading {
  font-size: 2.25rem;                 /* text-4xl */
  color: #000;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-weight: 400;                   /* Anton single weight; bold class in original resolves visually the same */
}
@media (min-width: 640px)  { .jh-about__heading { font-size: 3rem;    margin-bottom: 24px; } }  /* sm:text-5xl */
@media (min-width: 768px)  { .jh-about__heading { font-size: 3.75rem; } }                        /* md:text-6xl */
@media (min-width: 1024px) { .jh-about__heading { font-size: 4.5rem;  } }                        /* lg:text-7xl */

.jh-about__paragraphs { max-width: 36rem; margin: 0 auto; }   /* max-w-xl */
@media (min-width: 1024px) { .jh-about__paragraphs { margin: 0; } }
.jh-about__paragraphs p {
  font-size: 0.875rem;                /* text-sm */
  color: #1f2937;                     /* gray-800 */
  line-height: 1.625;                 /* leading-relaxed */
  margin: 0 0 24px;                   /* space-y-6 */
}
.jh-about__paragraphs p:last-child { margin-bottom: 0; }
@media (min-width: 640px) { .jh-about__paragraphs p { font-size: 1rem; } }  /* sm:text-base */

.jh-about__image { order: 1; display: flex; justify-content: center; }
@media (min-width: 1024px) { .jh-about__image { order: 2; justify-content: flex-end; } }

.jh-about__image-wrap { position: relative; }
.jh-about__image-circle {
  position: absolute; inset: 0;
  background: var(--color-dark-gray);
  border-radius: 9999px;
  width: 288px; height: 288px;
}
.jh-about__image-wrap img {
  position: relative; z-index: 10;
  object-fit: cover;
  width: 288px; height: 288px;
  border-radius: 9999px;
}
@media (min-width: 640px) {
  .jh-about__image-circle, .jh-about__image-wrap img { width: 352px; height: 352px; }
}
@media (min-width: 768px) {
  .jh-about__image-circle, .jh-about__image-wrap img { width: 448px; height: 448px; }
}
@media (min-width: 1024px) {
  .jh-about__image-circle, .jh-about__image-wrap img { width: 576px; height: 576px; }
}

/* --------------------------------------------------------------------------
   10) ALL BOOKS carousel (ported from Books.tsx)
   -------------------------------------------------------------------------- */
.jh-books {
  background: #EAEAEA;
  padding: 48px 0;                    /* py-12 */
}
@media (min-width: 640px)  { .jh-books { padding: 64px 0; } }   /* sm:py-16 */
@media (min-width: 768px)  { .jh-books { padding: 80px 0; } }   /* md:py-20 */
@media (min-width: 1024px) { .jh-books { padding: 96px 0; } }   /* lg:py-24 */

.jh-books__inner { max-width: 1280px; margin: 0 auto; }

.jh-books__heading {
  font-size: 2.25rem;
  color: #000;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 32px;                   /* mb-8 */
  padding: 0 16px;
  font-weight: 400;
}
@media (min-width: 640px)  { .jh-books__heading { font-size: 3rem;    margin-bottom: 48px; } }
@media (min-width: 768px)  { .jh-books__heading { font-size: 3.75rem; margin-bottom: 64px; } }
@media (min-width: 1024px) { .jh-books__heading { font-size: 4.5rem;  } }

.jh-books__carousel { position: relative; width: 100%; }

.jh-books__viewport { width: 100%; overflow: hidden; }
.jh-books__container { display: flex; }

.jh-books__slide {
  position: relative;
  flex: 0 0 75%;                      /* mobile */
  min-width: 0;
  padding: 0 4px;                     /* px-1 */
}
@media (min-width: 640px)  { .jh-books__slide { flex-basis: 55%; } }
@media (min-width: 768px)  { .jh-books__slide { flex-basis: 45%; } }
@media (min-width: 1024px) { .jh-books__slide { flex-basis: 35%; } }

.jh-books__slide-scale {
  width: 100%;
  transform: scale(0.85);
  opacity: 0.5;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
.jh-books__slide.is-selected .jh-books__slide-scale {
  transform: scale(1);
  opacity: 1;
}

.jh-books__slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.jh-books__cover-link { display: block; }

.jh-books__cover {
  width: 192px; height: 240px;        /* w-48 h-60 */
  border-radius: 6px;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
}
.jh-books__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
@media (min-width: 640px) { .jh-books__cover { width: 224px; height: 280px; } }  /* sm:w-56 h-70 */
@media (min-width: 768px) { .jh-books__cover { width: 256px; height: 320px; } }  /* md:w-64 h-80 */

.jh-books__caption {
  margin-top: 16px;                   /* mt-4 */
  opacity: 0;
  transition: opacity 0.5s;
  font-family: var(--font-poppins);
}
@media (min-width: 640px) { .jh-books__caption { margin-top: 24px; } }  /* sm:mt-6 */
.jh-books__slide.is-selected .jh-books__caption { opacity: 1; }

.jh-books__caption h3 {
  font-family: 'Georgia', 'Times New Roman', serif; /* h3 default in original */
  font-size: 1.125rem;                /* text-lg */
  font-weight: 700;
  color: #000;
  margin: 0;
}
@media (min-width: 640px) { .jh-books__caption h3 { font-size: 1.25rem; } }  /* sm:text-xl */
.jh-books__caption p {
  font-family: var(--font-poppins);
  font-size: 0.875rem;
  color: #4b5563;                     /* gray-600 */
  margin: 4px 0 0;
}
@media (min-width: 640px) { .jh-books__caption p { font-size: 1rem; } }

.jh-books__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  border: none;
  border-radius: 9999px;
  background: rgba(0,0,0,0.4);
  transition: all 0.2s;
  z-index: 10;
  display: inline-flex;
}
.jh-books__arrow:hover:not(:disabled) { background: rgba(0,0,0,0.6); }
.jh-books__arrow:disabled { opacity: 0.2; cursor: not-allowed; }
.jh-books__arrow svg { height: 24px; width: 24px; color: #fff; }
.jh-books__arrow--prev { left: 16px; }
.jh-books__arrow--next { right: 16px; }

/* --------------------------------------------------------------------------
   11) ABOUT THE BOOK (ported from BookAbout.tsx / BookAbout2.tsx)
   -------------------------------------------------------------------------- */
.jh-bookabout {
  background-color: #DCDCDC;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  padding: 48px 0;
}
@media (min-width: 640px)  { .jh-bookabout { padding: 64px 0; } }
@media (min-width: 768px)  { .jh-bookabout { padding: 80px 0; } }
@media (min-width: 1024px) { .jh-bookabout { padding: 96px 0; } }

.jh-bookabout__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 640px) { .jh-bookabout__inner { padding: 0 24px; } }
@media (min-width: 768px) { .jh-bookabout__inner { padding: 0 32px; } }

.jh-bookabout__text {
  position: relative;
  z-index: 10;
  text-align: center;
}
.jh-bookabout__heading {
  font-size: 3rem;                    /* text-5xl */
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 24px;                   /* space-y-6 */
  font-weight: 400;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06)); /* drop-shadow-md */
}
@media (min-width: 640px) { .jh-bookabout__heading { font-size: 3.75rem; } }  /* sm:text-6xl */
@media (min-width: 768px) { .jh-bookabout__heading { font-size: 4.5rem;  } }  /* md:text-7xl */

.jh-bookabout__desc {
  font-size: 1.125rem;                /* text-lg */
  color: #374151;                     /* gray-700 */
  line-height: 1.625;
  max-width: 42rem;                   /* max-w-2xl */
  margin: 0 auto;
}
@media (min-width: 640px) { .jh-bookabout__desc { font-size: 1.25rem; } }  /* sm:text-xl */

/* Desktop floating 3D book — anchored to the section's right edge */
.jh-bookabout__image-desktop {
  display: none;
}
@media (min-width: 1024px) {
  .jh-bookabout__image-desktop {
    display: flex;
    position: absolute;
    top: 0;
    height: 100%;
    align-items: center;
    right: -80px;                     /* -right-20 */
  }
}
.jh-bookabout__image-box {
  position: relative;
  transform: rotate(6deg);
  filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03)) drop-shadow(0 8px 5px rgba(0,0,0,0.08)); /* drop-shadow-xl */
}
.jh-bookabout__image-box img { width: 100%; height: 100%; object-fit: contain; }

.jh-bookabout--large .jh-bookabout__image-desktop .jh-bookabout__image-box { width: 600px; height: 600px; }
.jh-bookabout--small .jh-bookabout__image-desktop .jh-bookabout__image-box { width: 500px; height: 500px; }

/* Mobile fallback book below the text */
.jh-bookabout__image-mobile {
  display: flex;
  justify-content: center;
  margin-top: 48px;                   /* mt-12 */
}
@media (min-width: 1024px) { .jh-bookabout__image-mobile { display: none; } }
.jh-bookabout--large .jh-bookabout__image-mobile .jh-bookabout__image-box { width: 320px; height: 320px; }  /* w-80 */
.jh-bookabout--small .jh-bookabout__image-mobile .jh-bookabout__image-box { width: 256px; height: 256px; }  /* w-64 */

/* Extra reveal variants used here (y:50 and slower 1s hand slides) */
@keyframes slideUp50 {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}
.jh-reveal.is-visible.reveal-up-50 { animation: slideUp50 0.8s ease-out both; }
.jh-reveal.is-visible.reveal-left-slow  { animation: slideLeft 1s ease-out both; }
.jh-reveal.is-visible.reveal-right-slow { animation: slideRight 1s ease-out both; }

/* --------------------------------------------------------------------------
   12) BOOK HANDS (ported from BookHands.tsx / BookHands2.tsx)
   White band; hands hang below via negative bottom offsets and overlap
   the following section (z-index 20).
   -------------------------------------------------------------------------- */
.jh-hands {
  position: relative;
  height: 256px;                      /* h-64 */
  background: #fff;
}
@media (min-width: 640px)  { .jh-hands { height: 320px; } }  /* sm:h-80 */
@media (min-width: 1024px) { .jh-hands { height: 384px; } }  /* lg:h-96 */

.jh-hands__left, .jh-hands__right {
  position: absolute;
  z-index: 20;
}
.jh-hands__left img, .jh-hands__right img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 13px rgba(0,0,0,0.03)) drop-shadow(0 8px 5px rgba(0,0,0,0.08));
}

/* Variant 1 (BookHands.tsx, book1 default state) */
.jh-hands--v1 .jh-hands__left {
  left: 0;
  bottom: -220px;                     /* -bottom-55 */
  width: 88px;  height: 440px;
}
@media (min-width: 640px)  { .jh-hands--v1 .jh-hands__left { width: 440px; height: 572px; } }
@media (min-width: 768px)  { .jh-hands--v1 .jh-hands__left { width: 572px; height: 704px; } }
@media (min-width: 1024px) { .jh-hands--v1 .jh-hands__left { width: 704px; height: 880px; } }

/* Variant 2 (BookHands2.tsx) */
.jh-hands--v2 .jh-hands__left {
  left: -64px;                        /* -left-16 */
  bottom: -220px;                     /* -bottom-55 */
  width: 100px; height: 480px;
}
@media (min-width: 640px)  { .jh-hands--v2 .jh-hands__left { width: 480px; height: 620px; } }
@media (min-width: 768px)  { .jh-hands--v2 .jh-hands__left { width: 620px; height: 750px; } }
@media (min-width: 1024px) { .jh-hands--v2 .jh-hands__left { width: 750px; height: 920px; } }

/* Right hand (identical geometry in both variants) */
.jh-hands .jh-hands__right {
  right: 0;
  bottom: -200px;                     /* -bottom-50 */
  width: 120px; height: 450px;
}
@media (min-width: 640px)  { .jh-hands .jh-hands__right { width: 500px; height: 500px; } }
@media (min-width: 768px)  { .jh-hands .jh-hands__right { width: 650px; height: 650px; } }
@media (min-width: 1024px) { .jh-hands .jh-hands__right { width: 800px; height: 800px; } }