/* ==========================================================================
   lwh.css — The Long Way Home pages (/the-long-way-home, /ebook, /paperback,
   /music-card). Loaded after /assets/pks.css; only what the book pages share.

   The QR rule: the QR on the back of the card must never scan from the site.
   The card back is capped (.card-back) at 192px and a quarter of the pair, so it
   renders smaller than it did before the restyle at every width (251px at 1440
   then). The front has no QR and is shown large (Paul, 25 Oct 2026). Don't
   raise the back's cap, enlarge the card back, or change its image-rendering.
   ========================================================================== */

/* ── Section heads: label, title, description ── */
.section-label + .section-title, .section-label + h2, .section-label + h1 { margin-top: 16px; }
.section-title + .section-desc, .section-title + p { margin-top: 16px; }
.center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.center .section-label { justify-content: center; }
.center .section-desc { margin-inline: auto; }
.container.narrow { max-width: 760px; }
.narrow > .faq { margin-top: 32px; }

/* ── Hero: the words left, the cover (or card) right ── */
.hero .hero-content { gap: 22px; }
.hero h1 { font-size: clamp(3.2rem, 9vw, 6.6rem); }
.hero .strap { font: 600 1.2rem/1.4 var(--body); color: var(--ink); }
.hero .hero-buttons { margin-top: 4px; }
.hero-cover { width: 100%; max-width: 420px; justify-self: center; border-radius: 6px; box-shadow: var(--shadow); }
.hero-cover.card-cut { max-width: 340px; }
.hero-prices { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 4px; }
.hero-prices > div {
  border-top: 4px solid var(--ink);
  padding-top: 12px;
  min-width: 120px;
  font: 500 .72rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero-prices > div:first-child { border-top-color: var(--gold); }
.hero-prices strong {
  display: block;
  font: 900 2.6rem/.9 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 6px;
}
@media (max-width: 900px) { .hero-cover { max-width: 320px; } .hero-cover.card-cut { max-width: 260px; } }
/* The cover on the left, the words on the right, the two of a size and centred as a pair.
   Phones keep the words first. */
@media (min-width: 901px) {
  .hero-split.flip { grid-template-columns: minmax(0, 440px) minmax(0, 540px); justify-content: center; gap: clamp(48px, 6vw, 80px); }
  .hero-split.flip > .hero-cover { order: -1; max-width: 440px; }
}

/* ── After checkout: the thank-you banner ── */
.paid { display: none; max-width: 760px; margin: 0 auto 40px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--r); padding: 20px 24px; }
.paid.show { display: block; }

/* ── The lead offer: one product, its price and the button ── */
.bundle {
  max-width: 880px;
  margin: 40px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 32px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--r);
  padding: clamp(20px, 4vw, 36px);
  box-shadow: var(--shadow);
}
.bundle-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.bundle-imgs img { width: 100%; border-radius: 6px; box-shadow: var(--shadow); }
.bundle-imgs.one { grid-template-columns: 1fr; max-width: 220px; margin: 0 auto; }
.bundle-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bundle h3 { font-size: 2rem; }
.bundle p { color: var(--muted); }
.bundle-buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 2px solid var(--ink); padding-top: 16px; margin-top: 6px; }
.bundle-price strong { display: block; font: 900 3.4rem/.9 var(--display); font-variant-numeric: tabular-nums; }
.bundle-price span { display: block; margin-top: 6px; font: 400 .82rem/1.4 var(--mono); color: var(--muted); }
.product-name { font: 500 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }

/* A buy button whose payment link isn't set yet ("Available soon"). */
.btn-primary[data-pay-unconfigured] { background: transparent; border-color: var(--line); color: var(--muted); cursor: default; transform: none; }

.or-single { text-align: center; margin-top: 48px; font: 500 .76rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* ── The other products ── */
.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 920px; margin: 20px auto 0; }
.product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.product-img { width: 100%; max-width: 200px; margin: 0 auto 12px; border-radius: 6px; box-shadow: var(--shadow); }
/* The buy grids (book page and entry pages) show the book and the card front large,
   at one height so the two sit level and the words under them line up. */
.products .product-img { width: auto; height: clamp(260px, 30vw, 320px); max-width: 100%; object-fit: contain; }
.product h3 { font-size: 1.5rem; }
.product p { color: var(--muted); font-size: .95rem; flex: 1; }
.options { display: grid; gap: 10px; margin-top: 6px; }
.option { display: flex; flex-direction: column; align-items: stretch; gap: 10px; text-align: center; border-top: 2px solid var(--ink); padding-top: 14px; }
.option strong { display: block; font: 900 2.2rem/.9 var(--display); font-variant-numeric: tabular-nums; }
.option span { font: 400 .8rem var(--mono); color: var(--muted); }
.option .btn-primary, .option .btn-secondary { width: 100%; }
.product-foot { max-width: 920px; margin: 24px auto 0; text-align: center; font-size: .86rem; color: var(--muted); }

/* Entry pages (/ebook, /paperback, /music-card) */
.also-book { text-align: center; margin-top: 20px; font-size: .9rem; color: var(--muted); }
.calc-line { text-align: center; color: var(--muted); margin-top: 40px; }
.next-links { margin-top: 6px; }
.next-links .btn-secondary { width: 100%; }

/* ── The book ── */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split > * { min-width: 0; }
.jacket { display: grid; grid-template-columns: 667fr 35fr 667fr; width: 100%; border-radius: 6px; overflow: hidden; box-shadow: var(--shadow); }
.jacket img { display: block; width: 100%; }
.discover { list-style: none; margin: 24px 0 0; padding: 0; }
.discover li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: .96rem; }
.discover li::before { content: "★"; position: absolute; left: 0; top: 13px; color: var(--gold-text); font-size: .8rem; }
.discover li strong { color: var(--ink); font-weight: 600; }
.quote { margin: 32px 0 0; padding-left: 20px; border-left: 4px solid var(--gold); font: italic 400 1.1rem/1.5 var(--body); color: var(--ink); }
.quote cite { display: block; margin-top: 10px; font: normal 500 .74rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }

/* The road photo, as a framed plate between sections. */
.mood-wrap { padding-block: clamp(32px, 5vw, 56px) 0; }
.mood-wrap .plate { aspect-ratio: 21 / 9; }
@media (max-width: 680px) { .mood-wrap .plate { aspect-ratio: 16 / 10; } }

/* ── Sixteen roads ── */
.roads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: road; }
.roads li { counter-increment: road; position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--line); font-size: .98rem; }
.roads li::before { content: counter(road, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 500 .8rem var(--mono); letter-spacing: .08em; color: var(--green); }
.roads-note { margin-top: 28px; color: var(--muted); }

/* ── The card ── */
.card-feats { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.card-feats li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; font-size: .94rem; color: var(--muted); }
.card-feats strong { display: block; font: 800 1.2rem/1.1 var(--display); text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
/* The front large, the back small beside it: the QR cap (see the top of this file). */
.card-faces { width: calc(100% - 40px); max-width: 560px; justify-self: center; }
.card-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; align-items: end; }
.card-faces .card-face { width: 100%; }
.card-faces .card-face.card-back { max-width: 192px; }
/* The card art has its own rounded corners on a transparent ground: shadow the shape, not the box. */
img.card-cut, .card-faces img.card-cut, .bundle-imgs img.card-cut, .product-img.card-cut { border-radius: 0; box-shadow: none; filter: drop-shadow(0 12px 22px rgba(21, 20, 15, .32)); }
.card-opens { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.card-opens img { width: 72px; height: 72px; border-radius: 6px; box-shadow: var(--shadow); flex-shrink: 0; }
.card-opens p { color: var(--muted); font-size: .88rem; }
.card-opens p strong { display: block; color: var(--ink); }

/* ── The author ── */
.about-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 5vw, 56px); align-items: start; }
/* Prose on the left, name and photo on the right; on a phone the name still comes first. */
.about-grid.flip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.about-grid.flip > :first-child { order: 2; }
.about-grid > div { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
/* The author: the name above, then the photo and the words level beside each other. */
.author-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(24px, 4vw, 40px); }
/* A wider photo column so the photo sits in the middle of it, its top level with the words. */
.about-grid.level { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
.about-grid.level .author-photo { margin-top: 4px; }
.about-grid p { color: var(--muted); }
.about-grid p strong { color: var(--ink); }
.author-tag { font: 500 .76rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text) !important; }
.author-photo { width: 100%; max-width: 400px; align-self: center; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface-2); box-shadow: var(--shadow); margin-top: 10px; }
.credentials { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.credential-tag { font: 500 .7rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 7px 11px; background: var(--surface-2); color: var(--muted); }
.about-grid .author-motto { border-top: 2px solid var(--ink); padding-top: 16px; font-size: 1.05rem; }

/* ── The closing call to action, on the stage ── */
.cta-box.stage { gap: 18px; }
.cta-box.stage p { margin: 0 auto; }

@media (max-width: 900px) {
  .split, .about-grid, .about-grid.flip, .about-grid.level { grid-template-columns: 1fr; }
  .about-grid.flip > :first-child { order: 0; }
  .products { grid-template-columns: 1fr; max-width: 460px; }
  .bundle { grid-template-columns: 1fr; max-width: 480px; }
  .roads { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .hero .hero-buttons .btn-primary, .hero .hero-buttons .btn-secondary { width: 100%; }
  .bundle-buy { flex-direction: column; align-items: stretch; text-align: center; }
  .bundle-buy .btn-primary { width: 100%; }
}