/* Sunroom Notes | LA skincare journal
   Distinct editorial theme: warm paper, clay accent, Fraunces display + Newsreader body */

:root {
  --paper: #faf5ee;
  --paper-2: #f2e9dd;
  --card: #fffaf3;
  --ink: #2a2521;
  --ink-soft: #5c534a;
  --clay: #b6603f;
  --clay-deep: #8f4527;
  --line: #e3d7c6;
  --gold: #c99a5b;
  --shadow: 0 1px 2px rgba(60,40,20,.05), 0 8px 30px rgba(80,50,25,.06);
  --wrap: 720px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.72;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
}

a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--clay); }

img { max-width: 100%; display: block; }

/* ---- header ---- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.head-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 22px 24px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.brand {
  font-family: "Fraunces", serif;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.brand .mark {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #f4d8a6, var(--clay) 70%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.brand small {
  display: block;
  font-family: "Newsreader", serif;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
  margin-top: 2px;
}
nav.main a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-left: 20px;
}
nav.main a:first-child { margin-left: 0; }
nav.main a:hover { color: var(--clay-deep); }

/* ---- layout ---- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wide { max-width: 960px; margin: 0 auto; padding: 0 24px; }

main { padding: 46px 0 30px; }

/* ---- home hero ---- */
.masthead {
  text-align: center;
  padding: 30px 0 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}
.masthead .kicker {
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--clay-deep); margin-bottom: 14px;
}
.masthead h1 { font-size: clamp(30px, 6vw, 46px); margin: 0 auto 16px; max-width: 640px; }
.masthead p { color: var(--ink-soft); max-width: 560px; margin: 0 auto 26px; font-size: 18px; }

/* ---- post list ---- */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-card {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.post-card:last-child { border-bottom: none; }
.post-card .meta {
  font-size: 13px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--clay-deep); margin-bottom: 8px;
}
.post-card h2 { font-size: clamp(23px, 4vw, 30px); margin: 0 0 10px; }
.post-card h2 a { color: var(--ink); text-decoration: none; }
.post-card h2 a:hover { color: var(--clay-deep); }
.post-card .dek { color: var(--ink-soft); margin: 0 0 12px; }
.post-card .byline { font-size: 15px; color: var(--ink-soft); font-style: italic; }
.readmore { font-size: 15px; letter-spacing: .04em; text-transform: uppercase; }

/* ---- article ---- */
article.post { padding-top: 4px; }
.post-head { margin-bottom: 34px; }
.post-head .cat {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--clay-deep); margin-bottom: 16px;
}
.post-head h1 { font-size: clamp(28px, 5.4vw, 42px); margin: 0 0 18px; }
.post-head .byline {
  font-size: 15px; color: var(--ink-soft);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0; display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center;
}
.post-head .byline .who { font-style: italic; }
.post-head .byline time { color: var(--ink); }

article.post p { margin: 0 0 22px; }
article.post h2 { font-size: clamp(22px, 3.6vw, 28px); margin: 40px 0 14px; }
article.post h3 { font-size: 21px; margin: 30px 0 10px; }
article.post ul { margin: 0 0 22px; padding-left: 22px; }
article.post li { margin-bottom: 9px; }
article.post blockquote {
  margin: 30px 0;
  padding: 6px 0 6px 22px;
  border-left: 3px solid var(--clay);
  font-family: "Fraunces", serif;
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink);
  font-style: italic;
}
.pullnote {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin: 34px 0;
  font-size: 17px;
  color: var(--ink-soft);
}
.pullnote strong { color: var(--ink); }

.post-foot {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 16px;
  color: var(--ink-soft);
}
.post-foot .sig { font-style: italic; }
.backlink { display: inline-block; margin-top: 26px; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--clay-deep); }
.backlink:hover { color: var(--clay); }

/* ---- about ---- */
.about-grid { display: grid; grid-template-columns: 200px 1fr; gap: 34px; align-items: start; }
.portrait {
  width: 200px; height: 240px; border-radius: 14px;
  background: linear-gradient(150deg, #efd9b4, #d79c78 55%, #b6603f);
  box-shadow: var(--shadow);
  display: flex; align-items: flex-end; justify-content: center;
  color: rgba(255,255,255,.9); font-family: "Fraunces", serif; font-size: 15px; letter-spacing: .12em;
  padding-bottom: 14px;
}
@media (max-width: 620px) {
  .about-grid { grid-template-columns: 1fr; }
  .portrait { width: 160px; height: 190px; }
}

/* ---- contact ---- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px; }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; font-size: 17px; font-family: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
}
.field textarea { min-height: 140px; resize: vertical; }
.btn {
  display: inline-block; background: var(--clay); color: #fff; border: none;
  padding: 13px 28px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 9px; cursor: pointer; font-family: "Newsreader", serif;
}
.btn:hover { background: var(--clay-deep); }

/* ---- footer ---- */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  background: var(--paper-2);
}
.foot-inner {
  max-width: 960px; margin: 0 auto; padding: 34px 24px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-soft);
}
.foot-inner a { color: var(--ink-soft); }
.site-foot .brand { font-size: 19px; }

.lede { font-size: 21px; color: var(--ink-soft); }

hr.rule { border: none; border-top: 1px solid var(--line); margin: 40px 0; }


/* --- 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:26px 0;border-radius:10px;
  border:1px solid rgba(42,37,33,.09)}
@media(max-width:640px){.post-img{margin:20px -4px;width:calc(100% + 8px);border-radius:8px}}