/* ==========================================================================
   John Deda — Author Website
   Palette drawn directly from the book covers:
   navy (Book 1 title) / burgundy (Book 2 title) / gilt gold / warm cream
   ========================================================================== */

0,600;0,700;1,500&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --cream:      #F6F0E2;
  --cream-2:    #EFE6D2;
  --parchment:  #FBF7EE;
  --navy:       #315C92;
  --navy-2:     #4472AD;
  --navy-deep:  #1F3C61;
  --forest:     #1F3327;
  --forest-2:   #16241C;
  --burgundy:   #7C2331;
  --burgundy-2: #611A25;
  --gold:       #B08D46;
  --gold-soft:  #D9C48E;
  --ink:        #2B2620;
  --ink-soft:   #55503f;

  --display: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --body: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --max: 1120px;
  --radius: 2px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  transition: opacity .5s ease;
}
body.is-ready{ opacity: 1; }

img{ max-width: 100%; display: block; }

a{ color: inherit; }

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Typography ---------- */

h1,h2,h3,h4{
  font-family: var(--display);
  color: var(--navy);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em 0;
  letter-spacing: 0.2px;
}

h1{ font-size: clamp(2.4rem, 4.2vw, 3.6rem); font-weight: 700; }
h2{ font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
h3{ font-size: 1.35rem; }

p{ margin: 0 0 1.1em 0; max-width: 62ch; }
p.wide{ max-width: none; }

.lede{
  font-size: 1.18rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* Ornamental rule — echoes the flourish under "BOOK 1 / BOOK 2" on the covers */
.flourish{
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  margin: 18px 0 22px 0;
}
.flourish::before, .flourish::after{
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold), transparent);
}
.flourish span{
  font-size: 0.72rem;
  letter-spacing: 3px;
  color: var(--gold);
  white-space: nowrap;
}
.flourish.left{ justify-content: flex-start; }
.flourish.left::after{ display:none; }
.flourish.left::before{ display:none; }
.flourish.left span{ padding-right: 14px; border-right: 1px solid var(--gold-soft); }

/* ---------- Buttons ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); }

.btn-primary{
  background: var(--burgundy);
  color: var(--parchment);
}
.btn-primary:hover{ background: var(--burgundy-2); }

.btn-outline{
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover{ background: var(--navy); color: var(--parchment); }

.btn-gold{
  background: transparent;
  color: var(--navy);
  border-color: var(--gold);
}
.btn-gold:hover{ background: var(--gold); color: var(--navy); }

.btn-small{ padding: 9px 18px; font-size: 0.85rem; }

/* ---------- Header / Nav ---------- */

header.site{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246,240,226,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gold-soft);
}
.nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  max-width: var(--max);
  margin: 0 auto;
}
.brand{
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand img{ width: 34px; height: 34px; border-radius: 8px; display:block; }
.brand span{ color: var(--navy); }

.nav-collapse{
  display: flex;
  align-items: center;
}

.nav-links{
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 0.98rem;
}
.nav-links a{
  text-decoration: none;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--burgundy);
  transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--burgundy); }

.nav-toggle{ display:none; background:none; border:none; cursor:pointer; }
.nav-toggle svg{ width: 26px; height: 26px; color: var(--navy); }

@media (max-width: 760px){
  .nav-collapse{
    position: absolute; top: 100%; left:0; right:0;
    background: var(--parchment);
    flex-direction: column;
    align-items: stretch;
    border-bottom: 1px solid var(--gold-soft);
    display: none;
  }
  .nav-collapse.open{ display: flex; }
  .nav-links{ flex-direction: column; gap: 0; }
  .nav-links li{ border-top: 1px solid var(--cream-2); }
  .nav-links a{ display:block; padding: 16px 28px; }
  .nav-links a::after{ display:none; }
  .nav-toggle{ display:block; }
}

/* ---------- Footer ---------- */

footer.site{
  background: var(--navy);
  color: var(--cream-2);
  margin-top: 90px;
}
footer.site .wrap{
  padding-top: 60px;
  padding-bottom: 40px;
}
footer.site h3{ color: var(--gold-soft); font-size: 1.1rem; }
footer.site a{ color: var(--cream-2); text-decoration: none; }
footer.site a:hover{ color: var(--gold-soft); }
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 40px;
}
.footer-grid p{ color: rgba(246,240,226,0.75); }
.footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-bottom{
  border-top: 1px solid rgba(217,196,142,0.25);
  margin-top: 40px;
  padding-top: 22px;
  font-size: 0.85rem;
  color: rgba(246,240,226,0.55);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media (max-width: 700px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ---------- Hero ---------- */

.hero{
  padding: 64px 0 90px 0;
}
.hero.on-dark{
  background: var(--navy);
  color: var(--cream);
}
.hero.on-dark .kicker{ color: var(--gold-soft); }
.hero.on-dark h1{ color: var(--parchment); }
.hero.on-dark .lede{ color: rgba(246,240,226,0.78); }
.hero.on-dark .flourish{ color: var(--gold-soft); }
.hero.on-dark .flourish::before, .hero.on-dark .flourish::after{
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
}
.hero.on-dark .flourish span{ color: var(--gold-soft); border-color: rgba(217,196,142,0.4); }
.hero.on-dark .btn-outline{ color: var(--parchment); border-color: var(--gold-soft); }
.hero.on-dark .btn-outline:hover{ background: var(--gold-soft); color: var(--navy); border-color: var(--gold-soft); }
.hero.on-dark .btn-gold{ color: var(--parchment); border-color: var(--gold-soft); }
.hero.on-dark .btn-gold:hover{ background: var(--gold-soft); color: var(--navy); }
.hero.on-dark .author-hero p{ color: rgba(246,240,226,0.78); }
.hero-grid{
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.hero-copy .kicker{
  font-family: var(--body);
  font-size: 0.8rem;
  letter-spacing: 2.5px;
  color: var(--burgundy);
  margin-bottom: 14px;
  font-weight: 600;
}
.hero-copy h1{ margin-bottom: 20px; }
.hero-actions{
  display:flex; gap: 16px; flex-wrap: wrap;
  margin-top: 30px;
}
.hero-cover{
  position: relative;
  display:flex;
  justify-content:center;
}
.hero-cover img{
  width: min(360px, 100%);
  box-shadow: 0 28px 60px -18px rgba(0,0,0,0.55), 0 6px 18px rgba(0,0,0,0.35);
  border-radius: 1px;
}
.hero-cover{ flex-direction: column; align-items: center; }
.hero-cover .ribbon{
  background: var(--burgundy);
  color: var(--parchment);
  font-size: 0.72rem;
  letter-spacing: 1.8px;
  padding: 7px 16px;
  margin-bottom: 16px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-cover{ order: -1; }
}

/* ---------- Shelf (book listing) ---------- */

.shelf-section{ padding: 90px 0; }
.shelf-section.tint{ background: var(--cream-2); }
.shelf-section.on-dark{
  background: var(--forest);
  color: var(--cream);
}
.shelf-section.on-dark .flourish{ color: var(--gold-soft); }
.shelf-section.on-dark .flourish::before, .shelf-section.on-dark .flourish::after{
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
}
.shelf-section.on-dark .flourish.left span{ color: var(--gold-soft); border-color: rgba(217,196,142,0.35); }
.shelf-section.on-dark h2{ color: var(--parchment); }
.shelf-section.on-dark > .wrap > p{ color: rgba(246,240,226,0.75); }
.shelf-section.on-dark .book-card h3{ color: var(--parchment); }
.shelf-section.on-dark .book-card .teaser{ color: rgba(246,240,226,0.68); }
.shelf-section.on-dark .book-card .series-no{ color: var(--gold-soft); }
.shelf-section.on-dark .shelf{ border-bottom-color: var(--gold-soft); }
.shelf-section.on-dark .btn-outline{ color: var(--parchment); border-color: var(--gold-soft); }
.shelf-section.on-dark .btn-outline:hover{ background: var(--gold-soft); color: var(--forest-2); border-color: var(--gold-soft); }

.shelf{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-top: 46px;
  padding-bottom: 26px;
  border-bottom: 3px solid var(--gold);
  position: relative;
}
.shelf::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-10px;
  height: 10px;
  background: linear-gradient(to bottom, rgba(22,35,63,0.15), transparent);
}

.book-card{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--body);
  color: inherit;
  display: block;
  text-decoration: none;
}
.book-card .cover-wrap{
  margin-bottom: 14px;
  transition: transform .25s ease;
}
.book-card:hover .cover-wrap{ transform: translateY(-6px); }
.book-card img{
  width: 100%;
  box-shadow: 0 22px 40px -16px rgba(0,0,0,0.6);
}
.book-card .badge{
  display: inline-block;
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 0.68rem;
  letter-spacing: 1.4px;
  padding: 5px 11px;
  margin-bottom: 10px;
  font-weight: 700;
}
.book-card .badge.soon{ background: var(--burgundy); color: var(--parchment); font-weight: 400; }
.book-card h3{ margin-bottom: 4px; font-size: 1.25rem; }
.book-card .series-no{
  font-size: 0.8rem;
  color: var(--burgundy);
  letter-spacing: 1px;
  margin-bottom: 8px;
  display:block;
}
.book-card .teaser{
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- Modal (book detail) ---------- */

.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(22,20,15,0.72);
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  z-index: 100;
}
.modal-backdrop.open{ display: flex; }
.modal{
  background: var(--parchment);
  max-width: 880px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 44px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.modal-close{
  position: absolute; top: 18px; right: 18px;
  background: none; border: none; cursor: pointer;
  font-size: 1.6rem; line-height:1;
  color: var(--ink-soft);
}
.modal-close:hover{ color: var(--burgundy); }
.modal-grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
}
.modal-grid img{ box-shadow: 0 20px 40px -16px rgba(22,35,63,0.5); }
.modal .series-no{ color: var(--burgundy); font-size: 0.85rem; letter-spacing: 1px; }
.modal-actions{ display:flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
.modal .note{ font-size: 0.85rem; color: var(--ink-soft); margin-top: 18px; font-style: italic;}

@media (max-width: 640px){
  .modal-grid{ grid-template-columns: 1fr; }
  .modal{ padding: 30px 22px; }
}

/* ---------- Generic content sections ---------- */

.section{ padding: 90px 0; }
.section.tint{ background: var(--cream-2); }
.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 800px){ .two-col{ grid-template-columns: 1fr; } }

/* ---------- Newsletter ---------- */

.newsletter{
  background: var(--navy);
  color: var(--cream);
  padding: 70px 0;
  position: relative;
}
.newsletter .flourish span, .newsletter .flourish{ color: var(--gold-soft); }
.newsletter .flourish::before, .newsletter .flourish::after{
  background: linear-gradient(to right, transparent, var(--gold-soft), transparent);
}
.newsletter h2{ color: var(--parchment); }
.newsletter p{ color: rgba(246,240,226,0.8); }
.newsletter-grid{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}
@media (max-width: 800px){ .newsletter-grid{ grid-template-columns: 1fr; } }

.magnet-cover{
  border: 1px solid rgba(217,196,142,0.4);
  padding: 22px;
  display:flex; gap:18px; align-items:center;
  background: rgba(255,255,255,0.03);
}
.magnet-cover .icon{
  width: 54px; height:54px; flex:none;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  color: var(--gold-soft);
}

.kit-embed-wrap{
  max-width: 900px;
  margin: 0 auto;
}
.kit-embed-wrap .formkit-form{
  margin: 0 auto;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.45) !important;
}

form.signup{
  display:flex; gap: 12px; flex-wrap: wrap;
  margin-top: 22px;
}
form.signup input[type="email"]{
  flex: 1 1 240px;
  padding: 14px 16px;
  border: 1px solid rgba(217,196,142,0.5);
  background: rgba(255,255,255,0.06);
  color: var(--cream);
  font-family: var(--body);
  font-size: 0.98rem;
  border-radius: var(--radius);
}
form.signup input[type="email"]::placeholder{ color: rgba(246,240,226,0.55); }
form.signup .btn-primary{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
form.signup .btn-primary:hover{ background: var(--gold-soft); }
.form-note{ font-size: 0.82rem; color: rgba(246,240,226,0.55); margin-top: 12px; }

/* ---------- About page ---------- */

.author-hero{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
}
.author-hero img{
  border-radius: 50%;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  box-shadow: 0 24px 50px -20px rgba(22,35,63,0.4);
}
@media (max-width: 760px){
  .author-hero{ grid-template-columns: 1fr; text-align:center; }
  .author-hero img{ width: 220px; margin: 0 auto; }
  .author-hero p{ margin-left:auto; margin-right:auto; }
}

.pillar-list{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: 22px;
}
.pillar-list li{
  border-left: 2px solid var(--gold);
  padding-left: 18px;
}
.pillar-list strong{ display:block; color: var(--navy); font-family: var(--display); font-size: 1.1rem; }

/* ---------- Utility ---------- */

.center{ text-align:center; }
.mx-auto{ margin-left:auto; margin-right:auto; }
.mt-0{ margin-top:0; }
.small-caps{ font-variant: small-caps; letter-spacing: 0.5px; }

/* ==========================================================================
   Social icon rows (header + footer) — line icons, gold on hover
   ========================================================================== */

.social-row{
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-row a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  color: var(--navy);
  opacity: 0.75;
  transition: opacity .2s ease, transform .2s ease, color .2s ease;
}
.social-row a:hover{ opacity: 1; transform: translateY(-2px); color: var(--burgundy); }
.social-row a svg{ width: 18px; height: 18px; }
.social-row.on-dark a{ color: var(--gold-soft); opacity: 0.85; }
.social-row.on-dark a:hover{ color: var(--parchment); opacity: 1; }

.nav-social{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--gold-soft);
}
.nav-social a{ color: var(--navy); opacity: 0.7; transition: opacity .2s ease, color .2s ease; }
.nav-social a:hover{ opacity: 1; color: var(--burgundy); }
.nav-social a svg{ width: 16px; height: 16px; }

footer.site .social-row{ margin-top: 18px; }

@media (max-width: 760px){
  .nav-social{ border-left: none; padding-left: 0; margin: 18px 28px 4px 28px; border-top: 1px solid var(--cream-2); padding-top: 16px; }
}

/* ==========================================================================
   Full-bleed banner sections (the custom illustrated title banners)
   ========================================================================== */

.banner{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--navy);
}
.banner img{
  width: 100%;
  display: block;
  height: auto;
}
.banner-link{
  display: block;
  position: relative;
}
.banner-link::after{
  content: "";
  position: absolute; inset: 0;
  background: rgba(22,35,63,0);
  transition: background .3s ease;
}
.banner-link:hover::after{ background: rgba(22,35,63,0.06); }

/* ==========================================================================
   Editorial reading elements — drop cap, pull quote
   ========================================================================== */

.dropcap::first-letter{
  font-family: var(--display);
  font-size: 4.2em;
  float: left;
  line-height: 0.8;
  padding: 0.06em 0.08em 0 0;
  color: var(--burgundy);
  font-weight: 700;
}

.pull-quote{
  font-family: var(--display);
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1.4;
  color: var(--burgundy);
  border-left: 3px solid var(--gold);
  padding: 4px 0 4px 28px;
  margin: 40px 0 160px 0;
  max-width: 46ch;
}

.excerpt-page{
  max-width: 680px;
  margin: 0 auto;
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--ink);
}
.excerpt-page p{ max-width: none; }
.excerpt-fade{
  position: relative;
  margin-top: -140px;
  height: 140px;
  background: linear-gradient(to bottom, rgba(246,240,226,0), var(--cream) 85%);
  pointer-events: none;
}
.excerpt-fade.on-tint{ background: linear-gradient(to bottom, rgba(239,230,210,0), var(--cream-2) 85%); }

/* ==========================================================================
   Scroll-reveal animation
   ========================================================================== */

.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Reader Circle page — benefit list + magnet showcase
   ========================================================================== */

.benefit-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 40px 0;
}
.benefit-card{
  background: var(--parchment);
  border: 1px solid var(--cream-2);
  padding: 30px 26px;
  text-align: left;
}
.benefit-card .num{
  font-family: var(--display);
  font-size: 2.2rem;
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 10px;
}
.benefit-card h3{ font-size: 1.15rem; margin-bottom: 8px; }
.benefit-card p{ font-size: 0.95rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 820px){
  .benefit-grid{ grid-template-columns: 1fr; }
}

.magnet-showcase{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 50px;
  align-items: center;
  background: var(--forest);
  color: var(--cream);
  padding: 56px;
  margin: 50px 0;
}
.magnet-showcase img{
  width: 100%;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,0.6);
}
.magnet-showcase h3{ color: var(--parchment); font-size: 1.6rem; }
.magnet-showcase p{ color: rgba(246,240,226,0.78); }
@media (max-width: 760px){
  .magnet-showcase{ grid-template-columns: 1fr; padding: 34px 24px; text-align:center; }
  .magnet-showcase img{ width: 200px; margin: 0 auto; }
}

/* ==========================================================================
   Character cards — "Meet the People of Bellflower"
   Text overlaid on the illustration's own negative space (as designed).
   ========================================================================== */

.character-card{
  position: relative;
  margin-bottom: 46px;
  overflow: hidden;
  background: var(--parchment);
}
.character-card img{ width: 100%; display:block; }
.character-text{
  position: absolute;
  top: 50%;
  right: 5%;
  transform: translateY(-50%);
  width: 40%;
  min-width: 220px;
}
.character-text .tagline{
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--burgundy);
  margin-bottom: 10px;
  display: block;
}
.character-text h3{ margin-bottom: 10px; font-size: 1.5rem; }
.character-text p{ font-size: 0.95rem; color: var(--ink-soft); margin-bottom: 12px; max-width: none; }
.character-text .micro{
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  color: var(--navy);
  font-size: 1rem;
}
@media (max-width: 760px){
  .character-card{ background: var(--parchment); }
  .character-card img{ width: 100%; height: auto; object-fit: initial; }
  .character-text{
    position: static;
    transform: none;
    width: auto;
    padding: 20px 22px 26px 22px;
  }
}

/* Subtle paper-grain texture on dark sections, for a premium print feel rather than flat digital color */
.hero.on-dark::before, .shelf-section.on-dark::before, .newsletter::before, footer.site::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero.on-dark, .shelf-section.on-dark, .newsletter, footer.site{ position: relative; }

/* Magnetic hover on primary buttons — a small, tasteful pull toward the cursor */
.btn-primary{ will-change: transform; }

/* Gentle parallax on full-bleed banners */
.banner img{ will-change: transform; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}


/* ========================================================================
   SITE V2 — JOHN DEDA MASTER BRAND
   Organic editorial palette: vivid, warm and cross-genre rather than tied
   to any single series. Bellflower imagery may bring in its own seasonal hues.
   ======================================================================== */
:root{
  --ivory:#FAF6EE;
  --ivory-2:#F3EBDD;
  --sand:#DCC9A4;
  --stone:#A78E72;
  --espresso:#5B331F;
  --oxblood:#842F36;
  --oxblood-bright:#A84148;
  --forest:#174B2B;
  --forest-bright:#28653D;
  --ink:#26211D;
  --ink-soft:#655A50;
  --cream:var(--ivory);
  --cream-2:var(--ivory-2);
  --parchment:#FFFDF8;
  --navy:var(--espresso);
  --navy-2:#7A4B2E;
  --navy-deep:#3A2117;
  --burgundy:var(--oxblood);
  --burgundy-2:#69232A;
  --gold:#B58A46;
  --gold-soft:#DDC89D;
  --display:'Iowan Old Style','Baskerville','Times New Roman',Georgia,serif;
  --body:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif;
  --shadow:0 24px 60px -34px rgba(73,42,24,.42),0 10px 28px -20px rgba(132,47,54,.22);
}
body{
  background:
    radial-gradient(circle at 12% 8%,rgba(220,201,164,.26),transparent 26rem),
    radial-gradient(circle at 94% 18%,rgba(132,47,54,.08),transparent 22rem),
    var(--ivory);
  color:var(--ink); font-family:var(--body);
}
h1,h2,h3,h4,.brand{color:var(--espresso);font-family:var(--display)}
header.site{background:rgba(250,246,238,.9);border-bottom-color:rgba(181,138,70,.34);box-shadow:0 6px 30px rgba(66,41,25,.05)}
.brand,.brand span,.nav-toggle svg{color:var(--espresso)}
.nav-links a::after{background:linear-gradient(90deg,var(--oxblood),var(--gold))}
.nav-links a.active{color:var(--oxblood)}
.btn{border-radius:999px;box-shadow:0 7px 18px -14px rgba(0,0,0,.55);letter-spacing:.015em}
.btn-primary{background:linear-gradient(135deg,var(--oxblood),var(--oxblood-bright));color:white}
.btn-primary:hover{background:linear-gradient(135deg,#70232a,#a73d45);box-shadow:0 14px 28px -17px rgba(132,47,54,.75)}
.btn-outline{color:var(--espresso);border-color:rgba(91,51,31,.62);background:rgba(255,255,255,.35)}
.btn-outline:hover{background:var(--espresso);color:var(--ivory);border-color:var(--espresso)}
.btn-gold{color:var(--forest);border-color:var(--gold);background:rgba(255,255,255,.24)}
.btn-gold:hover{background:var(--gold);color:#2d241b}
.section{position:relative}
.section:nth-of-type(even)::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(220,201,164,.12),rgba(255,255,255,0) 48%,rgba(23,75,43,.045));pointer-events:none;z-index:-1}
.card,.book-card,.character-card,.excerpt-card{box-shadow:var(--shadow);border-color:rgba(181,138,70,.3)!important}
footer.site{background:linear-gradient(135deg,#382118 0%,#502919 44%,#2a3b2c 130%);color:var(--ivory-2)}
footer.site h3{color:#E5CCA0}
.footer-bottom{border-top-color:rgba(229,204,160,.22)}

/* Amazon conversion block: neutral treatment, no imitation of the Amazon logo. */
.retail-cta{margin:1.15rem 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem}
.retail-kicker{font-size:.78rem;font-weight:800;letter-spacing:.18em;color:var(--oxblood);text-transform:uppercase}
.amazon-link{display:inline-flex;align-items:center;gap:.75rem;padding:.72rem 1rem;border:1px solid rgba(38,33,29,.18);border-radius:8px;background:#fff;color:#171717;text-decoration:none;box-shadow:0 10px 24px -18px rgba(0,0,0,.55);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.amazon-link:hover{transform:translateY(-2px);box-shadow:0 16px 30px -18px rgba(0,0,0,.55);border-color:rgba(181,138,70,.6)}
.amazon-mark{font:700 .98rem/1 Arial,sans-serif;letter-spacing:.01em}.amazon-mark small{display:block;font-weight:400;font-size:.65rem;color:#665b50;margin-top:.25rem}
.coming-soon-cta{display:inline-flex;padding:.65rem 1rem;border-radius:999px;background:linear-gradient(135deg,rgba(23,75,43,.12),rgba(181,138,70,.18));color:var(--forest);font-weight:800;letter-spacing:.14em;font-size:.78rem;border:1px solid rgba(23,75,43,.2)}

/* Motion — restrained and accessibility-aware */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.3,1)}
.reveal.from-left{transform:translateX(-34px)}
.reveal.from-right{transform:translateX(34px)}
.reveal.is-visible{opacity:1;transform:none}
[data-stagger] > *{transition-delay:calc(var(--i,0) * 80ms)}
.motion-float{transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease}
.motion-float:hover{transform:translateY(-6px) rotate(.15deg);box-shadow:0 30px 66px -34px rgba(91,51,31,.55)}
.parallax-soft{will-change:transform}

/* Accessibility */
.skip-link{position:fixed;left:1rem;top:-5rem;z-index:9999;background:#fff;color:#111;padding:.75rem 1rem;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.2)}
.skip-link:focus{top:1rem}
:focus-visible{outline:3px solid #C68038;outline-offset:4px}
img[loading="lazy"]{content-visibility:auto}
.legal-placeholder{max-width:760px;margin:0 auto;padding:80px 28px 40px}
.legal-placeholder .notice{padding:1rem 1.2rem;border-left:4px solid var(--gold);background:rgba(220,201,164,.25)}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;font-size:.84rem}
.footer-trademark{max-width:70ch;font-size:.76rem;opacity:.68;margin-top:12px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.parallax-soft{transform:none!important}
}

/* ========================================================================
   SITE V2.1 — desktop cohesion + conversion CTA contrast
   Based on first Netlify visual review, 16 Sep 2026.
   ======================================================================== */
:root{ --max:1060px; }

/* Keep text and imagery visually related on wide screens without making the
   composition feel cramped. */
.hero{padding:56px 0 72px}
.hero-grid{
  grid-template-columns:minmax(0,1.02fr) minmax(300px,.98fr);
  gap:42px;
}
.hero-copy{max-width:570px}
.hero-cover img{width:min(330px,100%)}
.section,.shelf-section{padding-top:78px;padding-bottom:78px}
.two-col{gap:44px}
.newsletter-grid{gap:40px}

/* Strong, elegant contrast for the retail states on dark hero panels. */
.hero.on-dark .retail-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:.52rem .82rem;
  border-radius:999px;
  color:#FFF4D8;
  background:linear-gradient(135deg,rgba(181,138,70,.30),rgba(132,47,54,.28));
  border:1px solid rgba(229,204,160,.56);
  text-shadow:0 1px 0 rgba(0,0,0,.16);
}
.hero.on-dark .amazon-link{
  background:linear-gradient(180deg,#FFFFFF,#FBF6EC);
  color:#201B17;
  border-color:rgba(229,204,160,.70);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.72);
}
.hero.on-dark .amazon-link:hover{
  border-color:#E5CCA0;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.78);
}
.hero.on-dark .coming-soon-cta{
  color:#3A2518;
  background:linear-gradient(135deg,#F5E6BE,#DDBE79);
  border:1px solid rgba(255,244,216,.88);
  box-shadow:0 10px 24px -17px rgba(0,0,0,.68);
  text-shadow:none;
}
.hero.on-dark .retail-cta small{
  color:rgba(255,248,232,.78);
  max-width:34ch;
  line-height:1.45;
}

@media (min-width:861px){
  .hero-copy .lede{max-width:48ch}
  .hero-cover{justify-self:center}
}

@media (max-width:860px){
  .hero{padding:42px 0 58px}
  .hero-grid{gap:30px}
  .hero-copy{max-width:none}
  .section,.shelf-section{padding-top:64px;padding-bottom:64px}
}

/* ========================================================================
   SITE V2.2 — stronger commercial CTAs, tighter desktop rhythm,
   smaller series covers and compact Kit forms. 16 Sep 2026.
   ======================================================================== */

/* Commercial CTA states: unmistakable, high-contrast and large enough to
   function as conversion controls rather than decorative labels. */
.hero.on-dark .retail-cta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.72rem;
  margin-top:1.55rem;
}
.hero.on-dark .retail-kicker,
.hero.on-dark .coming-soon-cta{
  font-size:1rem;
  line-height:1;
  letter-spacing:.16em;
  font-weight:800;
  padding:.82rem 1.25rem;
  min-height:44px;
  border-radius:999px;
}
.hero.on-dark .retail-kicker{
  color:#fffaf0;
  background:linear-gradient(135deg,#8d3139,#6f222b);
  border:1px solid rgba(255,245,225,.78);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.88);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.hero.on-dark .coming-soon-cta{
  color:#342216;
  background:linear-gradient(135deg,#f6e8bf,#dfbf76);
  border:1px solid rgba(255,250,235,.95);
  box-shadow:0 12px 26px -16px rgba(0,0,0,.82);
}
.hero.on-dark .amazon-link{
  min-height:58px;
  padding:.9rem 1.2rem;
  font-size:1.02rem;
  border-radius:10px;
}
.hero.on-dark .amazon-mark{
  font-size:1.02rem;
  font-weight:800;
}
.hero.on-dark .amazon-mark small{
  display:block;
  margin-top:.18rem;
  font-size:.72rem;
  font-weight:500;
  opacity:.72;
}

/* Slightly tighter hero composition on desktop. */
@media (min-width:861px){
  .hero-grid{
    grid-template-columns:minmax(0,1.04fr) minmax(300px,.96fr);
    gap:34px;
  }
  .hero-cover{transform:translateX(-10px)}
}

/* Books page: covers should read as books, not full-width posters. */
.shelf{
  grid-template-columns:repeat(2,minmax(0,320px));
  justify-content:center;
  align-items:start;
  gap:76px;
}
.book-card{
  width:100%;
  max-width:320px;
  justify-self:center;
}
.book-card img{
  width:100%;
  height:auto;
}
@media (max-width:760px){
  .shelf{
    grid-template-columns:minmax(0,290px);
    gap:44px;
  }
  .book-card{max-width:290px}
}

/* Kit embeds: compact, deliberate lead-capture module rather than a large
   page-within-a-page. These !important rules intentionally override Kit's
   generated inline stylesheet. */
.kit-embed-wrap{
  max-width:620px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"]{
  max-width:620px !important;
  width:100% !important;
  box-shadow:0 22px 50px -28px rgba(32,24,18,.42) !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] [data-style="full"]{
  grid-template-columns:1.02fr .98fr !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-column{
  padding:24px !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-header{
  margin-bottom:12px !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-subheader{
  margin:10px 0 !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-image{
  display:flex !important;
  justify-content:center !important;
  margin-top:10px !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-image img{
  width:100% !important;
  max-width:205px !important;
  height:auto !important;
  margin:0 auto !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-field{
  margin-bottom:10px !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-input,
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-submit{
  min-height:44px !important;
}
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-guarantee{
  margin-bottom:8px !important;
}
@media (max-width:640px){
  .kit-embed-wrap{max-width:100% !important}
  .kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] [data-style="full"]{
    display:block !important;
  }
  .kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-column{
    padding:20px !important;
  }
  .kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"] .formkit-image img{
    max-width:180px !important;
  }
}


/* ========================================================================
   SITE V2.3 — editorial CTA refinement, homepage balance, and compact signup
   16 Sep 2026.
   ======================================================================== */
:root{ --cta-blue:#315C92; --cta-blue-light:#75A4E5; --cta-blue-deep:#1F4270; }

/* Homepage hero: give the cover more breathing room and push it slightly right. */
@media (min-width: 861px){
  .home-hero .hero-grid{
    grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr);
    gap:58px;
  }
  .home-hero .hero-copy{max-width:520px;}
  .home-hero .hero-cover{justify-self:end; transform:translateX(22px);}
  .home-hero .hero-cover img{width:min(350px,100%);}
}

/* Homepage author block: larger portrait and denser balance. */
.home-author-grid{grid-template-columns:360px 1fr; gap:48px;}
.home-author-photo{width:320px !important; height:320px !important; justify-self:center;}
@media (max-width: 860px){
  .home-author-grid{grid-template-columns:1fr;}
  .home-author-photo{width:240px !important; height:240px !important; margin:0 auto 10px;}
}

/* Free-form commercial CTAs with official Amazon mark underneath. */
.freeform-cta{margin-top:1.15rem; display:flex; flex-direction:column; align-items:flex-start; gap:.7rem;}
.freeform-cta.centered{align-items:center; text-align:center;}
.cta-wordmark{
  display:inline-block;
  font-family:var(--body);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.18em;
  line-height:1;
  font-size:clamp(1.05rem,2vw,1.38rem);
  color:var(--cta-blue-light);
  text-shadow:0 1px 0 rgba(255,255,255,.22), 0 10px 18px rgba(0,0,0,.30);
}
.cta-wordmark.order-now, .cta-wordmark.coming-soon{
  background:linear-gradient(180deg,#AECBFF 0%, #6D94D1 28%, #315C92 62%, #23446E 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero.on-dark .cta-wordmark{filter:drop-shadow(0 6px 14px rgba(0,0,0,.34));}
.amazon-logo-link{display:inline-flex; align-items:center; justify-content:center; text-decoration:none;}
.amazon-logo-link img{width:168px; height:auto; display:block; filter:drop-shadow(0 10px 16px rgba(0,0,0,.20));}
.hero.on-dark .amazon-logo-link:hover img{transform:translateY(-1px);}
.hero.on-dark .amazon-logo-link img{transition:transform .18s ease;}

/* Books page: reduce oversized covers. */
.shelf{grid-template-columns:repeat(2,minmax(0,250px)); gap:64px;}
.book-card{max-width:250px;}
@media (max-width:760px){
  .shelf{grid-template-columns:minmax(0,250px); gap:38px;}
  .book-card{max-width:250px;}
}

/* Reader Circle title — deliberate two-line lockup. */
.reader-circle-title{max-width:14ch;}
.reader-circle-title span{display:block;}
.reader-circle-title span + span{margin-left:3.6rem;}
.reader-circle-hero .lede{max-width:52ch;}
@media (max-width: 760px){
  .reader-circle-title{max-width:none;}
  .reader-circle-title span + span{margin-left:0;}
}

/* Compact horizontal signup form replacing the oversized embed. */
.compact-signup-wrap{max-width:920px !important;}
.mini-signup-shell{
  max-width:920px;
  margin:0 auto;
  padding:26px 28px 20px;
  background:rgba(255,253,248,.96);
  color:var(--ink);
  border:1px solid rgba(181,138,70,.28);
  border-radius:18px;
  box-shadow:0 24px 54px -34px rgba(40,27,20,.40);
}
.mini-signup-copy h2{font-size:clamp(1.55rem,2.5vw,2rem); margin-bottom:.35em;}
.mini-signup-copy p{max-width:62ch; color:var(--ink-soft); margin-bottom:1rem;}
.mini-signup-meta{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-bottom:.55rem;}
.mini-signup-kicker{font-size:.8rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--burgundy);}
.mini-signup-dot{color:var(--gold); font-weight:700;}
.mini-signup-meta-text{font-size:.92rem; color:var(--ink-soft);}
.mini-signup-form{display:grid; grid-template-columns:1fr 1.2fr auto; gap:12px; align-items:end;}
.mini-field{display:flex; flex-direction:column; gap:6px;}
.mini-field label{font-size:.8rem; font-weight:700; letter-spacing:.04em; color:var(--navy-deep);}
.mini-field input{
  width:100%;
  min-height:48px;
  padding:0 15px;
  border-radius:12px;
  border:1px solid rgba(91,51,31,.20);
  background:#fff;
  font:inherit; color:var(--ink);
}
.mini-field input:focus{border-color:var(--cta-blue); outline:none; box-shadow:0 0 0 3px rgba(49,92,146,.14);}
.mini-submit-wrap{display:flex; align-items:flex-end;}
.mini-submit{min-height:48px; white-space:nowrap;}
.mini-signup-note{font-size:.84rem; color:var(--ink-soft); margin:10px 0 0;}
@media (max-width: 840px){
  .mini-signup-form{grid-template-columns:1fr;}
  .mini-submit-wrap{display:block;}
  .mini-submit{width:100%; justify-content:center;}
}

/* Slightly tighter spacing for Book 2 hero buttons so the free CTA sits neatly below. */
#newsletter .compact-signup-wrap{max-width:900px !important;}

/* ========================================================================
   SITE V2.4 — desktop CTA cleanup, Reader Circle title fix,
   transparent Amazon mark, and mobile homepage cover visibility.
   16 Sep 2026.
   ======================================================================== */

/* Make the compact signup headline clearly visible on the pale card. */
.newsletter .mini-signup-copy h2,
.mini-signup-copy h2{
  color: var(--cta-blue) !important;
}

/* Reader Circle hero: exactly two deliberate lines on desktop. */
.reader-circle-title{
  max-width:none;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.02em;
}
.reader-circle-title span{
  display:block;
  white-space:nowrap;
}
.reader-circle-title span + span{
  margin-left:4rem;
}
@media (max-width: 760px){
  .reader-circle-title{
    display:block;
  }
  .reader-circle-title span{
    white-space:normal;
  }
  .reader-circle-title span + span{
    margin-left:0;
  }
}

/* Editorial CTAs: solid blue, no gradient, same proportions on Book 1 and Book 2. */
.freeform-cta{
  margin-top:1.15rem;
  gap:.62rem;
}
.freeform-cta.centered{
  width:100%;
  align-items:center;
  text-align:center;
}
.cta-wordmark{
  display:inline-block;
  min-width:11.5rem;
  text-align:center;
  font-family: var(--body);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1;
  font-size: clamp(1.05rem, 2vw, 1.38rem);
  color: #6E9FDF;
  background:none !important;
  -webkit-background-clip:initial !important;
  background-clip:initial !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.12), 0 8px 16px rgba(0,0,0,.26);
}
.cta-wordmark.order-now,
.cta-wordmark.coming-soon{
  color:#79A6E5 !important;
  background:none !important;
}
.hero.on-dark .cta-wordmark{
  filter:none;
}
.amazon-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.amazon-logo-link img{
  width:176px;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.18));
}
.freeform-cta.centered .amazon-logo-link,
.freeform-cta.centered .cta-wordmark{
  margin-left:auto;
  margin-right:auto;
}

/* Ensure the Book 2 free CTA sits exactly under the button pair, centered. */
.hero-copy .hero-actions + .freeform-cta.centered{
  max-width: 23rem;
}

/* Mobile homepage: bring the cover back into the first section and make the layout lighter. */
@media (max-width: 860px){
  .home-hero h1{
    font-size: clamp(2.85rem, 9vw, 4.25rem);
    line-height: 1.04;
    margin-bottom: .5em;
  }
  .home-hero .hero-grid{
    gap: 22px;
  }
  .home-hero .hero-copy{
    order: 1;
  }
  .home-hero .hero-cover{
    order: 2;
    justify-self: center;
    transform: none;
    margin-top: 2px;
  }
  .home-hero .hero-cover img{
    width: min(230px, 62vw);
  }
  .home-hero .hero-cover .ribbon{
    margin-bottom: 10px;
    white-space: nowrap;
  }
}

/* ========================================================================
   SITE V2.5 — transparent Amazon mark, clean backgrounds,
   no halo effects, cleaner section joins, and safer mobile hero.
   16 Sep 2026.
   ======================================================================== */

/* Overall page background: remove decorative radial halos. */
body{
  background: var(--ivory) !important;
}
.section:nth-of-type(even)::before,
.hero.on-dark::before,
.shelf-section.on-dark::before,
.newsletter::before,
footer.site::before,
.banner-link::after{
  display:none !important;
}

/* Keep dark sections clean and even. */
.hero.on-dark,
.shelf-section.on-dark,
.newsletter,
footer.site{
  background-image:none !important;
}

/* Remove the soft halo / glow treatment around images and forms. */
.hero-cover img,
.book-card img,
.author-hero img,
.home-author-photo,
.magnet-showcase img,
.character-card,
.mini-signup-shell,
.kit-embed-wrap .formkit-form[data-uid="82bbbe6e33"],
.modal,
.book-card,
.card,
.excerpt-card{
  box-shadow:none !important;
}

/* Covers and showcase cards should feel crisp, not glowing. */
.hero-cover .ribbon,
.amazon-link,
.amazon-logo-link img{
  box-shadow:none !important;
  filter:none !important;
}

/* Official Amazon logo: transparent, no tile/box, no background. */
.amazon-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.amazon-logo-link img{
  width:170px !important;
  height:auto;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.hero.on-dark .amazon-logo-link:hover img{
  transform:none !important;
}

/* Editorial CTA treatment: solid, readable blue without gradients. */
.cta-wordmark,
.cta-wordmark.order-now,
.cta-wordmark.coming-soon{
  min-width:12rem;
  font-size:clamp(1.04rem,1.9vw,1.34rem);
  line-height:1;
  letter-spacing:.17em;
  color:#4F86CB !important;
  background:none !important;
  text-shadow:none !important;
}
.freeform-cta{
  gap:.55rem;
}
.freeform-cta.centered{
  align-items:center;
  text-align:center;
}

/* Clean up the Reader Circle hero title: force two deliberate lines. */
.reader-circle-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:.08em !important;
  max-width:none !important;
  font-size:clamp(2.55rem,4.1vw,4.15rem) !important;
  line-height:1.02 !important;
}
.reader-circle-title span{
  display:block !important;
  white-space:nowrap !important;
}
.reader-circle-title span + span{
  margin-left:3.25rem !important;
}

/* Reader Circle sign-up card: keep it clean, flat and readable. */
.newsletter .mini-signup-copy h2,
.mini-signup-copy h2{
  color:var(--cta-blue) !important;
}
.mini-signup-shell{
  background:#FFFDF8 !important;
  border:1px solid rgba(181,138,70,.28) !important;
}

/* Remove the visual overlap/band between excerpt and the following section. */
.excerpt-fade{
  display:none !important;
}
.excerpt-fade + section.section.tint{
  padding-top:52px !important;
  margin-top:0 !important;
}

/* Reader Circle middle section: remove the impression of overlap. */
.magnet-showcase{
  margin:0 !important;
  padding:48px !important;
}
section.section.tint:has(.magnet-showcase){
  padding-top:36px !important;
  padding-bottom:36px !important;
}
section.section.tint:has(.magnet-showcase) + .newsletter{
  margin-top:0 !important;
}

/* Homepage author block: larger portrait still, but with no glow. */
.home-author-photo{
  width:340px !important;
  height:340px !important;
}

/* Homepage hero on mobile: reduce text slightly so the cover remains visible
   within the first section and the ribbon no longer floats awkwardly alone. */
@media (max-width: 860px){
  .home-hero{
    padding:34px 0 46px !important;
  }
  .home-hero .hero-grid{
    display:flex;
    flex-direction:column;
    gap:18px !important;
  }
  .home-hero .hero-copy{
    order:1;
  }
  .home-hero h1{
    font-size:clamp(2.25rem,10.4vw,3.5rem) !important;
    line-height:1.03 !important;
    margin-bottom:.42em !important;
  }
  .home-hero .lede{
    font-size:1rem;
    max-width:26ch;
    margin-bottom:0;
  }
  .home-hero .hero-actions{
    margin-top:22px;
    gap:12px;
  }
  .home-hero .hero-cover{
    order:2;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    margin-top:6px;
  }
  .home-hero .hero-cover a{
    display:block;
  }
  .home-hero .hero-cover .ribbon{
    margin:0 0 12px 0 !important;
    align-self:center;
    white-space:nowrap;
  }
  .home-hero .hero-cover img{
    width:min(190px,50vw) !important;
    max-width:190px !important;
    margin:0 auto;
  }
}

/* Reader Circle title on small screens: two clean lines, not accidental wraps. */
@media (max-width: 760px){
  .reader-circle-title{
    font-size:clamp(2.15rem,9.2vw,3rem) !important;
    gap:.12em !important;
  }
  .reader-circle-title span{
    white-space:normal !important;
  }
  .reader-circle-title span + span{
    margin-left:1.2rem !important;
  }
  .home-author-photo{
    width:250px !important;
    height:250px !important;
  }
  .magnet-showcase{
    padding:32px 24px !important;
  }
}

/* ========================================================================
   SITE V2.6 — FINAL STABILITY PATCH
   Targeted fixes only: Amazon mark, footer, and Book 2 duplicate cover.
   All other V2.5 layout and styling intentionally preserved.
   16 Sep 2026.
   ======================================================================== */

/* Restore a stable dark footer after the background cleanup in V2.5. */
footer.site{
  background:#382118 !important;
  color:var(--ivory-2) !important;
  background-image:none !important;
}
footer.site h3{
  color:#E5CCA0 !important;
}
footer.site .footer-grid p{
  color:rgba(250,246,238,.78) !important;
}
footer.site a{
  color:var(--ivory-2) !important;
}
footer.site a:hover{
  color:#E5CCA0 !important;
}
footer.site .footer-bottom,
footer.site .footer-trademark{
  color:rgba(250,246,238,.62) !important;
}
footer.site .footer-bottom{
  border-top-color:rgba(229,204,160,.24) !important;
}

/* New clean Amazon PNG uses a new filename to bypass the previous cached asset. */
.amazon-logo-link,
.amazon-logo-link img{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
}
.amazon-logo-link img{
  width:170px !important;
  height:auto !important;
  image-rendering:auto !important;
}

/* Book 2 story section: one elegant text column, no repeated cover. */
.book2-story-section .wrap{
  max-width:940px;
}
.book2-story-copy{
  max-width:860px;
  margin:0 auto;
}
.book2-story-copy h2{
  max-width:22ch;
}
.book2-story-copy p{
  max-width:72ch;
}

/* ========================================================================
   SITE V2.7 — FINAL COLOR + MOBILE HERO PATCH
   Targeted changes only: favicon-blue footer/green areas, compact footer,
   and visible Book 1 / Book 2 covers on mobile. All other styling preserved.
   16 Sep 2026.
   ======================================================================== */

/* Exact blue sampled from the JD favicon / monogram. */
:root{
  --jd-blue:#315C92;
  --jd-blue-deep:#274B78;
}

/* Replace the remaining green feature areas with the John Deda brand blue. */
.shelf-section.on-dark,
.magnet-showcase{
  background:var(--jd-blue) !important;
  background-image:none !important;
}
.shelf-section.on-dark .btn-outline:hover{
  color:var(--jd-blue-deep) !important;
}

/* Compact brand-blue footer: approximately one third of the previous vertical area. */
footer.site{
  background:var(--jd-blue) !important;
  background-image:none !important;
  color:#F7F3EA !important;
  margin-top:30px !important;
}
footer.site .wrap{
  padding-top:18px !important;
  padding-bottom:10px !important;
}
footer.site .footer-grid{
  gap:22px !important;
}
footer.site h3{
  color:#FFFFFF !important;
  font-size:.95rem !important;
  margin-bottom:.28rem !important;
}
footer.site .footer-grid p{
  color:rgba(255,255,255,.78) !important;
  font-size:.76rem !important;
  line-height:1.4 !important;
  margin-bottom:.35rem !important;
}
footer.site .footer-links{
  gap:4px !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
}
footer.site a{
  color:#F7F3EA !important;
}
footer.site a:hover{
  color:#FFFFFF !important;
}
footer.site .social-row{
  margin-top:5px !important;
  gap:10px !important;
}
footer.site .footer-bottom{
  border-top-color:rgba(255,255,255,.22) !important;
  margin-top:10px !important;
  padding-top:7px !important;
  padding-bottom:0 !important;
  font-size:.68rem !important;
  color:rgba(255,255,255,.68) !important;
}
footer.site .footer-legal{
  gap:12px !important;
  margin-top:3px !important;
  font-size:.68rem !important;
}
footer.site .footer-trademark{
  margin-top:3px !important;
  margin-bottom:0 !important;
  font-size:.62rem !important;
  line-height:1.3 !important;
  color:rgba(255,255,255,.58) !important;
}

/* Mobile Book 1 / Book 2 hero: use the same stable stacked logic as Home.
   Text stays first, cover follows within the same hero, always visible. */
@media (max-width:860px){
  .hero:not(.home-hero) .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:22px !important;
  }
  .hero:not(.home-hero) .hero-copy{
    order:1 !important;
    width:100% !important;
  }
  .hero:not(.home-hero) .hero-cover{
    order:2 !important;
    display:flex !important;
    width:100% !important;
    justify-content:center !important;
    align-items:center !important;
    transform:none !important;
    margin-top:4px !important;
  }
  .hero:not(.home-hero) .hero-cover img{
    display:block !important;
    width:min(210px,54vw) !important;
    max-width:210px !important;
    height:auto !important;
    margin:0 auto !important;
  }
}

@media (max-width:700px){
  footer.site .footer-grid{
    gap:12px !important;
  }
  footer.site .wrap{
    padding-top:15px !important;
    padding-bottom:8px !important;
  }
}