/* ---------- Tokens ---------- */
:root{
  --cream:        #FAF3EA;
  --cream-deep:   #F3E9DD;
  --blush:        #F3E2E1;
  --plum:         #4A1E3C;
  --plum-soft:    #6E3A5A;
  --dusty-pink:   #C48A93;
  --soft-blue:    #A9C3D6;
  --pale-blue:    #E9F1F6;
  --navy-deep:    #1E3A52;
  --wood:         #A9754C;
  --leaf:         #6E8B62;
  --sage:         #DEE3CC;
  --bougainvillea:#C23566;
  --divider:      rgba(74,30,60,0.18);

  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --script: 'Caveat', cursive;
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  /* Disables the browser's automatic scroll compensation when content above
     the viewport changes size after first paint (web fonts swapping in,
     an image finishing its load). A fresh page always starts at the top
     here, so that "helpful" adjustment only ever produces the bug where a
     new page lands partway down — right where the content above happened
     to finish growing (e.g. the end of a "Sneak Peek" section). */
  overflow-anchor: none;
  /* Chrome on Android (and Samsung Internet, which is Chromium-based) can
     silently boost body-text font sizes on pages it judges "hard to read"
     — Safari on iPhone never does this. Several sections on this site size
     themselves precisely around a known font size (a fixed aspect-ratio
     box sized only for its own text, a mobile band pulled up with a
     negative margin to land exactly on a photo's blank area) — a few
     unrequested extra pixels of boosted text is what was pushing that text
     tall enough to spill into the next section on Samsung phones while
     the identical page looked fine on iPhone. Pinning this to 100% stops
     the boost so every phone renders text at the size the CSS actually asks for. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin:0;
  background: var(--cream);
  color: var(--plum);
  font-family: var(--serif);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
}

h1,h2{
  font-family: var(--display);
  color: var(--plum);
  margin: 0;
  font-weight: 600;
  line-height: 1.05;
  text-wrap: balance;
}

/* Shared type scale: keeps every section heading / body / link the
   same size so the page reads as one system rather than section-by-section.
   These are the DESKTOP sizes (>860px) — mobile freezes its own values
   inside the max-width:860px query below, so tuning these never moves mobile. */
h2{
  font-size: clamp(2.1rem, 3.4vw, 3.9rem);
}
.section-body{
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  color: var(--plum-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

p{ margin: 0; }

a{ color: inherit; text-decoration: none; }

.text-link{
  display:inline-block;
  margin-top: 18px;
  font-size: clamp(0.9rem, 1vw, 1.05rem);
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--plum);
  padding-bottom: 2px;
  opacity: 1;
  transition: opacity .2s ease, border-color .2s ease;
}
.text-link:hover{ opacity: .65; }

/* ---------- Header ---------- */
.site-header{
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--divider);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}
.wordmark{
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--plum);
  letter-spacing: 0.01em;
}
.main-nav{
  display:flex;
  gap: 34px;
}
.main-nav a{
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-soft);
  transition: color .2s ease;
}
.main-nav a:hover{ color: var(--bougainvillea); }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  width: 100%;
  background: var(--cream);
}
.hero-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 1900 / 845; /* image ratio + a little buffer for parallax travel */
}
.hero-img{
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  display:block;
  transform: translateY(-50%);
  will-change: transform;
}
.hero-copy{
  position: absolute;
  left: 13%;
  top: 16%;
  max-width: 46%; /* desktop only — wide enough that the tagline doesn't break awkwardly; mobile sets its own max-width below */
  z-index: 2;
}
.hero-copy h1{
  font-family: var(--display);
  font-size: clamp(1.8rem, 7.2vw, 6.4rem);
  margin-bottom: clamp(10px, 2.2vw, 24px);
  line-height: 1.08;
}
.hero-copy .tagline{
  font-size: clamp(0.85rem, 3vw, 1.4rem);
  font-style: italic;
  color: var(--plum-soft);
  line-height: 1.4;
}

/* ---------- Books ---------- */
.books{
  aspect-ratio: 2.667; /* same height rhythm as the Letters/Coaching image bands */
  display:flex;
  align-items:center;
  background: var(--pale-blue);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}
.books > .wrap,
.about > .wrap{
  width: 100%;
}
.section-head{
  max-width: 620px;
}
.section-head h2{ margin-bottom: 18px; }
/* ---------- Letters ---------- */
.letters{
  position: relative;
}
.letters-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2.667;
}
.letters-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  object-position: 50% center;
  opacity: 0.8;
}
.letters-copy{
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  max-width: 44%;
  z-index: 2;
}
.letters-copy h2{ margin-bottom: 14px; }
.letters-copy .text-link{ margin-top: 8px; }

/* ---------- About ---------- */
.about{
  aspect-ratio: 2.667; /* same height rhythm as the Letters/Coaching image bands */
  display:flex;
  align-items:center;
  background: var(--blush);
}
.about h2{ margin-bottom: 18px; }

/* ---------- Coaching ---------- */
.coaching{
  position: relative;
}
.coaching-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2.4; /* crop ~10% off the left so the second person sits further into frame */
}
.coaching-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  object-position: 100% center;
  opacity: 0.8;
}
.coaching-copy{
  position: absolute;
  left: 6%;
  top: 10%; /* desktop only — sits above the plant instead of behind it; mobile freezes its own top/transform below */
  transform: none;
  max-width: 33%;
  z-index: 2;
}
.coaching-copy h2{ margin-bottom: 14px; }
.coaching-copy .text-link{ margin-top: 8px; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--cream-deep);
  border-top: 1px solid var(--divider);
  padding: 48px 0;
}
.footer-inner{
  display:flex;
  flex-wrap: wrap;
  align-items:center;
  justify-content:space-between;
  gap: 24px;
}
.footer-brand .wordmark{ font-size: 1.15rem; }
.footer-tag{
  font-size: 0.85rem;
  color: var(--plum-soft);
  margin-top: 4px;
  font-style: italic;
}
.footer-nav{
  display:flex;
  gap: 24px;
}
.footer-nav a{
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum-soft);
}
.footer-nav a:hover{ color: var(--bougainvillea); }
.footer-social{
  display:flex;
  gap: 16px;
}
.footer-social svg{
  width: 20px;
  height: 20px;
  color: var(--plum-soft);
  transition: color .2s ease;
}
.footer-social a:hover svg{ color: var(--bougainvillea); }
.footer-flourish{
  font-family: var(--script);
  font-size: 1.3rem;
  color: var(--plum-soft);
}
.footer-flourish .heart{ color: var(--bougainvillea); }

/* ---------- Books page ---------- */
.page-header{
  padding: 72px 0 56px;
  background: var(--blush); /* same as the About section on the home page */
}
.page-header h1{
  font-size: clamp(2.6rem, 5vw, 4rem);
  margin-bottom: 10px;
}
.page-header .subtitle{
  font-family: var(--script);
  font-size: 1.6rem;
  color: var(--bougainvillea);
  margin-bottom: 20px;
  line-height: 1.2;
}
.page-header .section-body{ max-width: 620px; }

.book-band{
  position: relative;
  border-top: 1px solid var(--divider);
  overflow: hidden; /* safety net: text is never allowed to spill into the next section */
}
.book-band.fantasy{ background: var(--sage); }
.book-band.romcom{ background: var(--blush); }
.book-band.womensfiction{ background: var(--pale-blue); }
.book-band.memoir{ background: var(--cream-deep); border-bottom: 1px solid var(--divider); }

/* image fills the whole section, exactly like Letters/Coaching on the home page */
.book-media{
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 2.4; /* taller than the source image (2.75) — this page carries far more copy than the home overlays, so the band needs more height for it */
}
.book-media picture{ display: contents; }
.book-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* the band is taller than the source photo, so cover crops horizontally —
   crop away from the blank (text) side and keep the subject fully visible */
.book-band.fantasy .book-media img,
.book-band.womensfiction .book-media img{ object-position: 100% center; }
.book-band.romcom .book-media img,
.book-band.memoir .book-media img{ object-position: 0% center; }

/* text sits in the image's blank space */
.book-copy{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  max-width: 40%;
  z-index: 2;
}
.book-copy.side-left{ left: 6%; }
.book-copy.side-right{ right: 6%; }
/* both photos crop tighter against their subject once scaled to this
   band's aspect ratio, so their columns stay narrower to clear the books/map */
.book-band.fantasy .book-copy{ max-width: 24%; }
.book-band.womensfiction .book-copy{ max-width: 32%; }
.book-copy .section-body{
  font-size: clamp(0.85rem, 1vw, 1.05rem);
  line-height: 1.45;
}

.book-eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum-soft);
  margin-bottom: 10px;
}
.book-title-link{
  color: var(--plum);
  transition: color .2s ease;
}
.book-title-link:hover{ color: var(--bougainvillea); }

/* a book's own dedicated page uses a plain (non-link) h1 in the same slot,
   sized to match the h2 title it replaces so the band looks identical */
.book-title-solo{
  font-size: clamp(2.1rem, 3.4vw, 3.9rem);
}

.book-hook{
  font-family: var(--script);
  font-size: clamp(1.3rem, 1.8vw, 1.9rem);
  line-height: 1.25;
  margin: 10px 0 14px;
}
.book-band.fantasy .book-hook{ color: #43593B; }
.book-band.romcom .book-hook{ color: #8C4B5C; }
.book-band.womensfiction .book-hook{ color: #4C6A82; }
.book-band.memoir .book-hook{ color: #7A5636; }

/* memoir has no hook line under its title, so the heading needs its own
   breathing room before the body text starts */
.book-band.memoir .book-copy h2{ margin-bottom: 16px; }

.book-copy .section-body + .section-body{ margin-top: 12px; }
.book-note{
  font-style: italic;
  color: var(--plum-soft);
  font-size: 0.85rem;
  margin-top: 12px;
}

/* status tagline: same side as the text, first thing at the top of the column */
.book-status-badge{
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 15px;
  border-radius: 3px;
  font-style: italic;
  font-size: 0.7rem;
  color: var(--cream);
}
.book-band.fantasy .book-status-badge{ background: var(--leaf); }
.book-band.romcom .book-status-badge{ background: var(--dusty-pink); }
.book-band.womensfiction .book-status-badge{ background: #4C6A82; color: var(--cream); }
.book-band.memoir .book-status-badge{ background: var(--wood); }

/* a bolder variant of .book-note for the one-line punchlines that close out
   a book's teaser copy ("Obviously, this goes exactly according to plan.") */
.book-note-strong{
  font-style: normal;
  font-family: var(--display);
  font-weight: 600;
  color: var(--plum);
  font-size: clamp(1rem, 1.1vw, 1.15rem);
}

/* ---------- Story-behind-the-story (long-form making-of essay) ---------- */
/* A plain, article-style read rather than an image overlay — narrower
   measure than the rest of the page since it's paragraph after paragraph,
   with its own small type scale (h3, pull-quote, bold callout line) that
   nothing else on the page needs yet. */
h3{
  font-family: var(--display);
  color: var(--plum);
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  margin: 0;
}
.story-section{
  background: var(--cream);
  padding: 90px 0;
}
.story-wrap{
  max-width: 700px;
}
.story-eyebrow{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dusty-pink);
  margin-bottom: 12px;
}
.story-wrap h2{ margin-bottom: 34px; }
.story-wrap h3{ margin: 46px 0 18px; }
.story-wrap h3.story-subhead{
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--plum-soft);
}
.story-wrap .section-body{ margin-bottom: 20px; }
.story-quote{
  font-family: var(--script);
  font-size: clamp(1.7rem, 2.8vw, 2.4rem);
  line-height: 1.25;
  color: var(--bougainvillea);
  text-align: center;
  max-width: 480px;
  margin: 36px auto;
}
.story-callout{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  color: var(--plum);
  text-wrap: balance;
  margin: 30px 0;
}
.story-blockquote{
  border-left: 3px solid var(--bougainvillea);
  padding-left: 20px;
  margin: 30px 0;
  font-family: var(--display);
  font-weight: 600;
  color: var(--plum);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  text-wrap: balance;
}

/* A book detail page's "sneak peek" moment: a bold, saturated color field
   with white type, dropped in before the story-behind-the-story essay.
   Shared rules here; each book picks its own background color below. */
.sneak-peek-section{
  padding: 70px 0 56px;
}
.sneak-peek-tag{
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.sneak-peek-section .section-body,
.sneak-peek-section .book-note-strong{
  color: #fff;
}
.sneak-peek-section .book-note-strong{ margin: 8px 0; }

/* Ring Around the Finger's own page: a saturated-pink sneak-peek moment,
   then "the story behind the story" essay on a much paler pink field. */
.romcom-detail-intro{ background: var(--bougainvillea); }
.romcom-story{
  background: var(--blush);
  padding-top: 20px;
}

/* A Map for the Living's own page: a deep-navy sneak-peek moment, then
   the story-behind-the-story essay on the same pale blue used for the
   Women's Fiction band on the Books page. */
.wf-sneak-peek{ background: var(--navy-deep); }
.wf-story{ background: var(--pale-blue); }

/* ---------- About page ---------- */
.about-hero{
  padding: 90px 0 80px;
  background: var(--blush);
  overflow: hidden;
}
.about-hero .wrap{
  display: flex;
  align-items: center;
  gap: 64px;
}
.about-photo{
  flex: 0 0 48%;
  max-width: 540px;
}
/* white mat + soft shadow so the photo reads as a print set down on the
   page, echoing the script/handwritten touches used elsewhere on the site */
.about-photo-frame{
  display: block;
  background: #fff;
  padding: 14px 14px 34px;
  box-shadow: 0 26px 50px rgba(74,30,60,0.22), 0 6px 14px rgba(74,30,60,0.12);
  transform: rotate(-2.2deg);
}
.about-photo-frame img{
  display: block;
  width: 100%;
  height: auto;
}
.about-copy{ flex: 1; min-width: 0; }
.about-copy h1{
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  margin-bottom: 22px;
}
.about-copy .section-body + .section-body{ margin-top: 16px; }

.about-section{
  border-top: 1px solid var(--divider);
}
.about-section .story-wrap h2{ margin-bottom: 28px; }

/* ---------- Letters page ---------- */
.letters-page-hero{
  position: relative;
  border-top: 1px solid var(--divider);
  overflow: hidden;
  aspect-ratio: 2.4;
}
.letters-page-media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.letters-page-media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* mirrored so the image's own blank/quiet side lands on the left,
     opening up the right side for the headline (full opacity — no
     longer dimmed the way the home-page teaser is) */
  transform: scaleX(-1);
}
.letters-page-copy{
  position: absolute;
  top: 50%;
  right: 6%;
  transform: translateY(-50%);
  max-width: 42%;
  z-index: 2;
}
.letters-page-copy .story-eyebrow{ margin-bottom: 14px; }
.letters-page-copy h1{
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
}

.letters-subscribe{
  background: var(--plum);
}
.letters-subscribe h2,
.letters-subscribe .section-body,
.letters-subscribe .story-callout{
  color: #fff;
}

/* ---------- Coaching page ---------- */
/* Headline breaks into 3 explicit lines (see coaching.html), so it gets its
   own box sized/positioned to land in the clean wall area of the photo,
   lower and further right, clear of the plant/books below. */
.coaching-page-copy{
  max-width: 36%;
  top: 34%;
  right: 3%;
}
.coaching-page-copy h1{ font-size: clamp(1.3rem, 1.9vw, 1.9rem); }

.coaching-intro,
.coaching-cta{ background: var(--plum); }
.coaching-intro h2,
.coaching-intro .section-body,
.coaching-intro .story-callout,
.coaching-intro .story-eyebrow,
.coaching-cta h2,
.coaching-cta .section-body,
.coaching-cta .story-callout,
.coaching-cta .story-eyebrow{ color: #fff; }

.story-wrap ul{
  margin: 4px 0 24px 22px;
  padding: 0;
}
.story-wrap ul li{
  font-size: clamp(1.05rem, 1.35vw, 1.4rem);
  color: var(--plum-soft);
  line-height: 1.55;
  margin-bottom: 10px;
}
.coaching-cta .story-wrap ul li{ color: #fff; }
.story-wrap ul li::marker{ color: var(--bougainvillea); }

.cta-button{
  display: inline-block;
  margin-top: 26px;
  padding: 15px 32px;
  border-radius: 999px;
  background: var(--plum);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.cta-button:hover{ background: var(--bougainvillea); transform: translateY(-1px); }
.cta-button-invert{
  background: #fff;
  color: var(--plum);
}
.cta-button-invert:hover{ background: var(--cream); color: var(--plum); }

/* ---------- Book detail pages (e.g. Ring Around the Finger) ---------- */
.back-wrap{
  padding: 22px 0 0;
}
.back-link{
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--plum-soft);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.back-link:hover{
  color: var(--bougainvillea);
  border-color: var(--bougainvillea);
}
.back-link-bottom{
  margin-top: 50px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .wrap{ padding: 0 24px; }
  .story-section{ padding: 56px 0; }
  .story-wrap h3{ margin: 34px 0 14px; }
  .story-quote{ margin: 26px auto; }
  .header-inner{
    padding-top: 16px;
    padding-bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .main-nav{ gap: 16px; flex-wrap: wrap; }
  .main-nav a{ font-size: 0.68rem; }

  .hero{ display:flex; flex-direction: column; }
  .hero-media{ aspect-ratio: 1900 / 845; }
  .hero-img{ transform: translateY(-50%) !important; }
  .hero-copy{
    top: 6%;
    max-width: 40%;
  }
  .hero-copy h1{
    font-size: clamp(1.5rem, 7vw, 2.4rem);
    line-height: 1.02;
    margin-bottom: 6px;
  }
  .hero-copy .tagline{
    font-size: clamp(0.68rem, 2.6vw, 0.85rem);
    line-height: 1.3;
  }

  /* Freeze mobile's type scale at its pre-existing sizes: the desktop-only
     increase above (h2 / .section-body / .text-link) must never move mobile. */
  h2{ font-size: clamp(1.5rem, 3.1vw, 2.35rem); }
  .section-body{ font-size: clamp(0.85rem, 1.4vw, 0.96rem); line-height: 1.55; }
  .text-link{ font-size: clamp(0.74rem, 1.2vw, 0.85rem); }

  /* Text-only bands (no image inside) get a comfortable min-height instead
     of a hard aspect-ratio: their content must always be free to push the
     section taller if it needs to, so a few extra pixels of text (a larger
     system font, a translated string, Android's own font metrics) can
     never spill into the section that follows. Image bands below keep
     their aspect-ratio, since the image itself always matches it exactly. */
  .about, .books{
    aspect-ratio: auto;
    min-height: 46vw;
    padding: 40px 0;
  }

  /* Crop 15% off the right of Letters so the blank wall area (where
     the text sits) takes up more of the frame and the copy can run
     bigger on narrow screens: 2.667 * 0.85 = 2.267. */
  .letters-media{ aspect-ratio: 2.267; }
  .letters-img{ object-position: 0% center; }

  /* Coaching already crops 10% off the left (desktop rule above); on
     mobile we additionally crop 15% off the right, so 25% of the
     original width is gone in total: 2.667 * 0.75 = 2.0. The 10%
     left / 15% right split puts object-position at 40%. */
  .coaching-media{ aspect-ratio: 2.0; }
  .coaching-img{ object-position: 40% center; }

  .letters-copy{ max-width: 50%; }
  .coaching-copy{
    top: 50%;
    transform: translateY(-50%);
    max-width: 38%;
  }

  .footer-inner{ flex-direction: column; align-items: flex-start; }

  .about-hero{ padding: 48px 0 44px; }
  .about-hero .wrap{
    flex-direction: column;
    gap: 28px;
  }
  .about-photo{
    max-width: 340px;
    width: 82%;
    align-self: center;
  }
  .about-copy h1{ font-size: clamp(1.5rem, 5.5vw, 2rem); }

  .letters-page-hero{
    display: block;
    aspect-ratio: auto;
    border-bottom: 1px solid var(--divider);
  }
  .letters-page-media{ position: static; }
  .letters-page-media img{
    width: 100%;
    height: auto;
    /* reserve the real aspect ratio up front so the section doesn't grow
       after the image finishes loading (see the book-page fix above) */
    aspect-ratio: 1800 / 675;
  }
  .letters-page-copy{
    position: static;
    transform: none;
    right: auto;
    max-width: none;
    padding: 24px 24px 32px;
  }
  .letters-page-copy h1{ font-size: clamp(1.4rem, 5vw, 1.8rem); }

  .cta-button{ padding: 13px 26px; font-size: 0.76rem; }
}

/* Books page: the overlay-on-image layout needs real width to avoid
   crowding its subject, so it switches to the safe stacked layout much
   earlier than the rest of the site (1180px instead of 860px) — this is
   a separate query so it never touches the home page's own breakpoint. */
@media (max-width: 1180px){
  .page-header{ padding: 40px 0 32px; }

  /* dedicated mobile photos: subject on top, a tall blank/textured lower
     section extended to the same tone so the whole copy block (badge through
     paragraph) has room to sit inside the photo itself, never spilling onto
     the solid band color below. The image renders whole (no cropping, no
     forced ratio, just its own intrinsic ratio), then the copy block is
     pulled up with a negative margin so it lands inside that blank area.
     Nothing here is absolutely positioned, so text can never overflow past
     the section — it just grows the section if a paragraph runs long. */
  .book-band{ display: block; }
  .book-media{ position: static; overflow: visible; aspect-ratio: auto; }
  .book-media img{
    position: static;
    width: 100%;
    height: auto;
    object-fit: unset;
    /* All four mobile photos share this exact pixel size. Reserving it here
       (rather than letting height:auto wait on the image to actually finish
       loading) means the section's final height is known at first paint —
       otherwise the section briefly renders near-zero height, then jumps to
       full size the moment the (large, tall) image loads, which is what was
       landing a fresh page-load partway down the page instead of at the top. */
    aspect-ratio: 1254 / 2004;
  }

  .book-copy{
    position: static; /* static ignores side-left/side-right's left/right:6%,
                          which would otherwise reappear under "relative" */
    transform: none;
    max-width: none;
    margin-top: -110%;
    padding: 0 24px 32px;
  }
  .book-band.womensfiction .book-copy,
  .book-band.fantasy .book-copy{ max-width: none; }
  .book-eyebrow{ font-size: 0.68rem; }
  .book-hook{ font-size: clamp(1.15rem, 3vw, 1.4rem); margin: 8px 0 10px; }

  .book-status-badge{
    margin-bottom: 14px;
    padding: 5px 12px;
    font-size: 0.62rem;
  }
}