/* Best Med Spa Los Angeles - blush mauve editorial theme */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  --cream: #f7eef1;
  --paper: #fffcfd;
  --ink: #2b2229;
  --soft-ink: #6a5964;
  --terra: #a8577a;
  --terra-dark: #834360;
  --sage: #9a7f8c;
  --line: #ecdce3;
  --shadow: 0 14px 40px rgba(80, 40, 60, 0.08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Work Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--terra-dark); text-decoration: none; }
a:hover { color: var(--terra); text-decoration: underline; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 22px; }

/* Header */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
  flex-wrap: wrap;
  gap: 10px;
}
.brand {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.brand:hover { text-decoration: none; color: var(--terra-dark); }
.brand span { color: var(--terra); }
.nav a {
  color: var(--soft-ink);
  font-size: 15px;
  font-weight: 500;
  margin-left: 22px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav a:hover { color: var(--terra-dark); text-decoration: none; }
.nav a:first-child { margin-left: 0; }

/* Hero */
.hero {
  padding: 62px 0 40px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper), var(--cream));
}
.hero .kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: 600;
  color: var(--sage);
  margin-bottom: 14px;
}
.hero h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.hero p {
  font-size: 20px;
  color: var(--soft-ink);
  margin: 0;
  max-width: 620px;
}

/* Post list */
.list { padding: 30px 0 40px; }
.entry {
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.entry:last-child { border-bottom: none; }
.entry .meta {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sage);
  margin-bottom: 8px;
}
.entry h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 10px;
}
.entry h2 a { color: var(--ink); }
.entry h2 a:hover { color: var(--terra-dark); text-decoration: none; }
.entry p { margin: 0 0 12px; color: var(--soft-ink); }
.read {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Article */
.article { padding: 48px 0 20px; }
.article .kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 600;
  color: var(--sage);
  margin-bottom: 14px;
}
.article h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--soft-ink);
  padding-bottom: 26px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.byline .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--terra); }
.article-body p { margin: 0 0 22px; }
.article-body h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.2;
  margin: 38px 0 14px;
}
.article-body h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 21px;
  margin: 28px 0 10px;
}
.article-body ul { margin: 0 0 22px; padding-left: 22px; }
.article-body li { margin-bottom: 9px; }
.article-body strong { color: var(--ink); font-weight: 600; }
blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--terra);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 22px;
  font-style: italic;
  color: var(--ink);
}

.author-card {
  margin: 44px 0 10px;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.author-card .avatar {
  flex: 0 0 54px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terra), var(--sage));
  color: #fff;
  font-family: 'DM Serif Display', serif;
  font-weight: 600;
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
}
.author-card h4 { margin: 0 0 4px; font-size: 16px; }
.author-card p { margin: 0; font-size: 15px; color: var(--soft-ink); }

/* About / contact */
.page { padding: 48px 0 20px; }
.page h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 38px;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.page h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 600;
  font-size: 24px;
  margin: 34px 0 12px;
}
.page p { margin: 0 0 20px; }
.contact-list { list-style: none; padding: 0; margin: 0 0 24px; }
.contact-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex; gap: 10px;
}
.contact-list span { color: var(--sage); font-weight: 600; min-width: 96px; }

/* Footer */
.site-foot {
  margin-top: 50px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 34px 0;
}
.site-foot .wrap {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 14px; color: var(--soft-ink);
}
.site-foot a { color: var(--soft-ink); }
.site-foot .foot-nav a { margin-left: 18px; }

@media (max-width: 620px) {
  body { font-size: 17px; }
  .hero h1 { font-size: 34px; }
  .article h1 { font-size: 30px; }
  .hero { padding: 44px 0 30px; }
  .nav a { margin-left: 16px; font-size: 14px; }
  .brand { font-size: 19px; }
}


/* --- Horizontal overflow guard (added 2026-09-03) ---------------------------
   Reported from a real iPhone: the page could be dragged sideways. Cause was
   the contact row, a flex container holding a long unbreakable email address.
   A flex item defaults to min-width:auto, so it refuses to shrink below the
   intrinsic width of that address and pushes the row past the viewport.
   bestmedspalosangeles.com overflowed by 76px at 320px wide because its domain
   is the longest of the five. Fixed at the source, plus a page-level guard so
   no future long token can do the same thing. -------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video, iframe, table, pre { max-width: 100%; }
.contact-list li { flex-wrap: wrap; min-width: 0; }
.contact-list li, .contact-list span, .contact-list a { overflow-wrap: anywhere; }
a, p, li, h1, h2, h3 { overflow-wrap: break-word; }

/* Article photography */
.post-img{display:block;width:100%;height:auto;margin:30px 0;border-top:2px solid #a8577a;
  padding-top:0}
@media(max-width:640px){.post-img{margin:22px 0}}