/* ============================================================
   Dr. Yulia Lurye — "Modern Clinical" theme
   Warm cream base, clinical teal accents, low contrast.
   ============================================================ */

:root{
  --cream:#FCFBF7;
  --sage:#F4F7F1;
  --sage-line:#EAEEE4;
  --line:#E9E6DC;
  --line-2:#E4E1D6;
  --ink:#2E3B36;
  --muted:#6E7A72;
  --teal:#1D9E75;
  --teal-deep:#0F6E56;
  --teal-pale:#E1F5EE;
  --teal-pale-line:#C4EADD;
  --coral-t:#993C1D; --coral-bg:#FAECE7;
  --teal-t:#0F6E56;  --teal-bg:#E1F5EE;
  --blue-t:#185FA5;  --blue-bg:#E6F1FB;
  --maxw:1080px;
  --narrow:720px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Helvetica Neue",sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--narrow)}

/* ---- Header ---- */
.site-header{background:var(--cream);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-mark{width:32px;height:32px;border-radius:8px;background:var(--teal-pale);display:inline-flex;align-items:center;justify-content:center;color:var(--teal)}
.brand-name{font-size:16px;font-weight:600}
.site-nav{display:flex;align-items:center;gap:20px}
.site-nav a{color:var(--muted);font-size:15px}
.site-nav a:hover{color:var(--ink);text-decoration:none}

/* ---- Buttons ---- */
.btn{display:inline-block;padding:10px 20px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;border:1px solid transparent}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-deep)}
.btn-ghost{background:transparent;color:var(--teal-deep);border-color:var(--teal-pale-line)}
.btn-ghost:hover{background:var(--teal-pale)}

/* ---- Hero ---- */
.hero{background:var(--cream)}
.hero-inner{display:flex;gap:40px;align-items:center;padding:56px 24px}
.hero-text{flex:1.5}
.eyebrow{font-size:12px;letter-spacing:.06em;color:var(--teal);margin-bottom:12px}
.hero-headline{font-size:34px;line-height:1.2;font-weight:600;margin:0 0 14px}
.hero-subline{font-size:17px;color:var(--muted);margin:0 0 24px;max-width:34em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-portrait{flex:1;display:flex;justify-content:center}
.hero-portrait img{width:220px;height:264px;object-fit:cover;border-radius:14px;border:1px solid var(--teal-pale-line)}
.portrait-placeholder{width:180px;height:216px;border-radius:14px;background:var(--teal-pale);border:1px solid var(--teal-pale-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--teal-deep);font-size:12px;text-align:center;padding:12px}

/* ---- Credentials strip ---- */
.credentials{background:var(--sage);border-top:1px solid var(--sage-line);border-bottom:1px solid var(--sage-line)}
.credentials-inner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:16px 24px}
.credentials-label{font-size:13px;color:var(--muted);margin-right:6px}
.chip{font-size:13px;padding:5px 12px;border-radius:20px;background:var(--cream);border:1px solid var(--line-2);color:#47534C}

/* ---- Articles ---- */
.articles{padding:44px 0 64px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.section-head h2{font-size:22px;font-weight:600;margin:0}
.empty{color:var(--muted)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px;color:var(--ink);transition:border-color .15s,transform .15s}
.card:hover{text-decoration:none;border-color:var(--teal-pale-line);transform:translateY(-2px)}
.card-title{font-size:18px;font-weight:600;line-height:1.35;margin:0}
.card-excerpt{font-size:14.5px;color:var(--muted);margin:0;line-height:1.55}
.card-date{font-size:12.5px;color:var(--muted);margin-top:auto}

/* ---- Tags ---- */
.tag{align-self:flex-start;font-size:11.5px;padding:3px 9px;border-radius:5px;font-weight:500}
.tag-coral{color:var(--coral-t);background:var(--coral-bg)}
.tag-teal{color:var(--teal-t);background:var(--teal-bg)}
.tag-blue{color:var(--blue-t);background:var(--blue-bg)}

/* ---- Article + pages ---- */
.article,.page{padding:40px 0 72px}
.back-link{display:inline-block;font-size:14px;color:var(--muted);margin-bottom:20px}
.article-title,.page-title{font-size:30px;line-height:1.25;font-weight:600;margin:14px 0 8px}
.article-meta{font-size:14px;color:var(--muted);margin-bottom:24px}
.article-hero{border-radius:14px;margin:8px 0 28px;border:1px solid var(--line)}

/* ---- Prose (article body) ---- */
.prose{font-size:18px;line-height:1.75;color:#33403A}
.prose h2{font-size:24px;font-weight:600;margin:2em 0 .5em;line-height:1.3}
.prose h3{font-size:20px;font-weight:600;margin:1.6em 0 .4em}
.prose p{margin:0 0 1.15em}
.prose a{color:var(--teal-deep);text-decoration:underline}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.4em}
.prose li{margin:.3em 0}
.prose blockquote{margin:1.5em 0;padding:.6em 1.2em;border-left:3px solid var(--teal-pale-line);background:var(--sage);color:var(--muted);border-radius:0 8px 8px 0}
.prose img{border-radius:12px;margin:1.5em 0;border:1px solid var(--line)}
.prose code{background:var(--sage);padding:2px 6px;border-radius:4px;font-size:.9em}
.prose hr{border:none;border-top:1px solid var(--line);margin:2em 0}

/* ---- Side-by-side panels (text beside an image, left or right) ---- */
.prose .split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;margin:1.9em 0}
.prose .split__media{margin:0}
.prose .split__media img{margin:0;width:100%}
.prose .split__media:empty{display:none}
.prose .split__body>:first-child{margin-top:0}
.prose .split__body>:last-child{margin-bottom:0}
.prose .split--image-left  .split__media{order:0}
.prose .split--image-left  .split__body {order:1}
.prose .split--image-right .split__media{order:1}
.prose .split--image-right .split__body {order:0}

.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* ---- Footer ---- */
.site-footer{background:var(--sage);border-top:1px solid var(--sage-line);margin-top:40px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;padding:26px 24px;gap:16px;flex-wrap:wrap}
.footer-title{font-size:15px;font-weight:600}
.footer-email{font-size:15px;color:var(--teal-deep)}
.footer-links a{font-size:14px;color:var(--teal-deep)}
.footer-legal{padding:0 24px 26px;font-size:13px;color:var(--muted)}

/* ---- Responsive ---- */
@media (max-width:720px){
  body{font-size:16px}
  .hero-inner{flex-direction:column;text-align:center;padding:40px 24px 32px;gap:28px}
  .hero-headline{font-size:28px}
  .hero-actions{justify-content:center}
  .hero-subline{margin-left:auto;margin-right:auto}
  .site-nav{gap:14px}
  .article-title,.page-title{font-size:25px}
  .prose{font-size:17px}
  /* Panels stack: image on top, text below */
  .prose .split{grid-template-columns:1fr;gap:16px}
  .prose .split--image-left  .split__media,
  .prose .split--image-right .split__media{order:0}
  .prose .split--image-left  .split__body,
  .prose .split--image-right .split__body{order:1}
}