/* Styles for the offer section (the buy box and everything under it).
 * Loaded by BOTH complete-edition.html and why-enoch-was-removed.html, because
 * both carry that section — the advertorial ends in the buy box rather than
 * linking to it. Keeping these in one page's inline <style> is how the synced
 * markup ended up unstyled on the other page.
 *
 * Everything structural comes from brand.css. Only what the offer section adds
 * beyond the original site's components belongs here.
 */
/* The promise that closes the print-on-demand shipping gap. Built from the
     same gold-on-leather vocabulary as .guarantee and .days-chip. */
  .tonight{
    display:flex;gap:13px;align-items:flex-start;margin-top:20px;
    border:1px solid rgba(201,162,39,.45);border-radius:var(--radius);
    background:linear-gradient(180deg,rgba(201,162,39,.10),rgba(201,162,39,.03));
    padding:15px 17px;
  }
  .tonight .ic{font-size:21px;line-height:1.2;flex:none}
  .tonight b{
    display:block;margin-bottom:3px;color:var(--gold-ink);
    font-family:'Inter',sans-serif;font-size:13.5px;letter-spacing:.02em;
  }
  .tonight span{font-family:'Inter',sans-serif;font-size:13px;line-height:1.55;color:var(--cream-dim)}

  /* Optional order protection. Dashed to read as an add-on rather than a
     fourth edition, but otherwise an .edition. */
  .protect{
    display:flex;gap:12px;align-items:flex-start;margin-top:10px;cursor:pointer;
    border:1.5px dashed rgba(143,110,20,.40);border-radius:var(--radius);
    background:rgba(143,110,20,.05);padding:13px 15px;
  }
  .protect.on{border-style:solid;border-color:var(--gold);background:rgba(143,110,20,.10)}
  .protect input{accent-color:var(--gold);width:17px;height:17px;flex:none;margin-top:3px;cursor:pointer}
  .protect .t{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--text)}
  .protect .d{font-family:'Inter',sans-serif;font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px}

  .edition .free{color:var(--gold-ink)}

  /* Interior gallery: same border/shadow language as .inside img. */
  .shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:26px}
  @media (max-width:820px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .shots img{
    width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--cream);
    border:1px solid rgba(143,110,20,.25);border-radius:8px;box-shadow:0 12px 30px rgba(38,30,22,.14);
  }
  .ticks{list-style:none;margin-top:26px;font-size:19px;color:var(--cream-dim)}
  .ticks li{padding:8px 0 8px 26px;position:relative}
  .ticks li::before{content:'✓';position:absolute;left:0;color:var(--gold-ink);font-weight:700}

/* ============ DENSITY ============
 * Measured before this block: the buy box was 1,127px tall against an 857px
 * viewport, so the checkout button could never be on screen at the same time as
 * the tier you were choosing. Every rule below buys that back. The Faith Made's
 * offer is compact for the same reason: the decision and the button belong in
 * one glance.
 */
.hero{padding:26px 0 40px}
.gallery-main img{max-height:400px}
.thumbs{gap:6px;margin-top:8px}
.buybox h1{font-size:clamp(28px,3.6vw,40px)}
.buybox .sub{font-size:18px;margin-top:8px;line-height:1.35}
.stars{margin-top:10px}

.tonight{margin-top:12px;padding:11px 13px;gap:10px}
.tonight .ic{font-size:18px}
.tonight b{font-size:13px;margin-bottom:2px}
.tonight span{font-size:12.5px;line-height:1.5}

.price-row{margin-top:12px;gap:12px}
.price{font-size:30px}
.price-note{font-size:12px}

.editions{margin-top:12px;gap:8px}
.edition{padding:11px 13px}
.edition .name{font-size:18px}
.edition .amt{font-size:16px}

.protect{margin-top:8px;padding:10px 12px;gap:10px}
.protect .t{font-size:13px}
.protect .d{font-size:11.5px;line-height:1.45}

.cta-zone{margin-top:12px}
.cta-zone .btn{padding:15px 22px}
.limit-note{margin-top:7px}
.trust-row{margin-top:12px;font-size:11px}
.paymarks{margin-top:10px}

/* The sections under the buy box carry the same treatment. 72px of air between
   each was tuned for a standalone page, not for one that already has 6,000px of
   article above it. */
.specs,.inside,.guarantee,.faq,.final{padding:46px 0}
.shots{margin-top:20px}
.ticks{margin-top:20px;font-size:18px}
.ticks li{padding:6px 0 6px 26px}
.faq summary{padding:15px 4px;font-size:19px}
.faq .a{padding:0 4px 17px;font-size:18px}
.card{padding:22px}
.guarantee p{font-size:19px}

@media (max-width:900px){
  .hero{padding:20px 0 32px}
  .gallery-main img{max-height:300px}
}

/* The amount column narrowed with the rest of the row, which broke
   "free shipping" and "$39.98 each" across two and three lines. */
.edition .amt{white-space:nowrap}
.edition .amt-sub{white-space:nowrap;font-size:10px}
.protect .d{max-width:56ch}