/* ============================================================
   3 Steps to Confidence — reading stylesheet
   Style: "Calm Focus" (Option C)
   Soft desaturated paper, warm-grey ink, one muted sage accent.
   Narrow measure, generous air, understated letterspaced labels,
   quiet ornamental dividers — a distraction-free reading mode.

   Targets the exported ebook markup (Calibre / Smashwords classes:
   western2, c, c5, c6, western1, western4, calibre2, calibre4/5, etc.)
   Only this file is loaded by books/3-steps-to-confidence.html.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600&family=Lora:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root{
  --paper:#f1ede4;   /* page background  */
  --ink:#3a352d;     /* body text        */
  --soft:#7c756a;    /* muted / captions */
  --quote:#5a544a;   /* quotes & italics */
  --sage:#7f8e6a;    /* single accent    */
  --line:#ddd6c8;    /* hairlines        */
}

/* ---------- Base ---------- */
*{box-sizing:border-box;}

body{
  max-width:36rem;
  margin:0 auto;
  padding:3.5rem 1.5rem 6rem;
  background:var(--paper);
  color:var(--ink);
  font:400 1.14rem/1.82 "Lora",Georgia,serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;}

/* ---------- Cover (the single <div><img></div> block) ---------- */
body > div{ text-align:center; margin:1rem 0 3.5rem; }

body > div img{
  height:auto !important;            /* tame inline height:100% */
  width:auto;
  max-width:268px;
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 14px 34px -20px rgba(58,53,45,.5);
}

/* ---------- Titles & page headings ---------- */
h1, .western, .western7{
  font:500 2.15rem/1.22 "Lora",serif;
  letter-spacing:.005em;
  text-align:center;
  margin:.4rem 0 .3rem;
}

/* author line directly under the main title */
h1 + p{
  text-align:center;
  color:var(--soft);
  font:600 .72rem/1 "Inter",sans-serif;
  letter-spacing:.26em;
  text-transform:uppercase;
  margin:0 0 2.6rem;
}
h1 + p em{ font-style:normal; }

/* ---------- Centered display blocks (title page, dedication, captions) ---------- */
.c, .c1, .c2, .c7, .c9, .c10{ text-align:center; }
.c, .c2, .c10{ color:var(--soft); margin:.45rem 0; }

/* "Disclaimer and terms…" style sub-label */
.c1{
  display:inline-block;
  font:600 .8rem/1.5 "Inter",sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
}

/* small section caption, e.g. EXCERPT FROM "…" */
.c9{
  font:600 .72rem/1.5 "Inter",sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--soft);
  margin:2rem 0 1rem;
}

/* ---------- Table of contents ---------- */
.c4{
  text-align:center;
  margin:.35rem 0;
}
.c4 a{
  font:500 1.05rem/1.5 "Lora",serif;
  letter-spacing:0;
  text-transform:none;
}

/* ---------- Chapter headings (h2) ---------- */
h2, .western1{
  text-align:center;
  margin:4rem 0 2.2rem;
  font:600 .92rem/1.5 "Inter",sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink);
}
/* chapter title text is often wrapped in a .c3 span inside the heading */
h2 .c3, .western1 .c3{
  display:inline;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:inherit;
}
h2::after, .western1::after{
  content:"";
  display:block;
  width:24px;height:1px;
  background:var(--sage);
  margin:1rem auto 0;
}

/* ---------- Sub-headings (h3) ---------- */
h3, .western4{
  font:500 1.22rem/1.4 "Lora",serif;
  font-style:italic;
  color:var(--ink);
  margin:2.6rem 0 .9rem;
}

/* ---------- Body paragraphs ---------- */
p, .western2, .western5, .western6{ margin:0 0 1.35rem; }
.western2{ hyphens:auto; }
.western6{ color:var(--quote); }   /* secondary / quoted body */

/* ---------- Emphasis & dialogue lines (western3) ---------- */
.western3{
  text-align:center;
  font-style:italic;
  color:var(--quote);
  max-width:26rem;
  margin:1.7rem auto;
}

/* ---------- Inline ---------- */
.c5{ font-weight:500; color:var(--sage); }   /* in-text highlight */
.calibre2, i, em{ font-style:italic; }
sup, .calibre3{ font-size:.72em; }

/* ---------- Epigraph quotes ---------- */
.c i, .c .calibre2{
  display:inline-block;
  font-style:italic;
  color:var(--quote);
  max-width:27rem;
}
.c6{                                   /* author attribution */
  display:block;
  margin-top:.8rem;
  font:600 .66rem/1.4 "Inter",sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--soft);
  font-style:normal;
}

/* ---------- Verse / poem lines (c8) ---------- */
.c8{
  text-align:center;
  font-style:italic;
  color:var(--quote);
  line-height:1.6;
  margin:.1rem 0;
}

/* ---------- Lists ---------- */
ul, .calibre4{
  margin:1.3rem 0 1.7rem;
  padding-left:1.3rem;
  list-style:none;
}
li, .calibre5{ position:relative; margin:.6rem 0; }
li::before, .calibre5::before{
  content:"–";
  position:absolute;
  left:-1.3rem;
  color:var(--sage);
  font-weight:600;
}
.calibre5 .western2{ margin:0; }

/* ---------- Links ---------- */
a{
  color:var(--sage);
  text-decoration:none;
  transition:color .15s ease;
}
a:hover{ text-decoration:underline; text-underline-offset:3px; }
/* links inside headings inherit the heading look */
h1 a, h2 a, h3 a, .western a, .western1 a, .western4 a, .western7 a{
  color:inherit;
  text-decoration:none;
}

/* ---------- Dividers ---------- */
hr, .chapter-break{
  border:0;
  height:auto;
  text-align:center;
  margin:3.2rem 0;
  overflow:visible;
}
hr::before, .chapter-break::before{
  content:"· · ·";
  color:var(--sage);
  letter-spacing:.4em;
  font-size:1rem;
}

/* empty Smashwords page-break marker */
.SWsoftchapter{ margin:0; height:0; }

/* ---------- Small screens ---------- */
@media (max-width:480px){
  body{ font-size:1.06rem; padding:2.5rem 1.2rem 4rem; }
  h1, .western, .western7{ font-size:1.9rem; }
}

/* ==================================================
   PREMIUM BOOK PAYWALL
   ================================================== */

.buy-wall {
  max-width: 680px;
  margin: 80px auto;
  padding: 56px 48px;

  text-align: center;
  border: 1px solid #d8cfbb;
  border-radius: 14px;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.06);

  position: relative;
}

.buy-wall::before {
  content: "";
  display: block;

  width: 90px;
  height: 3px;

  margin: 0 auto 28px;

  background: #b89452;
  border-radius: 999px;
}

.buy-wall p {
  margin: 0 0 28px;

  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.6;

  color: #1f2937;
}

.buy-wall form {
  margin: 0;
}

.buy-btn {
  display: inline-block;

  padding: 16px 34px;

  border: none;
  border-radius: 10px;

  background: #111827;
  color: #fff;

  font-size: 1rem;
  font-weight: 700;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.buy-btn:hover {
  background: #000;

  transform: translateY(-2px);

  box-shadow:
    0 10px 25px rgba(17, 24, 39, 0.18);
}

.buy-btn:active {
  transform: translateY(0);
}

.price {
  display: block;

  margin-top: 20px;

  color: #8a6d3b;

  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .buy-wall {
    margin: 48px 16px;
    padding: 40px 24px;
  }

  .buy-wall p {
    font-size: 1.15rem;
  }

  .buy-btn {
    width: 100%;
  }
}

/* ============================================================
   Fade-out effect before CTA
   ============================================================ */

.fade-out{
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.fade-out{
  text-align: left;
}


/* Gradient overlay that creates the fade */
.fade-out::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:100%;
  pointer-events:none;

  /* fade from solid text → background paper */
  background: linear-gradient(
    to bottom,
    rgba(241, 237, 228, 0) 0%,
    rgba(241, 237, 228, 0.6) 60%,
    rgba(241, 237, 228, 1) 100%
  );
}

/* Optional: slightly soften the text itself */
.fade-out p{
  margin-bottom: 1rem;
}