:root {
  --ink: #0b1722;
  --forest: #12392f;
  --forest-2: #0b241f;
  --cream: #f6f3eb;
  --paper: #fffdf8;
  --gold: #ffd86a;
  --coral: #ee5578;
  --teal: #178c7b;
  --muted: #5d6968;
  --line: #dfe5df;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 20%, rgba(23,140,123,.2), transparent 28rem),
    radial-gradient(circle at 94% 72%, rgba(238,85,120,.16), transparent 30rem),
    #081b18;
  font-family: Inter, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
a { color: inherit; }
img { max-width: 100%; }

.detail-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem clamp(1rem, 4vw, 4rem);
  color: white;
  background: rgba(8,27,24,.96);
  border-bottom: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
}
.detail-brand { display: grid; color: var(--gold); font: 800 1.55rem/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-decoration: none; }
.detail-brand small { margin-top: .25rem; color: #a8c2ba; font: 600 .62rem/1 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.catalog-link { color: #eaf5f1; font-size: .9rem; font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: .2rem; }

.page-shell { max-width: 1180px; margin: 0 auto; background: var(--cream); box-shadow: 0 0 70px rgba(0,0,0,.35); }
.breadcrumbs { margin: 0; padding: 1rem clamp(1rem, 4vw, 4rem); color: #55716a; background: #edf2ed; font-size: .84rem; }
.breadcrumbs a { color: #315e54; }

.book-hero {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1rem, 5vw, 5rem);
  color: white;
  background:
    radial-gradient(circle at 84% 14%, rgba(255,216,106,.2), transparent 17rem),
    radial-gradient(circle at 18% 90%, rgba(238,85,120,.2), transparent 20rem),
    linear-gradient(135deg, var(--forest-2), var(--forest));
}
.hero-cover-wrap { position: relative; max-width: 390px; margin: 0 auto; }
.hero-cover-wrap::before { content: ""; position: absolute; inset: 7% -8% -4% 8%; background: rgba(255,216,106,.22); border-radius: 24px; transform: rotate(3deg); }
.hero-cover { position: relative; display: block; width: 100%; border: 5px solid rgba(255,255,255,.92); border-radius: 7px; box-shadow: 0 28px 65px rgba(0,0,0,.5); }
.cover-placeholder { display: flex; min-height: 500px; flex-direction: column; justify-content: space-between; padding: 2rem; color: white; background: linear-gradient(155deg, #071827, #123a4f 68%, #ff6b2c); }
.cover-placeholder span { font-size: .8rem; font-style: normal; font-weight: 800; letter-spacing: .16em; }
.cover-placeholder strong { font: 800 clamp(2rem, 6vw, 3.5rem)/.92 Arial, Helvetica, sans-serif; text-transform: uppercase; }
.cover-placeholder em { align-self: flex-start; padding: .5rem .7rem; color: #10231f; background: var(--gold); border-radius: 6px; font-size: .82rem; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-kicker { margin: 0 0 .65rem; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.book-hero h1 { max-width: 720px; margin: 0; font: 800 clamp(3.2rem, 8vw, 6.3rem)/.9 Arial, Helvetica, sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.hero-subtitle { max-width: 720px; margin: 1.3rem 0 0; color: #f7d9e1; font-size: clamp(1.08rem, 2.4vw, 1.38rem); font-weight: 700; line-height: 1.35; }
.hero-copy { max-width: 680px; margin: 1rem 0 0; color: #d6e4df; }
.hero-features { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.35rem 0 0; padding: 0; list-style: none; }
.hero-features li { padding: .45rem .7rem; color: #eaf5f1; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; font-size: .82rem; font-weight: 700; }
.purchase-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.amazon-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; padding: .85rem 1.15rem; color: #16231f; background: var(--gold); border: 2px solid var(--gold); border-radius: 8px; font-weight: 800; text-decoration: none; }
.amazon-button:hover, .amazon-button:focus-visible { color: white; background: var(--coral); border-color: var(--coral); outline: none; }
.amazon-button.coming-soon { cursor: default; color: white; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); }
.book-price { color: white; font-size: 1.15rem; font-weight: 800; }
.book-price small { display: block; color: #9fbbb3; font-size: .7rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }

.quick-facts { display: grid; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 0; background: white; border-bottom: 1px solid var(--line); list-style: none; }
.quick-facts li { padding: 1.25rem 1rem; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.quick-facts strong { display: block; color: var(--forest); font: 800 1.55rem/1 Arial, Helvetica, sans-serif; }
.quick-facts span { color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.content-section { padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 5rem); }
.section-kicker { margin: 0 0 .5rem; color: var(--coral); font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.content-section h2 { max-width: 760px; margin: 0; color: var(--forest); font: 800 clamp(2.2rem, 5vw, 3.8rem)/.98 Arial, Helvetica, sans-serif; letter-spacing: -.02em; text-transform: uppercase; }
.section-intro { max-width: 760px; margin: 1rem 0 0; color: var(--muted); font-size: 1.05rem; }

.experience-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.experience-card { padding: 1.45rem; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(11,23,34,.06); }
.experience-card span { display: grid; width: 36px; height: 36px; place-items: center; color: white; background: var(--teal); border-radius: 50%; font-weight: 800; }
.experience-card h3 { margin: .85rem 0 .4rem; color: var(--forest); font-size: 1.1rem; }
.experience-card p { margin: 0; color: var(--muted); }

.preview-section { color: white; background: #102d27; }
.preview-section h2 { color: white; }
.preview-section .section-intro { color: #bfd2cc; }
.preview-grid { display: grid; gap: 1rem; margin-top: 2.2rem; }
.preview-card { overflow: hidden; margin: 0; background: white; border-radius: 14px; box-shadow: 0 15px 34px rgba(0,0,0,.28); }
.preview-card img { display: block; width: 100%; aspect-ratio: 8.5 / 11; object-fit: contain; background: white; }
.preview-card figcaption { padding: 1rem 1.1rem 1.15rem; color: var(--ink); }
.preview-card strong { display: block; color: var(--forest); }
.preview-card span { display: block; margin-top: .25rem; color: var(--muted); font-size: .88rem; line-height: 1.4; }

.split-section { display: grid; gap: 2.5rem; align-items: start; }
.flower-list { columns: 2; gap: 2rem; margin: 1.4rem 0 0; padding-left: 1.2rem; color: #38534d; }
.flower-list li { margin: .4rem 0; break-inside: avoid; }
.detail-panel { padding: 1.5rem; background: white; border: 1px solid var(--line); border-radius: 14px; }
.detail-panel h3 { margin: 0 0 1rem; color: var(--forest); font-size: 1.15rem; }
.detail-list { display: grid; gap: 0; margin: 0; }
.detail-list div { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.detail-list div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--muted); font-size: .86rem; }
.detail-list dd { margin: 0; color: var(--ink); font-weight: 700; }

.faq-list { display: grid; gap: .65rem; margin-top: 1.8rem; }
.faq-list details { padding: 1rem 1.15rem; background: white; border: 1px solid var(--line); border-radius: 10px; }
.faq-list summary { color: var(--forest); font-weight: 800; cursor: pointer; }
.faq-list p { margin: .75rem 0 0; color: var(--muted); }

.related-band { display: grid; gap: 1.5rem; align-items: center; padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 5vw, 5rem); color: white; background: linear-gradient(120deg, #c84369, #7b3a87); }
.related-band h2 { margin: 0; font: 800 clamp(2rem, 5vw, 3.3rem)/1 Arial, Helvetica, sans-serif; text-transform: uppercase; }
.related-band p { max-width: 650px; margin: .65rem 0 0; color: #f7e6f1; }
.related-band a { justify-self: start; color: white; font-weight: 800; text-underline-offset: .2rem; }

.final-cta { text-align: center; background: var(--paper); }
.final-cta h2, .final-cta .section-intro { margin-right: auto; margin-left: auto; }
.final-cta .amazon-button { margin-top: 1.5rem; }
.share-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.35rem; }
.share-row a { color: #315e54; font-size: .86rem; font-weight: 700; text-underline-offset: .2rem; }

.edition-buttons { display: flex; flex-wrap: wrap; gap: .7rem; }
.spotlight-section { display: grid; gap: 2rem; color: white; background: #102d27; }
.spotlight-section h2 { color: white; }
.spotlight-section .section-intro { color: #bfd2cc; }
.topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.topic-grid li { display: flex; min-height: 72px; align-items: center; padding: .85rem 1rem; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; font-weight: 700; }

.theme-manuals { --forest: #183c55; --forest-2: #091e30; --gold: #ffcf56; --coral: #f05d49; --teal: #287da1; }
.theme-manuals .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,207,86,.2), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(40,125,161,.26), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-manuals .spotlight-section { background: #102b3e; }
.theme-puzzles { --forest: #3c285c; --forest-2: #1c1430; --gold: #ffd460; --coral: #f05c83; --teal: #7d55b3; }
.theme-puzzles .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,212,96,.18), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(240,92,131,.24), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-puzzles .spotlight-section { background: #2b1d43; }
.theme-children { --forest: #214b66; --forest-2: #152845; --gold: #ffd863; --coral: #ff5d78; --teal: #268ca0; }
.theme-children .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,216,99,.23), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(255,93,120,.25), transparent 20rem), linear-gradient(135deg, #18264d, #215c70); }
.theme-children .spotlight-section { background: #183f55; }
.theme-lifestyle { --forest: #27523d; --forest-2: #132c23; --gold: #ffd064; --coral: #df624f; --teal: #2d8769; }
.theme-lifestyle .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,208,100,.2), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(45,135,105,.26), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-lifestyle .spotlight-section { background: #1b3b2e; }
.theme-pets { --forest: #27523d; --forest-2: #132c23; --gold: #ffd064; --coral: #df624f; --teal: #2d8769; }
.theme-pets .book-hero { background: radial-gradient(circle at 84% 14%, rgba(255,208,100,.2), transparent 17rem), radial-gradient(circle at 18% 90%, rgba(45,135,105,.26), transparent 20rem), linear-gradient(135deg, var(--forest-2), var(--forest)); }
.theme-pets .spotlight-section { background: #1b3b2e; }

.detail-footer { padding: 2.2rem 1rem; color: #a8c2ba; background: #071714; text-align: center; }
.detail-footer strong { display: block; color: var(--gold); font: 800 1.3rem Arial, Helvetica, sans-serif; letter-spacing: .08em; }
.detail-footer p { margin: .4rem 0 0; font-size: .8rem; }

@media (min-width: 720px) {
  .book-hero { grid-template-columns: minmax(250px, .7fr) 1.3fr; }
  .quick-facts { grid-template-columns: repeat(4, 1fr); }
  .quick-facts li { border-bottom: 0; }
  .experience-grid, .preview-grid { grid-template-columns: repeat(3, 1fr); }
  .split-section { grid-template-columns: 1.2fr .8fr; }
  .related-band { grid-template-columns: 1fr auto; }
  .related-band a { justify-self: end; }
  .spotlight-section { grid-template-columns: 1.1fr .9fr; align-items: center; }
}

@media (max-width: 520px) {
  .book-hero h1 { font-size: 3.4rem; }
  .flower-list { columns: 1; }
  .detail-list div { grid-template-columns: 1fr; gap: .15rem; }
  .topic-grid { grid-template-columns: 1fr; }
}

.theme-finance { --forest: #193654; --forest-2: #0d2037; --gold: #f2cd79; --coral: #da8f52; --teal: #326b97; }
.theme-finance .book-hero { background: radial-gradient(circle at 84% 14%, rgba(242,205,121,.19), transparent 17rem), linear-gradient(135deg, #0d2037, #193654); }
.theme-finance .spotlight-section { background: #122d49; }

.amazon-fallback { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.copy-amazon { min-height: 44px; padding: .55rem .8rem; border: 1px solid currentColor; border-radius: 7px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.copy-amazon:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.copy-status { font-size: .88rem; }
.final-cta .amazon-fallback { display: flex; justify-content: center; margin-top: .8rem; }

[hidden] { display: none !important; }

/* Options editions: preserve cover proportions and use readable page typography. */
.options-book .book-hero { gap: 2.5rem; padding: 3rem clamp(1.25rem, 4vw, 3rem); align-items: start; }
.options-book .book-hero > div { min-width: 0; }
.options-book .hero-cover-wrap { width: 100%; max-width: 340px; }
.options-book .hero-cover-wrap::before { display: none; }
.options-book .hero-cover { width: 100%; height: auto; object-fit: contain; border-width: 1px; }
.options-book .book-hero h1 { font: 750 clamp(2rem, 3.7vw, 3.2rem)/1.12 Arial, sans-serif; text-transform: none; letter-spacing: -.025em; overflow-wrap: anywhere; }
.options-book .hero-subtitle { color: #f2cd79; font-size: 1.15rem; line-height: 1.5; }
.options-book .hero-copy { color: #e0e9f1; }
.options-book .book-hero nav { margin-top: 1.25rem; line-height: 2; }
.options-book .purchase-row { align-items: flex-start; flex-direction: column; gap: .6rem; }
.options-book .pdf-buy { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; max-width: 100%; padding: .8rem 1.1rem; border: 2px solid var(--gold); border-radius: 8px; background: var(--gold); color: #102337; font: 700 1rem/1.4 Arial, sans-serif; cursor: pointer; }
.options-book .pdf-buy:hover { background: #ffe2a1; }
.options-book .pdf-buy:focus-visible { outline: 3px solid white; outline-offset: 3px; }
.options-book .pdf-buy:disabled { opacity: .7; cursor: wait; }
.options-book .pdf-help, .options-book .pdf-format-note, .options-book .pdf-card-status { margin: 0; font-size: .9rem; color: #e0e9f1; }
.options-book .pdf-help a { color: #f2cd79; }
.options-book .content-section h2 { font: 700 clamp(1.6rem, 3vw, 2.4rem)/1.2 Arial, sans-serif; text-transform: none; letter-spacing: normal; }
@media (min-width: 720px) { .options-book .book-hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (max-width: 719px) { .options-book .hero-cover-wrap { max-width: 290px; } .options-book .book-hero { gap: 2rem; padding-top: 2rem; } }

/* Use a dependable, open typeface rather than a condensed display fallback. */
.book-hero h1 { font: 700 clamp(2rem, 3.8vw, 3.25rem)/1.15 Arial, Helvetica, sans-serif; letter-spacing: normal; text-transform: none; overflow-wrap: break-word; }
.content-section h2, .related-band h2 { font: 700 clamp(1.5rem, 2.8vw, 2.2rem)/1.25 Arial, Helvetica, sans-serif; letter-spacing: normal; text-transform: none; }
.hero-subtitle { font-size: 1.15rem; line-height: 1.6; }
.hero-copy, .section-intro { font-size: 1.0625rem; line-height: 1.75; }