/* =========================================================
   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; }
@media (max-width: 640px) {
  .inquiry-form .form-row { grid-template-columns: 1fr; }
}

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

/* ---- 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: 1.15rem; }
  .nav-links a { font-size: 0.72rem; letter-spacing: 0.1em; }
}

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

/* =========================================================
   New Mindset Foundation additions.
   Built on the same system above. Two small pieces the
   personal-brand site did not need: testimonial blocks and
   the closing tagline. Everything else reuses the shared
   classes. This site leans on Porcelain, Ink, and Soft Stone
   and leaves Soft Blush to the personal-brand site, so the two
   read as related but clearly distinct.
   ========================================================= */

/* ---- Testimonials: Porcelain blocks with a thin Soft Stone border ---- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.quote-block {
  display: flex;
  flex-direction: column;
  background: var(--porcelain);
  border: 1px solid var(--stone);
  border-radius: 2px;
  padding: clamp(1.5rem, 3vw, 2.2rem);
}
.quote-block .q {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 1.3rem;
  max-width: none;
}
.quote-block .who {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: auto 0 0;   /* pin the name to the bottom so uneven quotes still line up */
}
@media (max-width: 820px) {
  .quotes { grid-template-columns: 1fr; }
}

/* ---- Small letterspaced closing line (used at the end of the About page) ---- */
.tagline {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 2rem 0 0;
}

/* ---- Home page book band: a slimmer cover column, roughly a third of the row ---- */
.book--slim { grid-template-columns: 1fr 2fr; }
@media (max-width: 820px) {
  .book--slim { grid-template-columns: 1fr; }   /* stack, cover above text */
}

/* ---- Services "Learn more" expanders ----
   Progressive enhancement: with no JavaScript the full copy shows and the
   trigger stays hidden. Once the page is enhanced (.js on <html>), each block
   collapses to its first paragraph with a keyboard-accessible toggle. The
   open and close animation uses the grid-rows 0fr to 1fr method, so it stays
   smooth at any height with no bounce. */
.expander-toggle {
  display: none;                       /* shown only when JS enhances the page */
  margin-top: 1.2rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 2px solid var(--citron);   /* the citron underline treatment */
  padding: 0 0 3px;
  cursor: pointer;
}
.js .expander-toggle { display: inline-block; }
.expander-toggle:hover { border-bottom-color: var(--ink); }
.expander-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.expander-panel__inner { overflow: hidden; }
.js .expander-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;   /* simple ease, no overshoot */
}
.js .expander-panel.is-open { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) {
  .js .expander-panel { transition: none; }
}