/* =========================================================
   Lauren On Life
   All styles live in this one file. Plain CSS, no framework.
   Edit colors in the :root block below. Everything else
   references those variables, so one change updates the site.
   ========================================================= */

:root {
  /* Brand colors */
  --ink:       #292826;  /* primary text and dark sections */
  --stone:     #B8AB9D;  /* secondary text, rules, borders */
  --paper:     #F4EFE7;  /* primary background */
  --porcelain: #FCFAF7;  /* lighter alternate background */
  --citron:    #E5F21A;  /* signature accent, used sparingly, never behind text */
  --blush:     #FFF1ED;  /* softer accent for book and reflective moments */

  /* Fonts. Playfair Display stands in for the brand font Prism Display. */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --measure: 34rem;   /* comfortable reading width, roughly 68 characters */
  --wrap: 1120px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }

/* ---- Headings ---- */
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.14; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.2rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -0.3px; }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; }
.italic { font-style: italic; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* Small label above a heading */
.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #837a6e;
  margin: 0 0 1rem;
}

/* A short citron rule above a heading. Left aligned on purpose. */
.rule {
  width: 46px;
  height: 3px;
  background: var(--citron);
  border: 0;
  margin: 0 0 1.4rem;
}

/* ---- Links ---- */
a { color: var(--ink); }
.textlink {
  display: inline-block;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--citron);
  padding-bottom: 2px;
}
.textlink:hover { border-bottom-color: var(--ink); }

/* ---- The one button style, used consistently ---- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--porcelain);
  background: var(--ink);
  padding: 0.9rem 1.6rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
}
/* Primary button hover: a thin citron line along the bottom edge only. No fill change, no glow. */
.btn:hover { box-shadow: inset 0 -3px 0 0 var(--citron); }

/* Secondary outline button: same height and padding as the primary, transparent with an Ink border. */
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-outline:hover { box-shadow: inset 0 -3px 0 0 var(--citron); }

/* Bold action button: Ink background with Electric Citron lettering (citron on dark is allowed). Used for the mailing list and the book waitlist. */
.btn-list {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--citron);
  background: var(--ink);
  padding: 1rem 2rem;
  border-radius: 2px;
}
.btn-list:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn-list:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* =========================================================
   Kit (email signup) form, restyled to match the site.
   Kit ships its own inline styles, so these use !important
   where needed to override them. Works in the Soft Stone
   footer (home) and the blush section (book page).
   ========================================================= */
.kit-form { margin-top: 1.6rem; max-width: 30rem; }
/* Montserrat everywhere, and strip Kit's own card chrome */
.kit-form .formkit-form,
.kit-form .formkit-form * { font-family: var(--sans) !important; }
.kit-form .formkit-form {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: 100% !important;
}
/* Email input: Warm Paper fill, thin Ink border, square corners */
.kit-form .formkit-input {
  background: var(--paper) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  padding: 0.85rem 1rem !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
.kit-form .formkit-input::placeholder { color: #837a6e !important; opacity: 1; }
/* Submit button: Ink background, Electric Citron lettering (citron on Ink is the approved treatment), square, no shadow */
.kit-form .formkit-submit {
  background: var(--ink) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.9rem 2rem !important;
}
.kit-form .formkit-submit,
.kit-form .formkit-submit span {
  color: var(--citron) !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-size: 1rem !important;
}
.kit-form .formkit-submit:hover { background: #45423d !important; border-color: #45423d !important; }
.kit-form .formkit-submit:hover span { text-decoration: underline; text-underline-offset: 3px; }
.kit-form .formkit-submit > div { background: transparent !important; }  /* neutralize Kit's hover fill animation */
/* Small privacy line under the form, in Soft Stone */
.kit-form .formkit-guarantee,
.kit-form .formkit-guarantee * {
  color: var(--stone) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
}
/* On the Soft Stone footer, darken that line so it stays readable against the stone background */
.site-footer--stone .kit-form .formkit-guarantee,
.site-footer--stone .kit-form .formkit-guarantee * { color: #3a3833 !important; }
/* Remove Kit branding */
.kit-form .formkit-powered-by-convertkit,
.kit-form .formkit-powered-by,
.kit-form [data-element="powered-by"] { display: none !important; }
/* After-subscribe confirmation message, restyled from Kit's green default */
.kit-form .formkit-alert,
.kit-form .formkit-alert-success {
  background: var(--porcelain) !important;
  border: 1px solid var(--stone) !important;
  border-radius: 0 !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  padding: 0.9rem 1.1rem !important;
  box-shadow: none !important;
}
.kit-form .formkit-alert *,
.kit-form .formkit-alert-success * {
  color: var(--ink) !important;
  font-family: var(--sans) !important;
}

/* =========================================================
   Speaking inquiry form (Formspree)
   ========================================================= */
.inquiry-form { margin-top: 1.9rem; max-width: 38rem; display: flex; flex-direction: column; gap: 1rem; }
.inquiry-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.inquiry-form .field { display: flex; flex-direction: column; }
.inquiry-form label {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #837a6e;
  margin-bottom: 0.45rem;
}
.inquiry-form input,
.inquiry-form textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--porcelain);
  border: 1px solid var(--stone);
  border-radius: 0;
  padding: 0.75rem 0.9rem;
  width: 100%;
}
.inquiry-form input::placeholder,
.inquiry-form textarea::placeholder { color: #9a9184; }
.inquiry-form input:focus-visible,
.inquiry-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.inquiry-form textarea { resize: vertical; min-height: 8rem; }
.inquiry-form .actions { margin-top: 0; }
.inquiry-form button.btn-list { border: 1px solid var(--ink); cursor: pointer; }
.form-error { font-size: 0.85rem; color: #7a2f2f; margin: 0; }
.form-error a { color: inherit; }
.form-thanks { font-size: 1.15rem; color: var(--ink); max-width: 34rem; margin-top: 1.9rem; }

/* =========================================================
   /lemonade/ pre-launch early-reader landing page:
   one centered column, generous whitespace
   ========================================================= */
.lemonade { max-width: 40rem; margin-inline: auto; text-align: center; }
.lemonade h1 { margin-bottom: 1.6rem; }
.lemonade > p { max-width: 34rem; margin-inline: auto; }
.lemonade > p:not(.fineprint) { text-align: left; }   /* long body paragraphs read left aligned; headings stay centered */
.lemonade .subhead { margin-top: 2.6rem; margin-bottom: 0.6rem; }
.lemonade .kit-form { margin-inline: auto; text-align: left; }   /* form fields read better left aligned */
.lemonade .fineprint { font-size: 0.78rem; color: #837a6e; margin-top: 1rem; }
@media (max-width: 640px) {
  .inquiry-form .form-row { grid-template-columns: 1fr; }
}

/* =========================================================
   Payhip buy button (digital products).
   The Payhip script turns any link with the class
   payhip-buy-button into a checkout that opens over the page.
   It also injects its own styling at load, so these rules use
   !important to keep the button looking like the rest of the
   site. The link still points at the Payhip product page, so
   it works even if their script fails to load.
   ========================================================= */
a.payhip-buy-button {
  display: inline-block !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--citron) !important;
  background: var(--ink) !important;
  background-image: none !important;
  padding: 1rem 2rem !important;
  border: 1px solid var(--ink) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  cursor: pointer;
}
a.payhip-buy-button:hover { text-decoration: underline !important; text-underline-offset: 3px; }
/* On an Ink section the button keeps its Ink fill and citron lettering, with a
   Soft Blush border so its edges are visible against the dark background */
.bg-ink a.payhip-buy-button {
  background: var(--ink) !important;
  color: var(--citron) !important;
  border: 2px solid var(--blush) !important;
}
a.payhip-buy-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* =========================================================
   Shop listing. One row per product: cover beside the words,
   separated by hairlines rather than boxed into cards. Built
   to hold ten products without turning into a grid of tiles.
   ========================================================= */
.shop-list { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.shop-item {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid rgba(41, 40, 38, 0.16);
}
.shop-item:last-child { border-bottom: 1px solid rgba(41, 40, 38, 0.16); }
/* A thin frame around each cover, the same one the book pages use. No mat
   behind it: a pale cover on a pale page is fine as long as its edge is
   drawn. */
.shop-item .shop-cover { border: 1px solid rgba(41, 40, 38, 0.16); }
.shop-item h3 { margin-bottom: 0.4rem; }
.shop-item p { max-width: 34rem; }
.shop-price {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 0.5rem;
}
.shop-item .actions { margin-top: 1.4rem; }

/* The "I Want It All" bundle, featured above the individual products */
.bundle {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  border: 1px solid var(--ink);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.bundle-cover img { display: block; width: 100%; height: auto; }
.bundle h2 { line-height: 1.1; margin: 0; }
.bundle-price { font-family: var(--serif); font-size: clamp(2.2rem, 4vw, 2.8rem); line-height: 1; margin: 0; }
.bundle-price .was { font-family: var(--sans); font-size: 1.05rem; color: var(--stone); text-decoration: line-through; letter-spacing: 0; margin-right: 0.6rem; vertical-align: middle; }
@media (max-width: 640px) { .bundle { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .shop-item { grid-template-columns: 1fr; }
  .shop-item .shop-cover { max-width: 210px; }
}

/* Small print under a button or form, site wide */
.fineprint { font-size: 0.78rem; color: #837a6e; margin-top: 1rem; }

/* Focus states you can actually see */
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- Layout helpers ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: clamp(1.25rem, 5vw, 2.75rem); }
.section    { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section-lg { padding-block: clamp(5rem, 10vw, 8rem); }   /* deliberately roomier */
.section-sm { padding-block: clamp(2.5rem, 5vw, 3.5rem); } /* deliberately tighter */

.bg-paper     { background: var(--paper); }
.bg-porcelain { background: var(--porcelain); }
.bg-blush     { background: var(--blush); }
.bg-stone     { background: var(--stone); }
.bg-ink       { background: var(--ink); color: var(--porcelain); }
.bg-ink h1, .bg-ink h2, .bg-ink h3 { color: var(--porcelain); }
.bg-ink .eyebrow { color: var(--stone); }
.bg-ink a { color: var(--porcelain); }

/* Button inverts on dark sections so it stays visible. Same shape, flipped colors. */
.bg-ink .btn, .bg-stone .btn { background: var(--porcelain); color: var(--ink); border-color: var(--porcelain); }
.bg-ink .btn:hover, .bg-stone .btn:hover { box-shadow: inset 0 -3px 0 0 var(--citron); }
.bg-ink .textlink { color: var(--porcelain); border-bottom-color: var(--citron); }
/* Text that is deliberately dimmer than body text has to lighten on Ink, or it disappears */
.bg-ink .subtitle { color: var(--stone); }
.bg-ink .fineprint { color: var(--stone); }
.bg-ink .book-cover { border-color: rgba(252, 250, 247, 0.22); }

/* ---- Asymmetric two-column blocks ---- */
.duo {
  display: grid;
  grid-template-columns: 1.5fr 1fr;   /* wide column beside a narrow one */
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo.narrow-first { grid-template-columns: 1fr 1.5fr; }
.duo .col-text { max-width: 40rem; }

/* ---- Photo placeholders (honest gaps until real photos arrive) ---- */
.photo-slot {
  background: var(--porcelain);
  border: 1px dashed var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: #837a6e;
  font-size: 0.82rem;
  line-height: 1.5;
}
.photo-slot span { max-width: 20rem; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-1-1 { aspect-ratio: 1 / 1; }

/* Real photo, when present */
.photo { overflow: hidden; }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Editorial list (replaces feature cards) ---- */
.entries { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.entry {
  display: grid;
  grid-template-columns: 1fr 2fr;   /* asymmetric: label beside body */
  gap: clamp(1rem, 3vw, 2.5rem);
  background: var(--blush);
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  transition: transform 0.25s ease;   /* smooth, not bouncy */
}
.entry + .entry { margin-top: 1rem; }
.entry:hover { transform: scale(1.02); }
/* Home page only: Work blocks on Porcelain (speaker page keeps its own style) */
.entries--porcelain .entry { background: var(--porcelain); }
.entry .label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.entry h3 { margin: 0.3rem 0 0.6rem; }
.entry p { margin: 0; color: #4b463f; }

/* ---- Plain editorial list (workshop themes, no pill chips) ---- */
.plainlist { list-style: none; margin: clamp(1.5rem, 4vw, 2.25rem) 0 0; padding: 0; max-width: 46rem; }
.plainlist li { padding: 0.95rem 0; border-top: 1px solid rgba(41, 40, 38, 0.16); font-size: 1.02rem; }
.plainlist li:last-child { border-bottom: 1px solid rgba(41, 40, 38, 0.16); }

/* ---- Keynote block inner content (built on the .entry pattern) ---- */
.entry .ksub { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: #4b463f; margin: 0.25rem 0 0.9rem; }
.entry .kbody p { margin: 0 0 0.9rem; }
.entry .kbody p:last-child { margin-bottom: 0; }
.entry .bestfor { font-size: 0.82rem; color: #837a6e; margin: 1.1rem 0 0; }

/* ---- Two equal columns that stack on mobile ---- */
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3.5rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.cols-2 h3 { margin-bottom: 0.2rem; }
.cols-2 .plainlist { margin-top: 0.6rem; }
@media (max-width: 820px) { .cols-2 { grid-template-columns: 1fr; } }

/* ---- Pull quote ---- */
.pullquote blockquote {
  margin: 0;
  max-width: 42rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.42;
}
.pullquote cite {
  display: block;
  margin-top: 1.4rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
}

/* ---- Quote + coaching: two full-bleed panels side by side ---- */
.duo-panels { display: grid; grid-template-columns: 55fr 45fr; }
.duo-panels .panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.75rem, 6vw, 5rem) clamp(1.5rem, 5vw, 3.5rem);
}
.panel-quote { background: var(--ink); color: var(--porcelain); }
.panel-coach { background: var(--blush); }
.quote-lead {
  font-family: var(--serif);
  font-style: normal;            /* Playfair, not italic, per request */
  font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.85rem);   /* about 12% smaller, same font, weight, and line-height ratio */
  line-height: 1.34;
  margin: 0;
  max-width: 32rem;
  color: var(--porcelain);
}
.quote-name {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 1.4rem 0 0;
}
@media (max-width: 820px) {
  .duo-panels { grid-template-columns: 1fr; }   /* stack, quote first (source order) */
}

/* ---- Book layout ---- */
.book {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.book-cover { border: 1px solid rgba(41, 40, 38, 0.12); }  /* thin frame, no drop shadow */
.kicker {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 1rem;
}
.subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #4b463f;
  margin: 0.6rem 0 1.4rem;
  max-width: 32rem;
}
.gap-note {
  font-size: 0.8rem;
  color: #837a6e;
  border-left: 3px solid var(--citron);
  padding-left: 0.85rem;
  margin-top: 1.4rem;
  max-width: 34rem;
}

/* Small imprint credit line at the end of the book description */
.imprint { font-size: 0.85rem; color: #837a6e; margin-top: 2.2rem; }

/* Shared: thin vertical citron line in the left margin of a text column. Sits beside the text, never behind it. Used on the book description and both bio sections. */
.margin-rule { border-left: 3px solid var(--citron); padding-left: clamp(1.75rem, 4vw, 2.75rem); }
@media (max-width: 640px) { .margin-rule { border-left: 0; } }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);            /* solid, no blur */
  border-bottom: 1px solid rgba(41, 40, 38, 0.1);
}
.nav { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1.05rem; }
.brand {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.brand .dot { color: var(--citron); }   /* the one citron flourish in the wordmark */
.nav-links { display: flex; gap: clamp(1rem, 3vw, 2rem); }
.nav-links a {
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;                 /* a link like "The Book" never wraps to two lines */
}
.nav-links a:hover { border-bottom-color: rgba(41, 40, 38, 0.3); }
.nav-links a[aria-current="page"] { border-bottom-color: var(--citron); }

/* On phones, the wordmark plus three links do not fit on one row, so stack
   the wordmark above the links and tighten the links so all three stay on
   a single line (tested down to about 375px, and comfortable at 320px).
   Desktop and tablet layouts are untouched. */
@media (max-width: 480px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 0.55rem; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.72rem; letter-spacing: 0.08em; }
}
/* Four links (Shop was added) need a little more squeezing on the smallest
   phones, tested down to 320px. */
@media (max-width: 380px) {
  .nav-links { gap: 0.8rem; }
  .nav-links a { font-size: 0.67rem; letter-spacing: 0.06em; }
}

/* ---- Buttons row ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.9rem; }

/* ---- Footer ---- */
.site-footer { background: var(--ink); color: var(--porcelain); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.footer-grid a { color: var(--porcelain); }
.footer-contact p { color: var(--stone); margin-bottom: 0.5rem; }
.footer-contact a { text-decoration: none; border-bottom: 1px solid rgba(252, 250, 247, 0.35); color: var(--porcelain); }
.footer-contact a:hover { border-bottom-color: var(--citron); }
.footer-bottom {
  border-top: 1px solid rgba(252, 250, 247, 0.15);
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  font-size: 0.78rem;
  color: var(--stone);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---- Home page footer variant: Soft Stone background, Ink text ---- */
.site-footer--stone { background: var(--stone); color: var(--ink); }
.site-footer--stone h2 { color: var(--ink); }
.site-footer--stone .eyebrow { color: var(--ink); }
.site-footer--stone .footer-contact p { color: var(--ink); }
.site-footer--stone .footer-contact a { color: var(--ink); border-bottom: 2px solid var(--citron); }
.site-footer--stone .footer-contact a:hover { border-bottom-color: var(--ink); }
.site-footer--stone .footer-bottom { color: var(--ink); border-top-color: rgba(41, 40, 38, 0.28); }

/* In the Soft Stone footer, keep the citron lettering so it beats the general footer link color. */
.site-footer--stone .btn-list { color: var(--citron); }

/* =========================================================
   Phone first: stack the columns on narrow screens
   ========================================================= */
@media (max-width: 820px) {
  .duo, .duo.narrow-first, .book, .footer-grid { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 1fr; gap: 0.4rem; }
  .book .book-cover { max-width: 300px; }
  .duo.narrow-first .col-media { order: -1; }   /* image on top when stacked */
}