/* ============================================================
   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; } }