/* ============================================================
   CARLA RIPLEY — shared stylesheet
   Cinzel wordmark. Karla for headings and body. Crimson Pro
   italic is reserved for pull quotes and nothing else.
   Palette below.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Crimson+Pro:ital,wght@0,400;0,500;1,400;1,500;1,600&family=Karla:wght@300;400;500;700&display=swap');

:root {
  --parchment:  #F7F0E6;
  --honey:      #C2872B;
  --sage:       #6F7F5C;
  --ink:        #2C2620;
  --rose:       #C98F86;
  --clay:       #E3D2BE;

  --body-font:    'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
  --display-font: 'Crimson Pro', Georgia, serif;
  --wordmark-font:'Cinzel', Georgia, serif;

  --measure: 680px;      /* comfortable reading width */
  --gutter: 24px;

  /* ---- Type scale. Seven steps, nothing else. ----
     If a size is not on this list it does not belong on the site.
     xs   labels, nav, eyebrows, tags
     sm   fine print, captions, disclosures
     base body copy, card copy
     md   quiet emphasis, standfirst links
     lg   ledes, pull quotes, card headings
     xl   section headings (h2)
     2xl  page headline (h1)                                        */
  --fs-xs:   0.72rem;
  --fs-sm:   0.88rem;
  --fs-base: 1rem;
  --fs-md:   1.15rem;
  --fs-lg:   1.35rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.4rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: 0.01em;
}

/* ---------- Layout shell ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page { padding: 40px 0 72px; }

/* ---------- Wordmark + nav ---------- */
.masthead {
  text-align: center;
  padding: 32px 0 0;
}
.wordmark {
  font-family: var(--wordmark-font);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: 0.28em;
  color: var(--ink);
  text-decoration: none;
  display: inline-block;
  text-indent: 0.28em; /* balance the tracking */
}
.wordmark:hover { color: var(--honey); }

nav.nav {
  margin: 22px 0 0;
  text-align: center;
}
nav.nav a {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7a7168;
  text-decoration: none;
  margin: 0 14px;
  line-height: 2.4;
  white-space: nowrap;
}
nav.nav a:hover { color: var(--honey); }
nav.nav a.current { color: var(--honey); }

.rule {
  border: 0;
  border-top: 1px solid var(--clay);
  margin: 22px auto 0;
  max-width: var(--measure);
}

/* ---------- Droplet ---------- */
.droplet {
  display: block;
  margin: 0 auto;
  width: 30px;
  height: auto;
}
.droplet--sm { width: 22px; }
.droplet--lg { width: 44px; }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--honey);
  text-align: center;
  margin: 0 0 18px;
}
.eyebrow--sage { color: var(--sage); }

h2.display, .display {
  font-family: var(--body-font);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.012em;
}

/* The page headline keeps the italic display face. Section headings
   below it are Karla, which sets the hierarchy without shouting. */
h1.display {
  text-wrap: balance;
  font-family: var(--display-font);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.005em;
  line-height: 1.22;
  color: var(--ink);
  font-size: var(--fs-2xl);
  text-align: center;
  margin: 0 0 22px;
}

h2.display {
  font-size: var(--fs-xl);
  margin: 48px 0 18px;
}

/* For a heading that is Carla speaking rather than a label.
   Centred and italic, so it reads as a line rather than a signpost. */
h1.display--voice, h2.display--voice, .display--voice {
  font-family: var(--display-font);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.005em;
  text-align: center;
  line-height: 1.28;
  text-wrap: balance;         /* keeps the last line from stranding a word */
}
.lede {
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: #5c554d;
  text-align: center;
  margin: 0 auto 8px;
  max-width: 34ch;
  text-wrap: pretty;          /* stops a single word stranding on the last line */
}

p { margin: 0 0 20px; }

.section-label {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 40px 0 6px;
}

a.inline { color: var(--honey); text-decoration: underline; text-underline-offset: 3px; }
a.inline:hover { color: var(--ink); }

.pull {
  font-family: var(--display-font);
  font-style: italic;
  font-weight: 500;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--sage);
  text-align: center;
  margin: 44px auto;
  max-width: 30ch;
}
.pull--rose { color: var(--rose); }
.pull--ink  { color: var(--ink); }

/* ---------- Portrait / images ---------- */
.portrait-circle {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 8px auto 0;
}
figure { margin: 32px 0; }
figure img { width: 100%; height: auto; border-radius: 3px; display: block; }
figure figcaption {
  font-family: var(--body-font);
  font-style: normal;
  color: var(--rose);
  text-align: center;
  font-size: var(--fs-base);
  margin-top: 12px;
}

/* placeholder box for images not yet supplied */
.photo-slot {
  border: 1px dashed var(--clay);
  border-radius: 4px;
  padding: 48px 24px;
  text-align: center;
  color: #a89e92;
  font-family: var(--body-font);
  font-style: normal;
  margin: 32px 0;
}

/* ---------- Doorway cards (home) ---------- */
.doorway {
  display: block;
  border: 1px solid var(--clay);
  border-radius: 6px;
  padding: 30px 28px;
  margin: 18px 0;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.doorway:hover { border-color: var(--honey); box-shadow: 0 6px 22px rgba(44,38,32,.06); }
.doorway h3 {
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-md);
  margin: 0 0 8px;
  display: flex; justify-content: space-between; align-items: center;
}
.doorway h3 .arw { color: var(--honey); font-style: normal; }
.doorway p { margin: 0; color: #5c554d; font-size: var(--fs-base); }

/* ---------- Footer ---------- */
footer.foot {
  text-align: center;
  padding: 20px 0 60px;
}
footer.foot .wordmark { font-size: var(--fs-lg); }
footer.foot .droplet { margin: 20px auto 18px; }
footer.foot .foot-note {
  font-family: var(--body-font);
  font-style: normal;
  color: #8a8177;
  font-size: var(--fs-sm);
  margin-top: 18px;
}

/* ---------- Ingredient chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.chip {
  border: 1px solid var(--clay);
  border-radius: 40px;
  padding: 12px 22px;
  text-decoration: none;
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color .2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.chip:hover { border-color: var(--honey); }
.chip.hero { border-color: var(--honey); font-weight: 700; }
.chip .tag {
  font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase;
  color: #a89e92;
}

/* ---------- "For you" audience blocks ---------- */
.foryou { border-left: 3px solid var(--sage); padding: 6px 0 6px 22px; margin: 30px 0; }
.foryou.honey { border-left-color: var(--honey); }
.foryou .tag {
  font-family: var(--body-font); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--sage); margin: 0 0 4px;
}
.foryou.honey .tag { color: var(--honey); }
.foryou h3 {
  font-family: var(--body-font); font-style: normal; font-weight: 700;
  font-size: var(--fs-lg); margin: 0 0 12px;
}

/* ---------- Disclosure / fine print ---------- */
.fineprint {
  font-size: var(--fs-sm);
  color: #8a8177;
  line-height: 1.6;
  margin: 12px 0;
}
.disclosure-band {
  border-top: 1px solid var(--clay);
  margin-top: 48px;
  padding-top: 28px;
}

/* ---------- Buttons / CTA links ---------- */
.cta-row { text-align: center; margin: 30px 0; }
.cta-link {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #7a7168;
  text-decoration: none;
}
.cta-link:hover { color: var(--honey); }

/* ---------- Practitioner gate banner ---------- */
.gate-banner {
  background: var(--parchment);
  border-radius: 4px;
  padding: 12px 20px;
  text-align: center;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a8177;
  margin-bottom: 30px;
}

.backlink { display: inline-block; margin: 0 0 24px; color: var(--honey); text-decoration: none; font-size: var(--fs-sm); }
.backlink:hover { color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  body { font-size: 17px; }
  h1.display { font-size: 1.95rem; }
  h2.display { font-size: 1.5rem; }
  nav.nav a { margin: 0 8px; }
  .wordmark { font-size: var(--fs-lg); letter-spacing: 0.2em; }
  .portrait-circle { width: 168px; height: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* keyboard focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
}

/* ============================================================
   FORMS — shared, used by contact.html and your-skin.html
   ============================================================ */

.form-field { margin: 0 0 20px; }
.form-field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.form-field label .optional {
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  opacity: .55;
}
.form-field .hint {
  font-family: var(--body-font);
  font-style: normal;
  font-size: var(--fs-sm);
  opacity: .72;
  margin: -2px 0 8px;
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field select,
.form-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--clay);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: var(--fs-base);
  line-height: 1.5;
}
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field select { appearance: none; background-image: none; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: 2px solid var(--honey);
  outline-offset: 1px;
}
.field-row { display: flex; gap: 16px; }
.field-row .form-field { flex: 1 1 0; min-width: 0; }
@media (max-width: 640px) { .field-row { display: block; } }

.choice-list label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 12px;
  cursor: pointer;
}
.choice-list input { margin-right: 10px; }

.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

button.cta-link {
  border: 1px solid var(--honey);
  background: none;
  cursor: pointer;
  font-family: var(--body-font);
}


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

.foot-search {
  display: flex;
  gap: 8px;
  max-width: 420px;
  margin: 34px auto 30px;
}
.foot-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px 13px;
  font-family: var(--body-font);
  font-size: var(--fs-base);
  color: var(--ink);
  background: #fffdf9;
  border: 1px solid var(--clay);
  border-radius: 2px;
  -webkit-appearance: none;
  appearance: none;
}
.foot-search input[type="search"]::placeholder { opacity: 0.6; }
.foot-search input[type="search"]:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}
.foot-search button {
  flex: 0 0 auto;
  padding: 11px 22px;
  font-family: var(--body-font);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--parchment);
  background: var(--ink);
  border: none;
  cursor: pointer;
}
.foot-search button:hover { background: var(--sage); }

/* Footer nav sits quietly beneath the search. */
.foot .nav { opacity: 0.7; }
.foot .nav:hover { opacity: 1; }

@media (max-width: 420px) {
  .foot-search { gap: 6px; }
  .foot-search button { padding: 11px 16px; }
}

/* Secondary navigation row — personal pages under the main nav */
nav.nav--sub { margin-top: 4px; }
nav.nav--sub a {
  font-size: var(--fs-xs);
  transform: scale(0.94);
  letter-spacing: 0.16em;
  margin: 0 11px;
  opacity: 0.66;
}
nav.nav--sub a:hover { opacity: 1; }
@media (max-width: 640px) {
  nav.nav--sub a { margin: 0 6px; }
}

/* ============================================================
   SHOP BUTTON IN THE NAV
   Sits as the last item of the main nav on every page so buying
   is never more than one click away, from anywhere on the site.
   ============================================================ */

nav.nav a.nav-shop {
  color: #fff;
  background: var(--honey);
  border-radius: 40px;
  padding: 7px 20px;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin-left: 18px;
  transition: background .2s;
}
nav.nav a.nav-shop:hover { background: var(--ink); color: #fff; }
.foot .nav a.nav-shop { background: var(--sage); }
.foot .nav a.nav-shop:hover { background: var(--ink); }

@media (max-width: 640px) {
  nav.nav a.nav-shop { display: inline-block; margin: 8px 0 2px; padding: 8px 22px; }
}

/* ============================================================
   LANES — the "where would you like to start" chooser
   Same family as the ingredient chips, sized to be the first
   thing a visitor acts on. Labels describe the reader, never a
   diagnosis: see the LactiGo banned-terms note in the project.
   ============================================================ */

.lanes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;      /* every tile the same height, however the text wraps */
  gap: 14px;
  margin: 26px 0 8px;
}

.lane {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 6px;
  border: 1px solid var(--ink);
  background: var(--ink);
  border-radius: 6px;
  padding: 22px 20px;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.lane:hover {
  background: var(--honey);
  border-color: var(--honey);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(44, 38, 32, .12);
}

.lane-title {
  font-family: var(--body-font);
  font-weight: 600;
  font-style: normal;
  font-size: var(--fs-md);
  line-height: 1.3;
  color: #fff;
}
.lane-sub {
  font-family: var(--body-font);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, .86);
}

/* The shop tile leads the grid, full width. Same treatment, more room. */
.lane--shop {
  grid-column: 1 / -1;
  padding: 26px 22px;
  background: var(--honey);
  border-color: var(--honey);
}
.lane--shop:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.lane--shop .lane-title { font-size: var(--fs-lg); }

@media (max-width: 560px) {
  .lanes { grid-template-columns: 1fr; gap: 12px; }
  .lane { padding: 18px 18px; }
}

/* ============================================================
   PRODUCT CARDS
   Photo, name, one line, Buy now. No prices: LactiGo set them,
   in USD, and change them. A wrong price is worse than none.
   Every buy link must end in /carlaripley for affiliate credit.
   ============================================================ */

.products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0 10px;
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--clay);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.product-card:hover { border-color: var(--honey); box-shadow: 0 6px 22px rgba(44,38,32,.06); }

.product-shot {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  background: var(--parchment);
}
/* Shown in place of a photo until Carla supplies one. */
.product-shot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  font-family: var(--body-font);
  font-style: normal;
  font-size: var(--fs-sm);
  color: #a89e92;
  border-bottom: 1px dashed var(--clay);
}

.product-body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.product-name {
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.25;
  margin: 0 0 8px;
  min-height: 2.5em;        /* keeps the size labels on one line across cards */
  display: flex;
  align-items: flex-end;
}
.product-size {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey);
  margin: 0 0 6px;
}
.product-note {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #5c554d;
  margin: 0 0 18px;
  flex: 1 1 auto;
}
.buy-now {
  align-self: stretch;
  text-align: center;
  display: inline-block;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--honey);
  border-radius: 40px;
  padding: 11px 24px;
  transition: background .2s;
}
.buy-now:hover { background: var(--ink); }
.buy-now--quiet {
  color: var(--honey);
  background: none;
  border: 1px solid var(--honey);
}
.buy-now--quiet:hover { color: #fff; background: var(--honey); }

@media (max-width: 860px) {
  .products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .products { grid-template-columns: 1fr; }
  .product-shot { aspect-ratio: 4 / 3; }
}

/* ============================================================
   HOME HERO — tightened so the chooser is visible without
   scrolling. The associate's three-second point: a visitor
   should see where to go before they see anything else.
   ============================================================ */

.home .page { padding-top: 22px; }
.home .portrait-circle { width: 132px; height: 132px; }
.home .eyebrow { margin-top: 18px !important; margin-bottom: 10px; }
.home h1.display { font-size: var(--fs-xl); margin: 0 auto 14px; max-width: 46ch; }
.home .lede { max-width: 64ch; font-size: var(--fs-md); }

@media (max-width: 640px) {
  .home .masthead { padding-top: 20px; }
  .home .portrait-circle { width: 104px; height: 104px; }
  .home h1.display { font-size: var(--fs-lg); }
  .home .lede { font-size: var(--fs-base); }
}

/* ============================================================
   AUDIENCE CARDS
   Replaces the old .foryou left-rule blocks. Same card language
   as .lane and .doorway, but built to hold long-form copy.
   Used on carnosine.html, stendo.html, bioresonance.html and
   people-i-trust.html.
   ============================================================ */

.audience {
  border: 1px solid var(--clay);
  border-radius: 6px;
  background: #fff;
  padding: 26px 30px 8px;
  margin: 16px 0;
  scroll-margin-top: 20px;      /* so a jump link doesn't tuck the heading under the top edge */
  transition: border-color .3s, box-shadow .3s;
}

/* Highlight the card a jump link just landed on. */
.audience:target {
  border-color: var(--honey);
  box-shadow: 0 6px 26px rgba(194, 135, 43, .16);
}

.audience .tag {
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 6px;
}
.audience.honey .tag { color: var(--honey); }

.audience h3 {
  font-family: var(--body-font);
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1.25;
  margin: 0 0 14px;
}

.audience p { margin: 0 0 18px; }

/* Second card of a pair — sits tight under the first and is
   marked as a continuation rather than a new topic. */
.audience--also { margin-top: -2px; }

@media (max-width: 560px) {
  .audience { padding: 20px 20px 4px; }
}

/* A quiet outlined button for links that are not the shop. */
.btn-line {
  display: inline-block;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--honey);
  border: 1px solid var(--honey);
  border-radius: 40px;
  padding: 12px 28px;
  transition: background .2s, color .2s;
}
.btn-line:hover { background: var(--honey); color: #fff; }

/* A row of buttons closing an audience card. */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 18px;
}
.card-actions .btn-solid,
.card-actions .btn-line { flex: 0 1 auto; }

.btn-solid {
  display: inline-block;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  background: var(--honey);
  border: 1px solid var(--honey);
  border-radius: 40px;
  padding: 12px 26px;
  transition: background .2s, border-color .2s;
}
.btn-solid:hover { background: var(--ink); border-color: var(--ink); }

@media (max-width: 480px) {
  .card-actions { flex-direction: column; }
  .card-actions a { text-align: center; }
}

/* Carnosine page: tiles run copper to black, the reverse of the home
   page, because here they are jump links rather than the front door. */
.carn .lane { background: var(--honey); border-color: var(--honey); }
.carn .lane:hover { background: var(--ink); border-color: var(--ink); }


/* numbered path lanes on the home page */


/* ============================================================
   The numbered path on the home page. Smaller, rounder, and in
   soft copper rather than black. Hover deepens to copper.
   ============================================================ */
:root{
  --tile-soft:  #F0E1C7;
  --tile-edge:  #E2CDA8;
  --tile-deep:  #8F621E;
}

.home .lanes--path{ grid-template-columns: repeat(3, 1fr); gap: 12px;
  max-width: 540px; margin-left:auto; margin-right:auto; }

.home .lanes--path .lane{
  border-radius: 30px;
  padding: 16px 14px;
  gap: 2px;
}
.home .lanes--path .lane-title{ font-size: var(--fs-base); }
.home .lanes--path .lane-sub{ font-size: var(--fs-xs); line-height:1.4; }

.home .lane-step{
  display:block; font-size:.66rem; letter-spacing:.16em;
  font-weight:700; margin-bottom:2px;
  color: var(--honey);
}
.home .lane:hover .lane-step{ color: rgba(255,255,255,.75); }

/* soft copper tiles, both grids on the home page */
.home .lane{ background: var(--tile-soft); border-color: var(--tile-edge); }
.home .lane .lane-title{ color: var(--ink); }
.home .lane .lane-sub{ color: rgba(44,38,32,.74); }

.home .lane:hover{ background: var(--tile-deep); border-color: var(--tile-deep); }
.home .lane:hover .lane-title{ color:#fff; }
.home .lane:hover .lane-sub{ color: rgba(255,255,255,.9); }

/* the shop lane keeps its solid copper so it stays the odd one out */
.home .lane--shop{ background: var(--honey); border-color: var(--honey); }
.home .lane--shop .lane-title{ color:#fff; }
.home .lane--shop .lane-sub{ color: rgba(255,255,255,.88); }
.home .lane--shop:hover{ background: var(--ink); border-color: var(--ink); }
.home .lane--shop:hover .lane-title{ color:#fff; }

@media (max-width: 860px){ .home .lanes--path{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .home .lanes--path{ grid-template-columns: 1fr; } }


/* small caption sitting above the home page path tiles */
.tile-lead{
  font-family: var(--body-font);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #7a7168;
  text-align: center;
  max-width: 46ch;
  margin: 40px auto 4px;
}


/* temporary: marks a section still being written. Remove when the page is finished. */
.draft-gap{
  background: #FBF3E4;
  border: 1px dashed #B99A5E;
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0 26px;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: #6B5836;
}
.draft-gap::before{
  content: "STILL TO COME";
  display: block;
  font-size: .68rem;
  letter-spacing: .14em;
  font-weight: 700;
  opacity: .75;
  margin-bottom: 6px;
}

/* ---------- Photo beside text ---------- */
.figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; margin: 32px 0; }
.figpair--narrow { grid-template-columns: 0.8fr 1fr; }
.figpair figure { margin: 0; }
.figpair > div > p:first-child { margin-top: 0; }
@media (max-width: 640px) { .figpair, .figpair--narrow { grid-template-columns: 1fr; gap: 18px; } }

/* Inline links inside stories. Added 12 September 2026. */
.inline-link{
  display: inline-block;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.05em;
  text-decoration: none;
  transition: transform .15s ease, color .15s ease;
  transform-origin: center;
}
.inline-link:hover, .inline-link:focus-visible{
  color: var(--honey);
  transform: scale(1.07);
}
@media (prefers-reduced-motion: reduce){
  .inline-link{ transition: color .15s ease; }
  .inline-link:hover, .inline-link:focus-visible{ transform: none; }
}

/* ============================================================
   ACTION BAR - the first thing a reader can act on.
   Sits directly under the page title so someone on a phone can
   take the action without scrolling past the story. Reuses the
   existing .btn-solid / .btn-line buttons; this only lays them out.
   ============================================================ */

.action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 26px;
}

.action-bar .btn-solid,
.action-bar .btn-line { flex: 0 1 auto; text-align: center; }

@media (max-width: 560px) {
  .action-bar { flex-direction: column; align-items: stretch; gap: 8px; }
  .action-bar .btn-solid,
  .action-bar .btn-line {
    display: block;
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }
}

.jump-target { scroll-margin-top: 24px; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ============================================================
   PATH LIST - the index at the top of The Path I Took.
   One line per thing Carla brought into her life, in the order
   she came to it. The essay stays below; this is what a reader
   on a phone sees first. Add a line by adding an <li>.
   ============================================================ */

.path-list {
  list-style: none;
  margin: 6px 0 30px;
  padding: 0;
  border-top: 1px solid var(--clay);
}

.path-list li { border-bottom: 1px solid var(--clay); }

.path-list a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 4px;
  text-decoration: none;
  color: var(--ink);
  transition: background .18s;
}

.path-list a:hover { background: rgba(194, 135, 43, 0.07); }

.path-list .path-name {
  font-family: var(--display-font);
  font-size: var(--fs-md);
  flex: 1 1 auto;
}

.path-list .path-go {
  font-family: var(--body-font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--honey);
  flex: 0 0 auto;
}

@media (max-width: 560px) {
  .path-list a { flex-direction: column; gap: 3px; padding: 14px 4px; }
}

/* ---------- Links in prose. 15 Sep 2026 ----------
   Carla's rule: no underlines anywhere on the site. A link is
   copper and bolder than the text around it, and that is how a
   reader knows it will take them somewhere else.
   ------------------------------------------------- */

.inline-link,
a.inline,
main.page .wrap p > a:not([class]) {
  color: var(--honey);
  font-weight: 700;
  text-decoration: none;
}

.inline-link:hover,
a.inline:hover,
main.page .wrap p > a:not([class]):hover { color: var(--ink); }

/* A <button> wearing the site button styling. 15 Sep 2026. */
button.btn-solid {
  cursor: pointer;
  font-family: var(--body-font);
  line-height: 1;
}

/* The "Read" on each path row is a button now, so the page reads the
   same as every other page. 15 Sep 2026. */
.path-list .path-go {
  border: 1px solid var(--honey);
  border-radius: 40px;
  padding: 9px 22px;
  line-height: 1;
  transition: background .2s, color .2s;
}

.path-list a:hover .path-go { background: var(--honey); color: #fff; }

@media (max-width: 560px) {
  .path-list a { align-items: flex-start; gap: 10px; }
  .path-list .path-go { align-self: flex-start; }
}

/* The "Looking for something in particular" lanes, rounded to match
   the buttons. 15 Sep 2026, at Carla's request. */
.lane {
  border-radius: 40px;
}

@media (max-width: 560px) {
  .lane { border-radius: 30px; }
}

/* ============================================================
   STORY FEED - the dated stories on The Path I Took, newest
   first. Filled from stories.json; the markup in the page is
   the fallback if that file cannot be read.
   ============================================================ */

.story-feed { margin: 6px 0 10px; }

.story-item {
  padding: 22px 0;
  border-bottom: 1px solid var(--clay);
}

.story-item:first-child { border-top: 1px solid var(--clay); }

.story-item .story-date {
  font-family: var(--body-font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 6px;
}

.story-item h3 { margin: 0 0 8px; font-size: var(--fs-lg); }
.story-item h3 a { color: var(--ink); text-decoration: none; }
.story-item h3 a:hover { color: var(--honey); }
.story-item p { margin: 0; }

/* ============================================================
   SITE SEARCH - the visible search box at the top of the home
   page and The Path I Took. Carla: someone should be able to
   land and type "fibro" or "equine" straight away.
   ============================================================ */

.site-search {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin: 0 0 26px;
}

.site-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--body-font);
  font-size: var(--fs-base);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--clay);
  border-radius: 40px;
  padding: 13px 22px;
}

.site-search input[type="search"]::placeholder { color: #9a9086; }
.site-search input[type="search"]:focus { outline: none; border-color: var(--honey); }

.site-search button {
  flex: 0 0 auto;
  cursor: pointer;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  background: var(--honey);
  border: 1px solid var(--honey);
  border-radius: 40px;
  padding: 13px 26px;
  line-height: 1;
}

.site-search button:hover { background: var(--ink); border-color: var(--ink); }

@media (max-width: 560px) {
  .site-search { flex-direction: column; }
  .site-search button { width: 100%; }
}

/* ============================================================
   NAV - phone first. 15 Sep 2026.
   The old nav was inline text centred, so on a narrow screen the
   items stretched edge to edge and the Shop pill was left alone
   on its own line. It is a wrapping flex row now, with the gaps
   and letter-spacing tightening as the screen narrows.
   ============================================================ */

nav.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 22px;
}

nav.nav a { margin: 0; }
.nav-shop { margin-left: 0; }

@media (max-width: 720px) {
  nav.nav { gap: 2px 14px; }
  nav.nav a { letter-spacing: 0.14em; line-height: 2.2; }
}

@media (max-width: 480px) {
  .masthead { padding-top: 22px; }
  nav.nav { gap: 2px 11px; }
  nav.nav a { font-size: 0.68rem; letter-spacing: 0.08em; line-height: 2.1; }
  .nav-shop { padding: 6px 16px; }
}

/* ---------- Search, sitting with the nav ---------- */

.nav-search {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 0;
  max-width: 460px;
  padding: 0 var(--gutter);
}

.nav-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--body-font);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--clay);
  border-radius: 40px;
  padding: 10px 18px;
}

.nav-search input[type="search"]::placeholder { color: #9a9086; }
.nav-search input[type="search"]:focus { outline: none; border-color: var(--honey); }

.nav-search button {
  flex: 0 0 auto;
  cursor: pointer;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: var(--honey);
  border: 1px solid var(--honey);
  border-radius: 40px;
  padding: 10px 20px;
  line-height: 1;
  transition: background .2s, border-color .2s;
}

.nav-search button:hover { background: var(--ink); border-color: var(--ink); }

/* Centred action bar. Used where the page opens centred (the home
   page, Prayer Corner). The practitioner pages keep theirs left
   aligned with the prose. 15 Sep 2026. */
.action-bar--center { justify-content: center; }

/* Highlighted words in search results. 15 Sep 2026. */
mark {
  background: rgba(194, 135, 43, 0.20);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* ============================================================
   SEARCH RESULTS - one card per page, so a reader can flick
   through what matched instead of reading a wall of text.
   15 Sep 2026.
   ============================================================ */

.search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  margin: 6px 0 30px;
}

.search-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--clay);
  border-radius: 18px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s, transform .18s;
}

.search-card:hover {
  border-color: var(--honey);
  transform: translateY(-2px);
}

.search-card-count {
  font-family: var(--body-font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}

.search-card-title {
  font-family: var(--display-font);
  font-size: var(--fs-md);
  line-height: 1.25;
  color: var(--ink);
}

.search-card-snippet {
  font-family: var(--body-font);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: #6f6760;
}

.search-card-go {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--body-font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey);
}


/* ===== Site menu, footer menu and Shop shipping sections. Added 5 Oct 2026. ===== */
.menu { margin-top: 18px; }
.menu-toggle { display: none; }
.menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 2px; }
.menu-list > li { position: relative; }
.menu-top { font-family: var(--body-font); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); background: none; border: 0; padding: 10px 12px; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.menu-top:hover, .menu-group.open > .menu-top, .menu-top.is-current { color: var(--honey); }
.menu-top:focus-visible, .menu-drop a:focus-visible, .menu-shop:focus-visible, .menu-chat:focus-visible, .menu-toggle:focus-visible { outline: 2px solid var(--honey); outline-offset: 3px; border-radius: 6px; }
.menu-chev { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.menu-group.open .menu-chev { transform: rotate(225deg) translateY(-1px); }
.menu-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); min-width: 260px; background: #fff; border: 1px solid var(--clay); border-radius: 8px; box-shadow: 0 10px 30px rgba(44,38,32,.12); padding: 8px; z-index: 60; text-align: left; }
.menu-group.open > .menu-drop { display: block; }
@media (hover: hover) and (min-width: 761px) { .menu-group:hover > .menu-drop, .menu-group:focus-within > .menu-drop { display: block; } }
.menu-drop a { display: block; padding: 8px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.menu-drop a span { display: block; font-weight: 400; font-size: 0.8rem; color: #7A7168; }
.menu-drop a:hover, .menu-drop a.is-current { background: var(--parchment); color: var(--ink); }
.menu-sub { margin: 6px 12px 2px; padding-top: 10px; border-top: 1px solid var(--clay); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7A7168; }
.menu-shop, .menu-chat { display: inline-flex; align-items: center; justify-content: center; font-family: var(--body-font); font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; text-decoration: none; border-radius: 40px; }
.menu-shop { background: var(--honey); color: #fff; padding: 10px 22px; margin-left: 10px; }
.menu-shop:hover { background: #9E6A1B; color: #fff; }
.menu-chat { background: #fff; color: #9E6A1B; border: 1.5px solid var(--honey); padding: 9px 20px; margin-left: 6px; }
.menu-chat:hover { background: var(--parchment); color: #9E6A1B; }
@media (max-width: 760px) {
  .menu { margin-top: 12px; text-align: left; }
  .menu-toggle { display: inline-flex; margin: 0 auto; background: #fff; border: 1px solid var(--ink); border-radius: 40px; padding: 9px 24px; font-family: var(--body-font); font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700; color: var(--ink); cursor: pointer; }
  .menu { display: flex; flex-direction: column; }
  .menu-list { display: none; flex-direction: column; align-items: stretch; gap: 0; margin-top: 12px; border-top: 1px solid var(--clay); }
  .menu.open .menu-list { display: flex; }
  .menu-list > li { border-bottom: 1px solid var(--clay); }
  .menu-list > li.menu-cta { border-bottom: 0; }
  .menu-top { width: 100%; justify-content: space-between; padding: 14px 4px; font-size: 0.82rem; }
  .menu-drop { position: static; transform: none; box-shadow: none; border: 0; padding: 0 0 10px; min-width: 0; }
  .menu-shop, .menu-chat { width: 100%; margin: 12px 0 0; padding: 12px 20px; }
}
.footmenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 22px; text-align: left; max-width: 900px; margin: 30px auto 0; }
.footmenu h3 { font-family: var(--body-font); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #7A7168; margin: 0 0 8px; font-weight: 700; }
.footmenu a { display: block; color: var(--ink); text-decoration: none; font-size: 0.92rem; padding: 3px 0; }
.footmenu a:hover { color: var(--honey); }
.ship { border-radius: 10px; padding: 22px; margin-top: 30px; }
.ship-au { background: #EEF1E9; border: 2px solid var(--sage); }
.ship-us { background: #fff; border: 1px solid var(--clay); }
.ship-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 6px; }
.ship-head h2 { margin: 0; }
.ship-flag { display: inline-flex; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; border-radius: 40px; padding: 7px 14px; }
.ship-flag-au { background: var(--sage); color: #fff; }
.ship-flag-us { background: var(--parchment); color: var(--ink); border: 1px solid var(--clay); }
.ship p { max-width: 62ch; }
.ship-code { display: inline-block; background: #fff; border: 1px dashed var(--sage); border-radius: 8px; padding: 8px 14px; margin-top: 4px; }
.ship-badge { display: inline-block; align-self: flex-start; margin-top: 10px; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; border-radius: 40px; padding: 4px 10px; }
.ship-badge-au { background: var(--sage); color: #fff; }
.ship-badge-us { background: var(--parchment); color: var(--ink); border: 1px solid var(--clay); }
.ship-nz { margin-top: 26px; background: var(--parchment); border-radius: 10px; padding: 18px 22px; }
.ship-more { margin-top: 18px; font-size: 0.95rem; }
.ship-badge { width: max-content; max-width: 100%; white-space: nowrap; justify-self: start; margin-bottom: 6px; }
.ship-head h2 { font-family: var(--display-font); font-style: italic; font-weight: 500; font-size: 1.6rem; line-height: 1.2; }