/* bestmedspala.com - quick answers med spa blog
   Light, friendly short-form theme. Nunito rounded sans, warm off-white,
   teal accent with peach pills. Own visual identity. */

:root{
  --bg:#fdfaf5;
  --card:#ffffff;
  --ink:#2c2b30;
  --muted:#6f6d76;
  --line:#efe8dd;
  --teal:#0f9488;
  --teal-dark:#0b6f66;
  --peach:#ffe9df;
  --peach-ink:#c05a3a;
  --shadow:0 6px 22px rgba(60,50,40,.07);
  --radius:16px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Nunito Sans","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  font-size:17px;
}
h1,h2,h3,.brand{font-family:"Nunito","Nunito Sans",-apple-system,Segoe UI,sans-serif;font-weight:800;line-height:1.2;letter-spacing:-.01em}
a{color:var(--teal-dark);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

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

/* header */
.site-head{background:var(--card);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px;flex-wrap:wrap;gap:10px}
.brand{font-size:22px;color:var(--ink);display:flex;align-items:center;gap:9px}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--teal);display:inline-block;box-shadow:0 0 0 4px var(--peach)}
.brand span{color:var(--teal-dark)}
.nav a{color:var(--muted);font-weight:700;margin-left:20px;font-size:15px}
.nav a:hover{color:var(--teal-dark);text-decoration:none}

/* hero on home */
.hero{padding:40px 0 8px}
.hero .kicker{display:inline-block;background:var(--peach);color:var(--peach-ink);font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.hero h1{font-size:34px;margin:16px 0 10px}
.hero p{color:var(--muted);font-size:18px;max-width:560px;margin:0}

/* post list cards */
.list{padding:26px 0 10px;display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px;transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(60,50,40,.10)}
.card .meta{font-size:13px;color:var(--muted);font-weight:700;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card h2{font-size:21px;margin:9px 0 8px}
.card h2 a{color:var(--ink)}
.card h2 a:hover{color:var(--teal-dark);text-decoration:none}
.card p{margin:0 0 12px;color:var(--muted)}
.readmore{font-weight:800;color:var(--teal-dark);font-size:14.5px}
.pill{background:var(--peach);color:var(--peach-ink);font-weight:800;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;padding:3px 10px;border-radius:999px}

/* article */
.article{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 30px 34px;margin:30px 0}
.article .meta{font-size:13.5px;color:var(--muted);font-weight:700;margin-bottom:8px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.article h1{font-size:30px;margin:6px 0 14px}
.article p{margin:0 0 16px}
.article h2{font-size:22px;margin:28px 0 10px}
.article ul,.article ol{margin:0 0 16px;padding-left:22px}
.article li{margin-bottom:7px}
.article .lead{font-size:19px;color:#42414a}
.byline{display:flex;align-items:center;gap:12px;border-top:1px dashed var(--line);margin-top:26px;padding-top:18px;color:var(--muted);font-size:14.5px}
.byline .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#3cc7b6);flex:0 0 42px}
.byline b{color:var(--ink)}
.backlink{display:inline-block;margin-top:6px;font-weight:800;color:var(--teal-dark)}

/* callout used inside posts */
.note{background:var(--peach);border-radius:12px;padding:14px 18px;margin:0 0 18px;color:#7a3a24;font-weight:600}

/* about / contact */
.page{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:30px;margin:30px 0}
.page h1{font-size:28px;margin:0 0 14px}
.author-box{display:flex;gap:18px;align-items:center;margin:18px 0 6px}
.author-box .av{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--teal),#4dd0bf);flex:0 0 72px}
.contact-line{display:flex;gap:10px;align-items:center;margin:10px 0;font-weight:600}
.contact-line span{color:var(--teal-dark)}

/* footer */
.site-foot{border-top:1px solid var(--line);background:var(--card);margin-top:20px}
.site-foot .wrap{padding:26px 20px;color:var(--muted);font-size:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.site-foot a{color:var(--muted)}

@media(max-width:560px){
  .hero h1{font-size:27px}
  .article{padding:22px 20px}
  .article h1{font-size:24px}
  .brand{font-size:20px}
  .nav a{margin-left:14px}
}