/* =====================================================================
   The Self-Esteem Trap — shared site stylesheet
   Light mode only. Editorial, book-first. Evolves Concept A.
   Sections:
     1. Design tokens
     2. Reset & base
     3. Paper texture layer
     4. Accessibility (skip link, focus-visible)
     5. Typography
     6. Layout primitives & section-band system
     7. Ornaments & dividers
     8. Buttons & links
     9. Header / masthead + mobile menu
    10. Hero
    11. Book cover object
    12. Trust strip
    13. Reframe comparison
    14. Cards (learn / feature grids)
    15. Author block
    16. Endorsements + pull-quote divider
    17. Diagnostic CTA band
    18. Final buy panel
    19. Footer + newsletter
    20. Motion classes
    21. Utilities
    22. Responsive breakpoints
    23. prefers-reduced-motion
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root{
  --paper:#FBFAF6;
  --cream:#F3ECDE;
  --ink:#1B1A17;
  --soft-ink:#4A463E;
  --hairline:#E4DFD4;
  --accent:#A8432E;
  --accent-deep:#8A3423;
  --warm:#6E5F49;            /* darkened from brief #7A6A54 for AA contrast */

  --measure:64ch;
  --shell:1180px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Newsreader",Georgia,"Times New Roman",serif;

  --shadow-cover:
    0 1px 0 rgba(255,255,255,.14) inset,
    -14px 0 24px -18px rgba(0,0,0,.5),
    26px 34px 54px -26px rgba(27,26,23,.55),
    2px 2px 0 rgba(0,0,0,.06);
  --shadow-card:0 18px 40px -30px rgba(27,26,23,.5);

  --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---------- 2. RESET & BASE ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:20px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

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

/* ---------- 3. PAPER TEXTURE LAYER ---------- */
/* A faint SVG fractal-noise grain sits above --paper. It is a texture,
   not a decorative gradient: single tiling tile at very low opacity. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;                 /* the SVG alpha is already ~4%; this trims it */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}
/* keep real content above the grain */
.masthead,main,.footer,.skip-link{position:relative;z-index:1;}

/* ---------- 4. ACCESSIBILITY ---------- */
.skip-link{
  position:absolute;
  left:-999px;top:0;
  background:var(--ink);
  color:var(--paper);
  padding:.7em 1.1em;
  z-index:200;
  font-family:var(--body);
  letter-spacing:.04em;
  text-decoration:none;
}
.skip-link:focus{left:.5rem;top:.5rem;}

a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,summary:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- 5. TYPOGRAPHY ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.008em;
  line-height:1.1;
  margin:0;
}
h2{font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.12;}
h3{font-size:1.3rem;line-height:1.24;}

p{margin:0 0 1.25rem;}
a{color:inherit;}
em{font-style:italic;}

.eyebrow{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.24em;
  font-size:.72rem;
  font-weight:600;
  color:var(--accent);
  margin:0 0 1.1rem;
}
.eyebrow--muted{color:var(--warm);}

.lead{font-size:1.15rem;color:var(--ink);}

/* ---------- 6. LAYOUT & SECTION-BAND SYSTEM ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 1.4rem;
}
.column{max-width:var(--measure);margin-left:auto;margin-right:auto;}

/* A band is one editorial "movement". Alternate paper / cream for rhythm. */
.band{padding:5.5rem 0;position:relative;}
.band--cream{background:var(--cream);}
.band--ink{background:var(--ink);color:var(--paper);}
.band--tight{padding:3.25rem 0;}

.section-head{max-width:54ch;margin:0 0 3rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{margin-bottom:1rem;}
.section-head p{color:var(--soft-ink);}
.band--ink .section-head p{color:rgba(251,250,246,.78);}

/* ---------- 7. ORNAMENTS & DIVIDERS ---------- */
.rule{border:0;border-top:1px solid var(--hairline);margin:0;}

/* printer's ornament: a centered thin diamond flanked by rules */
.ornament{
  display:flex;
  align-items:center;
  gap:1.1rem;
  justify-content:center;
  color:var(--accent);
  margin:0 auto;
  max-width:340px;
}
.ornament::before,.ornament::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--hairline);
}
.ornament i{
  display:block;
  width:8px;height:8px;
  transform:rotate(45deg);
  border:1px solid currentColor;
}

/* large pull-quote used as a divider between movements */
.pullquote{
  text-align:center;
  max-width:24ch;
  margin:0 auto;
}
.pullquote p{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.7rem,4.5vw,2.9rem);
  line-height:1.2;
  color:var(--ink);
  margin:0 0 1.3rem;
}
.pullquote cite{
  font-style:normal;
  display:block;
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:600;
  color:var(--accent);
}
.pullquote .role{
  display:block;
  text-transform:none;
  letter-spacing:.02em;
  font-weight:400;
  font-size:.9rem;
  color:var(--soft-ink);
  margin-top:.3rem;
}

/* ---------- 8. BUTTONS & LINKS ---------- */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-size:.98rem;
  letter-spacing:.02em;
  text-decoration:none;
  padding:.85em 1.6em;
  min-height:44px;
  border:1px solid var(--ink);
  color:var(--paper);
  background:var(--ink);
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  transition:background .2s var(--ease),color .2s var(--ease),
             border-color .2s var(--ease),transform .18s var(--ease),
             box-shadow .18s var(--ease);
}
.btn:hover{
  background:var(--accent);border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 10px 22px -12px rgba(168,67,46,.6);
}
.btn:active{transform:translateY(0);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--hairline);}
.btn--ghost:hover{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:none;}
.btn--paper{background:var(--paper);color:var(--ink);border-color:var(--paper);}
.btn--paper:hover{background:var(--accent);border-color:var(--accent);color:var(--paper);}
.btn--lg{font-size:1.06rem;padding:1em 2em;}

/* inline accent link with a growing underline (a line, not a gradient wash) */
.ilink{
  color:var(--accent);
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  padding-bottom:2px;
  transition:background-size .28s var(--ease);
}
.ilink:hover,.ilink:focus-visible{background-size:100% 1px;}

/* a comfortable tap target for secondary text links */
.tlink{
  display:inline-block;
  min-height:44px;
  line-height:44px;
  color:var(--accent);
  text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:0 82%;
  background-size:0% 1px;
  transition:background-size .28s var(--ease);
}
.tlink:hover,.tlink:focus-visible{background-size:100% 1px;}

/* ---------- 9. HEADER / MASTHEAD ---------- */
.masthead{
  border-bottom:1px solid var(--hairline);
  background:rgba(251,250,246,.92);
  backdrop-filter:saturate(120%);
  position:sticky;top:0;
}
.masthead__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1rem 0;
}
.wordmark{
  font-family:var(--display);
  font-weight:600;
  font-size:1.28rem;
  letter-spacing:-.01em;
  color:var(--ink);
  text-decoration:none;
  white-space:nowrap;
}
.wordmark span{color:var(--accent);}

.nav{
  display:flex;
  gap:1.6rem;
  align-items:center;
}
.nav__links{
  display:flex;
  gap:1.5rem;
  align-items:center;
  font-family:var(--body);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.15em;
  list-style:none;
  margin:0;padding:0;
}
.nav__links a{
  color:var(--soft-ink);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ink);border-color:var(--accent);}
.nav__links a.is-buy{color:var(--accent);}
.nav__cta{margin-left:.4rem;}
.nav__cta.btn{padding:.6em 1.1em;min-height:0;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;}

/* hamburger — hidden on desktop */
.nav__toggle{
  display:none;
  width:44px;height:44px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:2px;
  cursor:pointer;
  color:var(--ink);
}
.nav__toggle .bars{position:relative;width:20px;height:2px;background:currentColor;display:block;transition:background .2s var(--ease);}
.nav__toggle .bars::before,.nav__toggle .bars::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
  transition:transform .25s var(--ease),top .25s var(--ease);
}
.nav__toggle .bars::before{top:-6px;}
.nav__toggle .bars::after{top:6px;}
.nav__toggle[aria-expanded="true"] .bars{background:transparent;}
.nav__toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg);}
.nav__toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg);}

/* ---------- 10. HERO ---------- */
.hero{padding:4.5rem 0 5rem;}
.hero__grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:3.5rem;
  align-items:center;
}
.hero h1{
  font-size:clamp(2.7rem,7vw,5rem);
  font-weight:500;
  line-height:1.02;
  letter-spacing:-.02em;
  margin:0 0 1.6rem;
}
.hero h1 em{font-style:italic;color:var(--accent);}
.hero__questions{
  font-size:1.28rem;
  line-height:1.45;
  color:var(--soft-ink);
  max-width:32ch;
  margin:0 0 2rem;
}
.hero__questions .q{display:block;}
.hero__questions .q--trap{
  color:var(--warm);
  text-decoration:line-through;
  text-decoration-color:rgba(110,95,73,.55);
}
.hero__questions .q--path{
  color:var(--ink);
  font-family:var(--display);
  font-style:italic;
  font-size:1.5rem;
  margin-top:.4rem;
}
.hero__author{
  font-size:.9rem;
  letter-spacing:.05em;
  color:var(--soft-ink);
  margin:0 0 2.3rem;
}
.hero__author .name{color:var(--ink);font-weight:600;}
.hero__cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}
.hero__media{position:relative;}

/* ---------- 11. BOOK COVER OBJECT ---------- */
/* Uses the generated hardcover image; keeps the letterpress shadow language.
   Subtle pointer-tilt is applied by JS via --rx/--ry (desktop, non-touch). */
.cover-photo{
  width:min(320px,78%);
  margin:0 auto;
  border-radius:4px;
  box-shadow:var(--shadow-cover);
  transform:perspective(1200px)
            rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .3s var(--ease);
  will-change:transform;
}
.cover-caption{
  text-align:center;
  font-size:.76rem;
  letter-spacing:.05em;
  color:var(--warm);
  margin:1.3rem auto 0;
  max-width:34ch;
}

/* ---------- 12. TRUST STRIP ---------- */
.trust{
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--cream);
}
.trust__inner{
  display:grid;
  grid-template-columns:1.4fr auto 1fr;
  gap:2.4rem;
  align-items:center;
  padding:2.2rem 0;
}
.trust__quote{
  font-family:var(--display);
  font-style:italic;
  font-size:1.14rem;
  line-height:1.4;
  color:var(--ink);
  margin:0;
}
.trust__quote cite{display:block;font-style:normal;margin-top:.7rem;}
.trust__quote .who{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;
  font-size:.74rem;font-weight:600;color:var(--accent);
}
.trust__quote .role{font-family:var(--body);font-size:.84rem;color:var(--soft-ink);}
.trust__spine{width:1px;align-self:stretch;background:var(--hairline);}
.trust__meta{
  font-family:var(--body);
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--soft-ink);
  line-height:1.5;
}
.trust__meta strong{color:var(--ink);font-weight:600;}

/* ---------- 13. REFRAME COMPARISON ---------- */
.reframe__head{text-align:center;max-width:52ch;margin:0 auto 3.5rem;}
.reframe__head h2{margin-bottom:1.2rem;}
.reframe__head p{color:var(--soft-ink);}

.compare{
  display:grid;
  grid-template-columns:1fr 1px 1fr;
  gap:0;
  max-width:920px;
  margin:0 auto;
  position:relative;
}
.compare__spine{background:var(--hairline);}
.compare__col{padding:0 2.6rem;}
.compare__col--trap{text-align:right;}
.compare__label{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  font-weight:600;
  margin:0 0 1.1rem;
}
.compare__label--trap{color:var(--warm);}
.compare__label--path{color:var(--accent);}
.compare__q{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.4rem,3vw,2rem);
  line-height:1.12;
  margin:0 0 1.6rem;
}
.compare__q--trap{color:var(--warm);font-style:italic;}
.compare__q--path{color:var(--ink);}
.compare__list{list-style:none;margin:0;padding:0;}
.compare__list li{
  font-size:1rem;color:var(--soft-ink);line-height:1.5;
  padding:.7rem 0;border-top:1px solid var(--hairline);
}
.compare__col--path .compare__list li{color:var(--ink);}

/* "versus" marker — hidden on desktop (spine carries it), shown when stacked */
.compare__vs{
  display:none;
  text-align:center;
  font-family:var(--display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--accent);
  letter-spacing:.04em;
  margin:1.6rem 0;
}

/* ---------- 14. CARDS / LEARN GRID ---------- */
.cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.4rem;
  max-width:900px;
  margin:0 auto;
}
.card{
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:1.8rem 1.7rem;
  box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.band--cream .card{background:#F8F3E7;}
.card:hover{transform:translateY(-3px);box-shadow:0 26px 46px -30px rgba(27,26,23,.55);border-color:var(--hairline);}
.card__num{
  font-family:var(--display);
  font-style:italic;
  font-size:1.05rem;
  color:var(--accent);
  margin:0 0 .7rem;
}
.card h3{font-size:1.18rem;margin:0 0 .5rem;}
.card p{font-size:.98rem;color:var(--soft-ink);line-height:1.5;margin:0;}
.center-cta{text-align:center;margin-top:2.6rem;}

/* ---------- 15. AUTHOR BLOCK ---------- */
.author__grid{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:3rem;
  align-items:start;
}
.author__portrait{
  width:220px;
  border:1px solid var(--hairline);
  padding:9px;
  background:#F8F3E7;
  box-shadow:var(--shadow-card);
}
.author__portrait img{border:1px solid var(--hairline);}
.author__cap{
  text-align:center;font-size:.72rem;letter-spacing:.05em;
  color:var(--warm);margin:.9rem auto 0;max-width:220px;line-height:1.5;
}
.author__body h2{margin-bottom:1.2rem;}
.author__body p{color:var(--soft-ink);max-width:60ch;}
.author__body .lead{color:var(--ink);}

/* ---------- 16. ENDORSEMENTS ---------- */
.endorse__col{max-width:760px;margin:0 auto;}
.quote{padding:2.4rem 0;border-top:1px solid var(--hairline);}
.quote:first-of-type{border-top:0;}
.quote p{
  font-family:var(--display);font-weight:400;font-style:italic;
  font-size:1.28rem;line-height:1.42;color:var(--ink);margin:0 0 1.1rem;
}
.quote cite{font-style:normal;display:block;}
.quote .who{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;
  font-size:.78rem;font-weight:600;color:var(--accent);
}
.quote .role{font-family:var(--body);font-size:.86rem;color:var(--soft-ink);letter-spacing:.02em;}

/* ---------- 17. DIAGNOSTIC CTA BAND ---------- */
.diag__inner{text-align:center;max-width:44ch;margin:0 auto;}
.diag__inner h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:1.2rem;}
.diag__inner p{color:var(--soft-ink);margin-bottom:2.2rem;}

/* ---------- 18. FINAL BUY PANEL ---------- */
.buy .rule{border-top-color:rgba(255,255,255,.14);}
.buy__grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:3.5rem;
  align-items:center;
}
.buy h2{color:var(--paper);margin-bottom:1.3rem;}
.buy .eyebrow{color:#E0895F;}
.buy p{color:rgba(251,250,246,.8);}
.buy__cover{width:min(240px,70%);margin:0 auto;border-radius:4px;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);}
.buy__price{
  font-family:var(--display);font-size:2.6rem;font-weight:500;
  color:var(--paper);line-height:1;margin:1.6rem 0 0;
}
.buy__price .list{
  font-family:var(--body);font-size:1rem;color:rgba(251,250,246,.55);
  text-decoration:line-through;margin-left:.6rem;
}
.buy__facts{list-style:none;padding:0;margin:1.6rem 0 0;}
.buy__facts li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.7rem 0;border-top:1px solid rgba(255,255,255,.14);font-size:.96rem;
}
.buy__facts .k{color:rgba(251,250,246,.6);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;}
.buy__facts .v{color:var(--paper);text-align:right;}
.buy__actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;margin-top:1.8rem;}
.buy__actions .also{
  color:#E0895F;text-decoration:none;font-size:.95rem;min-height:44px;line-height:44px;
  background-image:linear-gradient(#E0895F,#E0895F);background-repeat:no-repeat;
  background-position:0 82%;background-size:0% 1px;transition:background-size .28s var(--ease);
}
.buy__actions .also:hover,.buy__actions .also:focus-visible{background-size:100% 1px;}
.buy__note{font-size:.78rem;color:rgba(251,250,246,.55);margin:.2rem 0 0;}

/* ---------- 19. FOOTER + NEWSLETTER ---------- */
.footer{
  border-top:1px solid var(--hairline);
  padding:4rem 0 3rem;
  font-family:var(--body);
  background:var(--cream);
}
.footer__top{
  display:grid;
  grid-template-columns:1.3fr 1fr 1.4fr;
  gap:3rem;
  padding-bottom:2.6rem;
  border-bottom:1px solid var(--hairline);
}
.footer__brand{
  font-family:var(--display);font-weight:600;font-size:1.25rem;color:var(--ink);margin:0 0 .5rem;
}
.footer__brand span{color:var(--accent);}
.footer__pub{font-size:.86rem;color:var(--soft-ink);margin:0;line-height:1.5;}
.footer__coltitle{
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;
  color:var(--warm);margin:0 0 1rem;
}
.footer__links{list-style:none;margin:0;padding:0;}
.footer__links li{margin:0;}
.footer__links a{
  display:inline-block;min-height:40px;line-height:40px;
  color:var(--soft-ink);text-decoration:none;font-size:.92rem;
  border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
}
.footer__links a:hover,.footer__links a:focus-visible{color:var(--ink);border-color:var(--accent);}

.news__form{display:flex;gap:.6rem;margin:1rem 0 .6rem;flex-wrap:wrap;}
.news__input{
  flex:1;min-width:0;min-height:44px;
  font-family:var(--body);font-size:.98rem;color:var(--ink);
  background:var(--paper);border:1px solid var(--hairline);padding:.6em .9em;
}
.news__input::placeholder{color:var(--warm);}
.news__msg{font-size:.86rem;color:var(--accent);margin:.4rem 0 0;min-height:1.2em;}
.news__msg[hidden]{display:none;}

.footer__bottom{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  flex-wrap:wrap;padding-top:2rem;
}
.footer__meta{font-size:.82rem;color:var(--soft-ink);}
.footer__legal{display:flex;gap:1.4rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;}
.footer__legal a{color:var(--soft-ink);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);}
.footer__legal a:hover,.footer__legal a:focus-visible{color:var(--ink);border-color:var(--accent);}

/* ---------- 20. MOTION CLASSES ---------- */
/* No-JS safeguard: if JavaScript never runs, the reveal states must not hide content.
   The inline <script> in <head> adds the "js" class; without it everything stays visible. */
html:not(.js) .reveal,
html:not(.js) .stagger>*,
html:not(.js) .hero__copy>*,
html:not(.js) .hero__media,
html:not(.js) .compare .compare__col,
html:not(.js) .compare .compare__spine{
  opacity:1 !important;
  transform:none !important;
}
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal.in{opacity:1;transform:none;}
/* staggered children: each child delays a little */
.stagger>*{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.stagger.in>*{opacity:1;transform:none;}
.stagger.in>*:nth-child(1){transition-delay:.00s;}
.stagger.in>*:nth-child(2){transition-delay:.07s;}
.stagger.in>*:nth-child(3){transition-delay:.14s;}
.stagger.in>*:nth-child(4){transition-delay:.21s;}
.stagger.in>*:nth-child(5){transition-delay:.28s;}
.stagger.in>*:nth-child(6){transition-delay:.35s;}
.stagger.in>*:nth-child(7){transition-delay:.42s;}
.stagger.in>*:nth-child(8){transition-delay:.49s;}

/* choreographed hero entrance (fires on load, not on scroll) */
.hero__copy>*{opacity:0;transform:translateY(12px);}
.hero__media{opacity:0;transform:translateY(12px) scale(.985);}
.hero.enter .hero__copy>*{animation:hero-in .6s var(--ease) forwards;}
.hero.enter .hero__copy>*:nth-child(1){animation-delay:.05s;}
.hero.enter .hero__copy>*:nth-child(2){animation-delay:.14s;}
.hero.enter .hero__copy>*:nth-child(3){animation-delay:.23s;}
.hero.enter .hero__copy>*:nth-child(4){animation-delay:.32s;}
.hero.enter .hero__copy>*:nth-child(5){animation-delay:.41s;}
.hero.enter .hero__media{animation:hero-media-in .8s var(--ease) .2s forwards;}
@keyframes hero-in{to{opacity:1;transform:none;}}
@keyframes hero-media-in{to{opacity:1;transform:none;}}

/* the reframe stages: trap, then spine draws, then path */
.compare.in .compare__col--trap{animation:reveal-up .55s var(--ease) forwards;}
.compare.in .compare__spine{animation:spine-draw .5s var(--ease) .25s forwards;transform-origin:top;transform:scaleY(0);}
.compare.in .compare__col--path{animation:reveal-up .55s var(--ease) .4s forwards;}
.compare .compare__col{opacity:0;transform:translateY(14px);}
@keyframes reveal-up{to{opacity:1;transform:none;}}
@keyframes spine-draw{to{transform:scaleY(1);}}

/* ---------- 21. UTILITIES ---------- */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.mb-0{margin-bottom:0;}
.nowrap{white-space:nowrap;}

/* ---------- 22. RESPONSIVE ---------- */
@media (max-width:960px){
  .hero__grid{grid-template-columns:1fr;gap:2.8rem;}
  .hero__media{order:-1;}
  .hero__questions{max-width:none;}
  .buy__grid{grid-template-columns:1fr;gap:2.6rem;}
  .buy__cover{order:-1;}
  .trust__inner{grid-template-columns:1fr;gap:1.6rem;text-align:left;}
  .trust__spine{display:none;}
}

@media (max-width:840px){
  .author__grid{grid-template-columns:1fr;gap:1.9rem;justify-items:center;text-align:center;}
  .author__portrait{margin:0 auto;}
  .author__body p{margin-left:auto;margin-right:auto;}
  .footer__top{grid-template-columns:1fr 1fr;gap:2rem;}
  .footer__news{grid-column:1 / -1;}
}

@media (max-width:720px){
  .band{padding:4rem 0;}
  .cards{grid-template-columns:1fr;}

  /* --- mobile nav --- */
  .nav__toggle{display:inline-flex;}
  .nav{
    position:fixed;
    top:0;right:0;
    height:100dvh;
    width:min(84vw,340px);
    background:var(--paper);
    border-left:1px solid var(--hairline);
    box-shadow:-30px 0 60px -40px rgba(27,26,23,.5);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:5rem 1.6rem 2rem;
    overflow-y:auto;
    z-index:150;
  }
  .nav.is-open{transform:translateX(0);}
  .nav__links{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    font-size:1rem;
    letter-spacing:.08em;
  }
  .nav__links li{border-top:1px solid var(--hairline);}
  .nav__links a{display:block;padding:.95rem 0;min-height:44px;}
  .nav__cta{margin:1.4rem 0 0;}
  .nav__cta.btn{display:block;text-align:center;padding:.85em 1.1em;min-height:44px;font-size:.9rem;}

  /* backdrop */
  .nav-backdrop{
    position:fixed;inset:0;background:rgba(27,26,23,.4);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);
    z-index:140;
  }
  .nav-backdrop.is-open{opacity:1;visibility:visible;}

  /* --- reframe stacks but keeps confrontation --- */
  .compare{grid-template-columns:1fr;}
  .compare__spine{display:none;}
  .compare__col{padding:0;}
  .compare__col--trap{text-align:left;}
  .compare__vs{display:block;}

  .buy__facts li{flex-direction:column;gap:.15rem;}
  .buy__facts .v{text-align:left;}
}

@media (max-width:480px){
  body{font-size:19px;}
  .footer__top{grid-template-columns:1fr;}
}

/* =====================================================================
   PAGE ADDITIONS — author.html & insights.html (appended, Phase 2)
   Reuses existing tokens/patterns; adds only what the shared sheet lacked.
   ===================================================================== */

/* ---------- A. AUTHOR PAGE HERO ---------- */
.author-hero{padding:4.5rem 0 4.5rem;}
.author-hero__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:3.5rem;
  align-items:center;
}
.author-hero__media{position:relative;}
.author-hero .author__portrait{width:min(320px,80%);margin:0 auto;}
.author-hero h1{
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 1.4rem;
}
.author-hero h1 em{font-style:italic;color:var(--accent);}
.author-hero__lede{font-size:1.15rem;color:var(--soft-ink);max-width:46ch;margin:0 0 2rem;}
.author-hero__cta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}

/* ---------- B. BIO PROSE BLOCK ---------- */
.prose{max-width:64ch;margin:0 auto;}
.prose p{color:var(--soft-ink);}
.prose p .lead,.prose .lead{color:var(--ink);}

/* two-column credibility list */
.creds{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.4rem;
  max-width:900px;
  margin:2.6rem auto 0;
}
.cred{
  background:#F8F3E7;
  border:1px solid var(--hairline);
  padding:1.6rem 1.6rem;
  box-shadow:var(--shadow-card);
}
.band:not(.band--cream) .cred{background:var(--paper);}
.cred h3{font-size:1.1rem;margin:0 0 .5rem;}
.cred p{font-size:.96rem;color:var(--soft-ink);line-height:1.5;margin:0;}

/* ---------- C. EDITORIAL SCENE IMAGE ---------- */
.scene{max-width:1020px;margin:0 auto;}
.scene__frame{
  border:1px solid var(--hairline);
  padding:10px;
  background:#F8F3E7;
  box-shadow:var(--shadow-card);
}
.scene__frame img{border:1px solid var(--hairline);width:100%;}
.scene__cap{
  text-align:center;font-size:.74rem;letter-spacing:.05em;
  color:var(--warm);margin:1rem auto 0;max-width:52ch;line-height:1.5;
}

/* ---------- D. OTHER WORKS LIST ---------- */
.works{list-style:none;margin:0 auto;padding:0;max-width:760px;}
.works li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:1.2rem 0;border-top:1px solid var(--hairline);
}
.works li:first-child{border-top:0;}
.works .work__title{font-family:var(--display);font-size:1.2rem;color:var(--ink);font-weight:500;}
.works .work__lang{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;
  font-size:.7rem;font-weight:600;color:var(--accent);white-space:nowrap;
}

/* ---------- E. INSIGHTS ARTICLE GRID ---------- */
.articles{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  max-width:980px;
  margin:0 auto;
}
.article-card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:2rem 1.9rem;
  box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.band--cream .article-card{background:#F8F3E7;}
.article-card:hover{transform:translateY(-3px);box-shadow:0 26px 46px -30px rgba(27,26,23,.55);}
.article-card__kicker{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.18em;
  font-size:.68rem;font-weight:600;color:var(--accent);margin:0 0 .9rem;
}
.article-card h3{font-size:1.24rem;line-height:1.24;margin:0 0 .8rem;}
.article-card__stand{font-size:.98rem;color:var(--soft-ink);line-height:1.55;margin:0 0 1.4rem;}
.article-card__more{margin-top:auto;}

/* honest editorial note */
.editorial-note{
  max-width:60ch;margin:0 auto 3rem;
  border-left:2px solid var(--accent);
  padding:.2rem 0 .2rem 1.3rem;
  font-size:.92rem;color:var(--soft-ink);line-height:1.55;
}
.editorial-note strong{color:var(--ink);font-weight:600;}

/* ---------- F. PAGE-ADDITION RESPONSIVE ---------- */
@media (max-width:960px){
  .author-hero__grid{grid-template-columns:1fr;gap:2.6rem;text-align:center;}
  .author-hero__media{order:-1;}
  .author-hero__lede{margin-left:auto;margin-right:auto;}
  .author-hero__cta{justify-content:center;}
}
@media (max-width:720px){
  .creds{grid-template-columns:1fr;}
  .articles{grid-template-columns:1fr;}
  .works li{flex-direction:column;gap:.3rem;}
}

/* =====================================================================
   PAGE ADDITIONS — endorsements.html & buy.html (appended, Phase 2)
   Reuses existing tokens/patterns; adds only what the shared sheet lacked.
   No purple/green, no emojis, light mode.
   ===================================================================== */

/* ---------- G. ENDORSEMENTS PAGE ---------- */
.endorse-hero{padding:4.5rem 0 3rem;text-align:center;}
.endorse-hero .eyebrow{margin-left:auto;margin-right:auto;}
.endorse-hero h1{
  font-size:clamp(2.4rem,6vw,4rem);
  font-weight:500;line-height:1.04;letter-spacing:-.02em;
  margin:0 auto 1.4rem;max-width:16ch;
}
.endorse-hero h1 em{font-style:italic;color:var(--accent);}
.endorse-hero__lede{font-size:1.15rem;color:var(--soft-ink);max-width:56ch;margin:0 auto;}

/* lead (featured) endorsement — the NYT author, set apart */
.endorse-lead{
  max-width:820px;margin:0 auto;
  background:#F8F3E7;
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-card);
  padding:3rem 3rem 2.6rem;
  text-align:center;
  position:relative;
}
.endorse-lead .monogram{margin:0 auto 1.8rem;}
.endorse-lead__quote{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.1rem);line-height:1.32;color:var(--ink);
  margin:0 0 1.6rem;
}
.endorse-lead cite{font-style:normal;display:block;}
.endorse-lead .who{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.14em;
  font-size:.86rem;font-weight:600;color:var(--accent);display:block;
}
.endorse-lead .role{
  font-family:var(--body);font-size:.92rem;color:var(--soft-ink);
  letter-spacing:.02em;display:block;margin-top:.3rem;
}

/* group label between endorsement clusters */
.endorse-group{max-width:900px;margin:0 auto 2rem;text-align:center;}
.endorse-group .eyebrow{margin-left:auto;margin-right:auto;margin-bottom:.4rem;}
.endorse-group p{color:var(--soft-ink);font-size:.98rem;margin:0;}

/* monogram / initial mark — a lettered disc, not a photo */
.monogram{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--accent);
  border-radius:50%;
  color:var(--accent);
  font-family:var(--display);font-weight:600;font-size:1.5rem;
  letter-spacing:.02em;line-height:1;
  background:var(--paper);
  flex:0 0 auto;
}
.band--cream .monogram{background:#F8F3E7;}

/* grid of endorsement cards */
.endorse-cards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  max-width:960px;
  margin:0 auto;
}
.endorse-card{
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:2.1rem 2rem;
  box-shadow:var(--shadow-card);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.band--cream .endorse-card{background:#F8F3E7;}
.endorse-card:hover{transform:translateY(-3px);box-shadow:0 26px 46px -30px rgba(27,26,23,.55);}
.endorse-card__head{display:flex;align-items:center;gap:1rem;margin:0 0 1.3rem;}
.endorse-card__head cite{font-style:normal;display:block;}
.endorse-card__head .who{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.12em;
  font-size:.8rem;font-weight:600;color:var(--accent);display:block;line-height:1.3;
}
.endorse-card__head .role{
  font-family:var(--body);font-size:.84rem;color:var(--soft-ink);
  letter-spacing:.01em;display:block;margin-top:.25rem;line-height:1.4;
}
.endorse-card p{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:1.18rem;line-height:1.44;color:var(--ink);margin:0;
}

/* ---------- H. BUY PAGE ---------- */
.buy-hero{padding:4.5rem 0 4.5rem;}
.buy-hero__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:3.5rem;
  align-items:center;
}
.buy-hero__media{position:relative;}
.buy-hero__cover{
  width:min(300px,80%);margin:0 auto;border-radius:4px;
  box-shadow:var(--shadow-cover);
}
.buy-hero__caption{
  text-align:center;font-size:.76rem;letter-spacing:.05em;
  color:var(--warm);margin:1.3rem auto 0;max-width:34ch;
}
.buy-hero h1{
  font-size:clamp(2.3rem,5.4vw,3.6rem);
  font-weight:500;line-height:1.06;letter-spacing:-.02em;margin:0 0 1.3rem;
}
.buy-hero h1 em{font-style:italic;color:var(--accent);}
.buy-hero__lede{font-size:1.12rem;color:var(--soft-ink);max-width:48ch;margin:0 0 1.6rem;}

.price-block{margin:0 0 1.8rem;}
.price-block .price{
  font-family:var(--display);font-size:2.6rem;font-weight:500;
  color:var(--ink);line-height:1;
}
.price-block .price .list{
  font-family:var(--body);font-size:1rem;color:var(--warm);
  text-decoration:line-through;margin-left:.6rem;
}
.price-block .price-note{
  font-size:.86rem;color:var(--soft-ink);margin:.6rem 0 0;letter-spacing:.02em;
}

/* dominant primary buy action + secondary */
.buy-actions{display:flex;flex-direction:column;gap:1rem;align-items:flex-start;}
.buy-actions .also{
  color:var(--accent);text-decoration:none;font-size:.95rem;min-height:44px;line-height:44px;
  background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;
  background-position:0 82%;background-size:0% 1px;transition:background-size .28s var(--ease);
}
.buy-actions .also:hover,.buy-actions .also:focus-visible{background-size:100% 1px;}
.buy-actions .also-note{font-size:.78rem;color:var(--warm);margin:0;}

/* spec table (light mode) */
.spec-table{list-style:none;padding:0;margin:0 auto;max-width:640px;}
.spec-table li{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 0;border-top:1px solid var(--hairline);font-size:1rem;
}
.spec-table li:first-child{border-top:0;}
.spec-table .k{
  color:var(--warm);text-transform:uppercase;letter-spacing:.12em;
  font-size:.74rem;font-weight:600;align-self:center;
}
.spec-table .v{color:var(--ink);text-align:right;}

/* "your copy arrives" delivery accent — subtle, small */
.delivery{
  display:grid;grid-template-columns:auto 1fr;gap:1.8rem;align-items:center;
  max-width:760px;margin:0 auto;
  background:var(--paper);border:1px solid var(--hairline);
  padding:1.4rem 1.6rem;box-shadow:var(--shadow-card);
}
.band--cream .delivery{background:#F8F3E7;}
.delivery__img{
  width:120px;flex:0 0 auto;border-radius:3px;border:1px solid var(--hairline);
}
.delivery__body h3{font-size:1.1rem;margin:0 0 .4rem;}
.delivery__body p{font-size:.94rem;color:var(--soft-ink);line-height:1.5;margin:0;}

/* bulk / institutional note */
.bulk-note{
  max-width:640px;margin:0 auto;text-align:center;
  border:1px dashed var(--hairline);padding:1.8rem 2rem;
}
.bulk-note h3{font-size:1.15rem;margin:0 0 .6rem;}
.bulk-note p{font-size:.96rem;color:var(--soft-ink);line-height:1.55;margin:0 0 1.1rem;}

/* ---------- I. PAGE-ADDITION RESPONSIVE (endorsements + buy) ---------- */
@media (max-width:960px){
  .buy-hero__grid{grid-template-columns:1fr;gap:2.6rem;text-align:center;}
  .buy-hero__media{order:-1;}
  .buy-hero__lede{margin-left:auto;margin-right:auto;}
  .buy-actions{align-items:center;}
}
@media (max-width:720px){
  .endorse-cards{grid-template-columns:1fr;}
  .endorse-lead{padding:2.2rem 1.6rem 2rem;}
  .delivery{grid-template-columns:1fr;text-align:center;justify-items:center;}
  .spec-table li{flex-direction:column;gap:.15rem;}
  .spec-table .v{text-align:left;}
  .spec-table .k{align-self:flex-start;}
}

/* =====================================================================
   PAGE ADDITIONS — contact.html & privacy.html (appended, Phase 3)
   Reuses existing tokens/patterns; adds only the contact form, the bulk
   panel, and legal prose spacing that the shared sheet did not yet cover.
   No purple/green, no emojis, light mode.
   ===================================================================== */

/* ---------- L. CONTACT LAYOUT ---------- */
.contact__grid{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:3.5rem;
  align-items:start;
}
.contact__form-col h2{font-size:1.5rem;margin:0 0 .8rem;}
.contact__intro{color:var(--soft-ink);max-width:52ch;}

/* ---------- M. CONTACT FORM ---------- */
.cform{max-width:56ch;}
.cform__row{margin:0 0 1.3rem;}
.cform__label{
  display:block;
  font-family:var(--body);
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  color:var(--warm);
  margin:0 0 .5rem;
}
.cform__opt{
  text-transform:none;
  letter-spacing:.02em;
  font-weight:400;
  color:var(--soft-ink);
}
.cform__input{
  width:100%;
  min-height:44px;
  font-family:var(--body);
  font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--hairline);
  padding:.65em .9em;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.cform__input::placeholder{color:var(--warm);}
.cform__input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
.cform__textarea{resize:vertical;min-height:8em;line-height:1.5;}
.cform__actions{margin:1.6rem 0 0;}
.cform__msg{
  font-size:.94rem;
  color:var(--accent);
  margin:1.2rem 0 0;
  padding:.8rem 1rem;
  border-left:2px solid var(--accent);
  background:#F8F3E7;
}
.cform__msg[hidden]{display:none;}

/* ---------- N. BULK & INSTITUTIONAL PANEL ---------- */
.bulk-panel{
  background:#F8F3E7;
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-card);
  padding:2.2rem 2rem;
}
.bulk-panel h2{font-size:1.5rem;margin:0 0 1rem;}
.bulk-panel p{color:var(--soft-ink);}
.bulk-panel__list{list-style:none;margin:1.4rem 0;padding:0;}
.bulk-panel__list li{
  font-size:.98rem;
  color:var(--ink);
  line-height:1.5;
  padding:.75rem 0;
  border-top:1px solid var(--hairline);
}
.bulk-panel__note{font-size:.9rem;color:var(--warm);margin:1.2rem 0 0;}

/* ---------- O. LEGAL / PRIVACY PROSE ---------- */
.legal h2{
  font-size:1.35rem;
  margin:2.4rem 0 .9rem;
}
.legal h2:first-child{margin-top:0;}
.legal p{color:var(--soft-ink);}
.legal strong{color:var(--ink);font-weight:600;}
.legal__list{margin:0 0 1.25rem;padding-left:1.2rem;}
.legal__list li{color:var(--soft-ink);line-height:1.55;margin:0 0 .7rem;}

/* ---------- P. CONTACT/PRIVACY RESPONSIVE ---------- */
@media (max-width:840px){
  .contact__grid{grid-template-columns:1fr;gap:2.4rem;}
}

/* ---------- 23. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;}
  .reveal,.stagger>*{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero__copy>*,.hero__media{opacity:1 !important;transform:none !important;animation:none !important;}
  .compare .compare__col{opacity:1 !important;transform:none !important;animation:none !important;}
  .compare .compare__spine{transform:none !important;animation:none !important;}
  .cover-photo{transition:none !important;transform:none !important;}
  .card:hover,.btn:hover{transform:none !important;}
}

/* =====================================================================
   PAGE ADDITIONS — book.html & sample-chapter.html (appended, Phase 2)
   Reuses existing tokens, band system, cards, buy panel, and footer.
   No new colours introduced.
   ===================================================================== */

/* ---------- long-form description prose (book.html) ---------- */
.prose p{color:var(--soft-ink);}
.prose p:last-child{margin-bottom:0;}
.prose em{color:var(--ink);font-style:italic;}

/* ---------- three-up learn cards (book.html) ---------- */
.cards--three{grid-template-columns:repeat(3,1fr);max-width:1000px;}

/* ---------- chapter arc / journey (book.html) ---------- */
.arc{list-style:none;margin:0 auto;padding:0;max-width:760px;}
.arc__step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:1.6rem;
  align-items:baseline;
  padding:1.8rem 0;
  border-top:1px solid var(--hairline);
}
.arc__step:first-child{border-top:0;}
.arc__num{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:1.5rem;
  line-height:1;
  color:var(--accent);
  min-width:2ch;
}
.arc__body h3{margin:0 0 .4rem;font-size:1.2rem;}
.arc__body p{margin:0;color:var(--soft-ink);font-size:1rem;line-height:1.5;}

/* ---------- look inside gallery (book.html) ---------- */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  max-width:1000px;
  margin:0 auto;
}
.gallery__item{
  margin:0;
  background:#F8F3E7;
  border:1px solid var(--hairline);
  padding:9px;
  box-shadow:var(--shadow-card);
}
.gallery__item img{border:1px solid var(--hairline);width:100%;}

/* ---------- specifications block (book.html) ---------- */
.specs{max-width:640px;margin:0 auto;padding:0;}
.specs__row{
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding:.9rem 0;
  border-top:1px solid var(--hairline);
}
.specs__row:first-child{border-top:0;}
.specs dt{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.74rem;
  font-weight:600;
  color:var(--warm);
  margin:0;
}
.specs dd{margin:0;font-size:1rem;color:var(--ink);text-align:right;}

/* ---------- sample chapter: excerpt panel (sample-chapter.html) ---------- */
.excerpt{
  max-width:640px;
  margin:0 auto;
  background:var(--paper);
  border:1px solid var(--hairline);
  box-shadow:var(--shadow-card);
  padding:2.6rem 2.4rem;
  position:relative;
}
.excerpt__tag{
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.7rem;
  font-weight:600;
  color:var(--accent);
  margin:0 0 1.4rem;
}
.excerpt__body p{
  font-family:var(--display);
  font-size:1.24rem;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 1.1rem;
}
.excerpt__body em{color:var(--accent);font-style:italic;}
.excerpt__note{
  font-size:.82rem;
  color:var(--warm);
  margin:1.8rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--hairline);
  line-height:1.5;
}

/* ---------- sample chapter: email capture (sample-chapter.html) ---------- */
.capture{max-width:640px;margin:0 auto;}
.capture__form{max-width:520px;margin:0 auto;}
.capture__label{
  display:block;
  font-family:var(--body);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.74rem;
  font-weight:600;
  color:var(--warm);
  margin:0 0 .7rem;
}
.capture__row{display:flex;gap:.7rem;flex-wrap:wrap;}
.capture__input{flex:1;min-width:0;}
.capture__fineprint{font-size:.8rem;color:var(--warm);margin:.9rem 0 0;}
.capture__msg{
  text-align:center;
  font-size:1rem;
  color:var(--accent);
  margin:1.4rem auto 0;
  max-width:520px;
}
.capture__msg.is-error{color:var(--accent-deep);}
.capture__msg[hidden]{display:none;}

/* ---------- book/sample responsive ---------- */
@media (max-width:840px){
  .cards--three{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:720px){
  .cards--three{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr;max-width:420px;}
  .excerpt{padding:2rem 1.5rem;}
  .capture__row{flex-direction:column;}
  .capture__row .btn{width:100%;text-align:center;}
}