/* ==========================================================================
   Susan Bauerfeld, PhD — Skills for Life
   Static clone stylesheet. No frameworks, no JavaScript.
   Palette and type scale taken from the original Beaver Builder theme skin.
   ========================================================================== */

:root {
  --teal:        #2198a0;
  --teal-dark:   #17686d;
  --blue:        #6aa3d8;
  --green:       #18a065;   /* the green loop of the logo mark */
  --green-dark:  #12804f;
  --text:        #808080;
  --text-strong: #5f5f5f;
  --ink:         #2b2b2b;
  --bg:          #f2f2f2;
  --white:       #ffffff;
  --rule:        #e6e6e6;
  --footer-bar:  #3d3d3d;
  --wrap:        1100px;
  --measure:     68ch;      /* ~72 characters: comfortable line length */
  --font-body:   "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-head:   "Poppins", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  word-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6em;
  color: var(--teal);
  font-family: var(--font-head);
  font-weight: 500;
  line-height: 1.4;
}
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover, a:focus { color: var(--teal); text-decoration: underline; }

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

hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }

.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  display: inline-block;
  padding: 10px 16px;
  background: var(--teal);
  color: #fff;
}

/* ---------- Layout helpers ------------------------------------------------ */

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 60px 0; }
.section--tight { padding: 36px 0; }

/* The faint interlinked-rings pattern used behind several rows. */
.section--pattern {
  background-color: rgba(106, 163, 216, .08);
  background-image: url(../images/connected.png);
  background-repeat: repeat;
}
.section--pattern-strong { background-color: rgba(106, 163, 216, .1); }
.section--white { background-color: var(--white); }

.cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.cols > * { min-width: 0; }
.cols--top { align-items: start; }
.cols--narrow-left { grid-template-columns: 40% 1fr; }
.cols--narrow-right { grid-template-columns: 1fr 40%; }

/* ---------- Buttons ------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 10px 24px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover, .btn:focus {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
  text-decoration: none;
}
.btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.btn--ghost:hover, .btn--ghost:focus { background: #fff; color: var(--teal); border-color: #fff; }

/* ---------- Header -------------------------------------------------------- */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 5;
}
.site-header__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 14px 24px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
}
.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: 230px; }
.site-header__bar { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 22px;
}
.main-nav a {
  display: block;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: .02em;
  text-transform: uppercase;
  padding: 4px 0;
}
.main-nav a:hover, .main-nav a:focus { color: var(--teal); text-decoration: none; }
.main-nav .is-current > a { color: var(--teal); }

/* The book is the headline item, so it carries the logo's green. */
.main-nav a[href="base-camp-parenting-book.html"] { color: var(--green); }
.main-nav a[href="base-camp-parenting-book.html"]:hover,
.main-nav a[href="base-camp-parenting-book.html"]:focus { color: var(--green-dark); }

/* ---------- Hero ---------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  background-color: rgba(106, 163, 216, .08);
  border-bottom: 1px solid var(--rule);
}
/* One mountain, sitting under the copy on the left. Anchored to the content
   column (not the viewport edge) so it tracks the text on wide screens, and
   scaled with 26vw below ~1270px so it never reaches the book on the right. */
.hero::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: max(0px, calc(50% - 560px));
  width: 72%;
  height: min(330px, 26vw);
  background-image: url(../images/book-banner.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: left bottom;
  opacity: .13;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 70px 20px;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 60px;
  align-items: center;
}
.hero__copy { max-width: 620px; }

/* ---------- Book, rendered as an object rather than a flat cover --------- */

.hero__book { margin: 0; }
.book3d {
  --tilt: 0deg;
  display: block;
  position: relative;
  transform: rotate(var(--tilt));
  transition: transform .25s ease, filter .25s ease;
}
.hero__book .book3d { --tilt: -1.5deg; }
.book3d img {
  display: block;
  width: 100%;
  border-radius: 2px 4px 4px 2px;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18);
}
/* Page block, peeking out along the fore edge. */
.book3d__pages {
  position: absolute;
  top: 1.5%;
  right: -9px;
  height: 97%;
  width: 10px;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, .22));
}
/* Spine shading: dark gutter, then the slight sheen of a curved cover. */
.book3d__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 18px;
  border-radius: 2px 0 0 2px;
  background: linear-gradient(90deg,
    rgba(0,0,0,.34) 0,
    rgba(0,0,0,.14) 45%,
    rgba(255,255,255,.34) 78%,
    rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.book3d:hover, .book3d:focus-visible { transform: rotate(var(--tilt)) translateY(-6px); }
.book3d:hover img, .book3d:focus-visible img {
  box-shadow: 0 26px 52px rgba(0, 0, 0, .32), 0 3px 8px rgba(0, 0, 0, .2);
}
.hero__book figcaption {
  margin-top: 20px;
  text-align: center;
  font-family: var(--font-head);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-strong);
}
.hero__eyebrow {
  display: block;
  font-family: var(--font-head);
  font-size: 34px;
  line-height: 1.25;
  color: var(--teal);
  font-weight: 500;
}
.hero__title {
  font-size: 54px;
  line-height: 1.12;
  margin: 0 0 .35em;
  color: var(--teal);
}
.hero__sub {
  color: #7e7e7e;
  font-family: var(--font-head);
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 1.4em;
}

/* Interior pages use a shorter banner with a page title over a photo. */
.page-banner {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  text-align: center;
  padding: 40px 20px;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .28);
}
.page-banner h1, .page-banner h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-size: 44px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
/* The book page uses the cover's own mountain artwork rather than a photo.
   It is light art on white, so the heading stays teal and the dark scrim the
   photo banners rely on is suppressed. */
.page-banner--book {
  background-color: rgba(106, 163, 216, .08);
  background-image: url(../images/book-banner.png);
  background-position: right bottom;
  background-size: auto 80%;
  border-bottom: 1px solid var(--rule);
  min-height: 250px;
}
.page-banner--book::before { background: none; }
.page-banner--book h1 {
  color: var(--teal);
  text-shadow: none;
}
.page-banner--book h1 span {
  display: block;
  margin-top: .25em;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
}
.page-banner--nautilus { background-image: url(../images/Snow-Nautilis-_0005-copy.jpeg); }
.page-banner--allium   { background-image: url(../images/Laurie-Klein-Allium-and-Hands-16x16-2014.jpeg); }
.page-banner--hands    { background-image: url(../images/shutterstock_762804607-scaled.jpg); }
.page-banner--sand     { background-image: url(../images/fmf21737-scaled.jpg); }
.page-banner--stones   { background-image: url(../images/shutterstock_1157193943-scaled.jpg); }

/* ---------- Portrait with teal ring -------------------------------------- */

.portrait { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.portrait::before {
  content: "";
  position: absolute;
  left: -50vw;
  right: 55%;
  top: 50%;
  height: 2px;
  background: var(--teal);
}
.portrait img {
  position: relative;
  width: 340px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 8px solid #fff;
  box-shadow: 0 0 0 10px var(--teal);
  background: #fff;
}
.portrait__credit {
  margin-top: 14px;
  font-size: 14px;
  text-align: center;
  width: 100%;
}

/* ---------- Check lists --------------------------------------------------- */

.checklist { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checklist li {
  position: relative;
  padding: 0 0 12px 40px;
  line-height: 1.5;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.checklist--sub li::before {
  background: none;
  content: "\203A";
  color: var(--teal);
  font-size: 22px;
  line-height: 1;
  text-align: center;
}
.checklist--sub { margin-left: 30px; }
.checklist--two { columns: 2; column-gap: 40px; }
.checklist--two li { break-inside: avoid; }

/* ---------- Call-to-action band ------------------------------------------ */

.cta-band {
  position: relative;
  padding: 70px 20px;
  background-image: url(../images/shutterstock_1157193943-scaled.jpg);
  background-repeat: no-repeat;
  background-position: 0% 40%;
  background-size: cover;
}
.cta-band--sand { background-image: url(../images/fmf21737-scaled.jpg); background-position: center center; }
.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.77);
}
.cta-card {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: 40px 50px;
  border-radius: 90px;
  background: var(--teal);
  color: #fff;
  text-align: center;
}
.cta-card h2 { color: #fff; }
.cta-card a { color: #fff; text-decoration: underline; }
.cta-card .btn { margin-top: 14px; }

/* ---------- Testimonial carousel (CSS only) ------------------------------- */

.quotes {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  scrollbar-width: none;
}
.quotes::-webkit-scrollbar { display: none; }
.quotes > li {
  flex: 0 0 100%;
  scroll-snap-align: center;
  text-align: center;
  padding: 0 6px;
}
.quotes blockquote { margin: 0; }
.quotes blockquote { max-width: 620px; margin: 0 auto; }
.quotes cite {
  display: block;
  margin-top: .6em;
  color: var(--text-strong);
  font-size: 15px;
  font-style: normal;
}

.quotes-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.quotes-dots a {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(33,152,160,.35);
}
.quotes-dots a:hover, .quotes-dots a:focus { background: var(--teal); }

/* ---------- Cards / panels ------------------------------------------------ */

.panel {
  background: var(--teal);
  color: #fff;
  border-radius: 20px;
  padding: 36px 40px;
}
.panel h2, .panel h3 { color: #fff; }
.panel a { color: #fff; text-decoration: underline; }
.panel ul { padding-left: 20px; }
.panel .checklist { padding-left: 0; }
.panel .checklist li::before { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232198a0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }

.panel-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border-radius: 20px;
  overflow: hidden;
  background: var(--teal);
}
.panel-pair > .panel { border-radius: 0; }
.panel-pair__media {
  background-color: #fff;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 320px;
}

.section--network {
  position: relative;
  background-image: url(../images/fmf6726-scaled.jpg);
  background-size: cover;
  background-position: center center;
}
.section--network::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .86);
}
.section--network > * { position: relative; z-index: 1; }

.panel-pair__media--contain { background-size: contain; background-color: #fff; }
.section-heading { text-align: center; margin-bottom: 40px; }
.section-heading h2 { margin-bottom: .3em; }
.section-heading::after {
  content: "";
  display: block;
  width: 84px;
  height: 2px;
  margin: 0 auto;
  background: var(--teal);
}

.media-figure { margin: 0; }
.media-figure img { border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .10); }
.media-figure figcaption { font-size: 14px; text-align: center; margin-top: 10px; }

.book-cover { max-width: 420px; margin: 0 auto 40px; }
/* Book cover beside the retailer buttons, matching the "Get the Book"
   section on basecampparents.com (teal card, label over a white logo). */
.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: center;
  margin-bottom: 44px;
}
.book-hero .book-cover { margin: 0; }

.buy-buttons { display: flex; flex-direction: column; gap: 18px; }
.buy-button {
  display: block;
  padding: 18px 16px;
  background: #037c80;
  text-align: center;
  transition: background-color .2s ease, transform .2s ease;
}
.buy-button:hover, .buy-button:focus-visible {
  background: #026467;
  transform: translateY(-2px);
  text-decoration: none;
}
.buy-button__label {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-family: var(--font-head);
  font-size: 19px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.buy-button img { width: auto; max-height: 30px; margin: 0 auto; }
.buy-button img[alt="Amazon"] { max-height: 34px; }

/* Deliberately unlike the retailer cards: outlined pill in the site's teal,
   so it reads as "somewhere else to go" rather than a fourth place to buy. */
.talks-button {
  display: block;
  margin-top: 8px;
  padding: 15px 22px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: transparent;
  color: var(--teal);
  font-family: var(--font-head);
  font-size: 17px;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.talks-button:hover, .talks-button:focus-visible {
  background: var(--teal);
  color: #fff;
  text-decoration: none;
}



.book-events-link {
  margin-top: 1.8em;
  padding-top: 1.4em;
  border-top: 1px solid var(--rule);
  font-family: var(--font-head);
  font-size: 20px;
  text-align: center;
}
.book-events-link a::after { content: " \203A"; }

.prose { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.prose h2 { margin-top: 1.4em; }
.prose h3 { margin-top: 1.7em; color: var(--teal-dark); }
.prose h3 span {
  display: block;
  margin-top: .15em;
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
}
/* A short accent rule turns a long run of talks into scannable entries. */
.prose h3::before {
  content: "";
  display: block;
  width: 40px;
  margin-bottom: .7em;
  border-top: 2px solid var(--teal);
}
.prose > :first-child { margin-top: 0; }

.event { margin-bottom: 44px; }
.event h2 { margin-bottom: .25em; }
.event h2 span { display: block; font-size: 20px; color: var(--text-strong); }

.note { font-size: 14px; }

/* ---------- Forms --------------------------------------------------------- */

/* Constant Contact injects its own markup and styles here; just give it the
   same measure as the rest of the page so it does not run full-bleed. */
.ctct-slot { max-width: 640px; margin-bottom: 20px; }
.ctct-slot .ctct-form-wrapper,
.ctct-slot .ctct-inline-form { max-width: 100%; }

.form {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 30px;
  max-width: 640px;
}
.form--teal { background: var(--teal); border-color: var(--teal); color: #fff; }
.form--teal a { color: #fff; }
.form p { margin: 0 0 18px; }
.form label { display: block; font-size: 15px; margin-bottom: 6px; }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.form textarea { min-height: 150px; resize: vertical; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form button {
  border: 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 15px;
  padding: 11px 30px;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
}
.form--teal button { background: #fff; color: var(--teal); }
.form button:hover { background: var(--teal-dark); color: #fff; }
.form fieldset { border: 0; margin: 0 0 18px; padding: 0; }
.form legend { padding: 0; margin-bottom: 8px; font-size: 15px; }
.form .choice { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.form .choice input { margin-top: 5px; }
.form .choice label { margin: 0; }

audio { width: 100%; max-width: 560px; }

/* ---------- Footer -------------------------------------------------------- */

.site-footer { background: var(--bg); }
.site-footer__top {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 44px 20px;
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 30px 40px;
  align-items: start;
}
.site-footer__logo img { width: 150px; margin: 0 auto; }

.info-list { list-style: none; margin: 0; padding: 0; scroll-margin-top: 40px; }
.info-list li { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: 16px; }
.info-list .icon { flex: 0 0 22px; width: 22px; height: 22px; color: var(--teal); }
.info-list .icon svg { width: 22px; height: 22px; display: block; fill: currentColor; }

.footer-nav { background: var(--footer-bar); }
.footer-nav ul {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-nav li + li { border-left: 1px solid rgba(255,255,255,.35); }
.footer-nav a {
  display: block;
  padding: 2px 13px;
  color: #fff;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.footer-nav a:hover, .footer-nav a:focus { color: var(--blue); text-decoration: none; }

.colophon {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 14px 20px 30px;
  font-size: 14px;
}

/* ---------- Finishing touches --------------------------------------------- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}
/* On teal surfaces the teal ring disappears, so invert it there. */
.panel :focus-visible,
.cta-card :focus-visible,
.buy-button:focus-visible,
.form--teal :focus-visible {
  outline-color: #fff;
}

::selection { background: rgba(33, 152, 160, .18); }

/* Active dot, no JavaScript: clicking a dot :targets its slide, and :has()
   lets the matching dot pick that up. Falls back to all-inactive if unsupported. */
.quotes-dots a { transition: background-color .2s ease, transform .2s ease; }
.quotes:not(:has(:target)) ~ .quotes-dots li:first-child a,
.quotes:has(#q-1:target) ~ .quotes-dots li:nth-child(1) a,
.quotes:has(#q-2:target) ~ .quotes-dots li:nth-child(2) a,
.quotes:has(#q-3:target) ~ .quotes-dots li:nth-child(3) a,
.quotes:has(#q-4:target) ~ .quotes-dots li:nth-child(4) a,
.quotes:has(#q-5:target) ~ .quotes-dots li:nth-child(5) a,
.quotes:has(#q-6:target) ~ .quotes-dots li:nth-child(6) a,
.quotes:has(#q-7:target) ~ .quotes-dots li:nth-child(7) a,
.quotes:has(#q-8:target) ~ .quotes-dots li:nth-child(8) a,
.quotes:has(#q-9:target) ~ .quotes-dots li:nth-child(9) a,
.quotes:has(#e-1:target) ~ .quotes-dots li:nth-child(1) a,
.quotes:has(#e-2:target) ~ .quotes-dots li:nth-child(2) a,
.quotes:has(#e-3:target) ~ .quotes-dots li:nth-child(3) a,
.quotes:has(#e-4:target) ~ .quotes-dots li:nth-child(4) a,
.quotes:has(#e-5:target) ~ .quotes-dots li:nth-child(5) a,
.quotes:has(#e-6:target) ~ .quotes-dots li:nth-child(6) a,
.quotes:has(#e-7:target) ~ .quotes-dots li:nth-child(7) a,
.quotes:has(#e-8:target) ~ .quotes-dots li:nth-child(8) a,
.quotes:has(#e-9:target) ~ .quotes-dots li:nth-child(9) a,
.quotes:has(#e-10:target) ~ .quotes-dots li:nth-child(10) a,
.quotes:has(#e-11:target) ~ .quotes-dots li:nth-child(11) a {
  background: var(--teal);
  transform: scale(1.25);
}


/* Anchor jumps and in-page links should clear the top edge. */
:target { scroll-margin-top: 40px; }

.page-banner h1, .page-banner h2 { max-width: 900px; }

/* The Constant Contact embed brings its own styles; hold it to the page measure. */
.ctct-slot { margin-top: 10px; }

/* Mailing-list page: centre the sign-up column (intro, embed, and the
   no-JS fallback form) rather than letting it hang off the left edge. */
.section--signup > .wrap > p,
.section--signup .ctct-slot,
.section--signup .form { margin-left: auto; margin-right: auto; }
.section--signup .ctct-slot { max-width: 640px; }
.section > .wrap > p { max-width: var(--measure); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 900px) {
  body { font-size: 17px; }
  .cols,
  .cols--narrow-left,
  .cols--narrow-right,
  .panel-pair,
  .book-hero,
  .form .row { grid-template-columns: 1fr; }
  /* Stacked: re-centre the cover and the buttons in the single column. */
  .book-hero .book-cover { margin-left: auto; margin-right: auto; }
  .buy-buttons { max-width: 420px; margin-left: auto; margin-right: auto; width: 100%; }
  .cols { gap: 34px; }
  .panel-pair { border-radius: 20px; }
  .panel-pair__media { min-height: 240px; order: 2; }
  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__logo img { margin: 0; }
  .hero { min-height: 0; }
  .hero__inner { grid-template-columns: 1fr; gap: 40px; }
  /* Stacked: one smaller, fainter copy so it stays behind the book. */
  /* Stacked: the book sits below the copy, so the mountain would end up
     behind it. Drop it rather than crowd the cover. */
  .hero::before { display: none; }
  .hero__book { justify-self: center; max-width: 220px; }
  .hero__title { font-size: 40px; }
  .hero__eyebrow { font-size: 26px; }
  .hero__sub { font-size: 19px; }
  .portrait::before { display: none; }
  .checklist--two { columns: 1; }
  .site-header__inner { flex-direction: column; align-items: stretch; }
  .site-header__bar { align-items: stretch; }
  .main-nav ul { justify-content: flex-start; }
  h1 { font-size: 30px; }
  h2 { font-size: 26px; }
  h3 { font-size: 21px; }
  .page-banner h1, .page-banner h2 { font-size: 34px; }
  /* Narrow: the mountains would sit under the heading, so drop them below it. */
  .page-banner--book {
    align-items: flex-start;
    min-height: 300px;
    padding-top: 34px;
    padding-bottom: 130px;
    background-size: auto 42%;
    background-position: center bottom;
  }
  .cta-card { padding: 34px 26px; border-radius: 30px; }
  .panel { padding: 28px 24px; }
}