/* drheatherauld.com shared chrome + article styles (Botanical Calm).
   Header/footer markup must match preview/homepage exactly. When Astro lands,
   this becomes the BaseLayout styles and the header/footer become components. */
:root{
  --color-sage:#7F8F6D; --color-leaf:#3F4A3A; --color-cream:#F6F2E8; --color-clay:#C08457;
  --color-ink:#3A3A34; --color-muted:#6F6F64; --color-line:#E3DDCF; --color-page:#FAF8F2;
  --color-on-dark:#FFFFFF;
  --font-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --font-sans:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --text-h1:clamp(34px,6vw,46px); --text-h2:26px; --text-h3:23px;
  --text-body:17px; --text-small:15px; --text-fine:12.5px; --text-eyebrow:12px;
  --leading-snug:1.3; --leading-body:1.65;
  --gutter:max(22px, calc((100% - 1180px) / 2));
  --container-article:680px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--color-page);color:var(--color-ink);font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased}
a{color:var(--color-sage);text-decoration:none}
a:hover{color:var(--color-leaf)}
a:focus-visible{outline:3px solid var(--color-sage);outline-offset:3px;border-radius:2px}

/* ---- Site header (matches homepage) ---- */
.site-header{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;
  padding:22px var(--gutter);background:var(--color-cream)}
.site-header__name{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-sage)}
.site-header__name:hover{color:var(--color-leaf)}
.site-nav{display:flex;flex-wrap:wrap;gap:12px 22px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.site-nav a[aria-current]{color:var(--color-clay)}

/* ---- Site footer (matches homepage) ---- */
.site-footer{background:var(--color-cream);padding:24px var(--gutter);display:flex;flex-wrap:wrap;gap:8px 24px;
  justify-content:space-between;font-size:var(--text-fine);color:var(--color-muted)}

/* ---- Shared bits ---- */
.eyebrow{font-size:var(--text-eyebrow);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--color-sage);margin:0}
.eyebrow a{color:inherit}
.eyebrow a:hover{color:var(--color-leaf)}

/* ---- Articles index ---- */
.page-intro{background:var(--color-cream);padding:clamp(48px,8vw,72px) var(--gutter) clamp(40px,7vw,60px)}
.page-intro h1{font-family:var(--font-serif);font-size:clamp(42px,7vw,64px);font-weight:600;line-height:1.05;
  color:var(--color-leaf);margin:14px 0 18px}
.page-intro p.lede{font-family:var(--font-serif);font-style:italic;font-weight:600;font-size:clamp(20px,3vw,26px);
  line-height:1.35;color:var(--color-sage);margin:0;max-width:30ch;text-wrap:pretty}
.article-list{list-style:none;margin:0;padding:clamp(24px,5vw,40px) var(--gutter) clamp(56px,9vw,88px)}
.article-list li{border-bottom:1px solid var(--color-line)}
.article-card{display:grid;grid-template-columns:80px minmax(0,1fr);gap:4px 24px;padding:clamp(28px,5vw,40px) 0;
  color:inherit}
.article-card__num{font-family:var(--font-serif);font-size:44px;line-height:1;color:var(--color-line);grid-row:span 3}
.article-card__title{font-family:var(--font-serif);font-size:clamp(26px,3.6vw,32px);font-weight:600;line-height:1.15;
  color:var(--color-leaf);margin:0 0 8px;transition:color .18s ease}
.article-card__excerpt{font-size:16px;line-height:var(--leading-body);color:var(--color-ink);margin:0 0 12px;max-width:62ch;text-wrap:pretty}
.article-card__more{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-sage)}
.article-card:hover .article-card__title{color:var(--color-sage)}
.article-card:hover .article-card__more{color:var(--color-leaf)}
@media (max-width:560px){
  .article-card{grid-template-columns:1fr}
  .article-card__num{grid-row:auto;font-size:32px;margin-bottom:6px}
}

/* ---- Article page ---- */
.article-wrap{max-width:var(--container-article);margin:0 auto;padding:clamp(40px,7vw,64px) 22px clamp(56px,9vw,88px)}
.article-wrap h1{font-family:var(--font-serif);font-weight:600;color:var(--color-leaf);font-size:clamp(36px,6vw,46px);
  line-height:1.08;letter-spacing:.2px;margin:14px 0 14px;text-wrap:balance}
.byline{color:var(--color-muted);font-size:14px;margin:0 0 32px;padding-bottom:22px;border-bottom:1px solid var(--color-line)}
.prose{font-size:var(--text-body);line-height:1.68}
.prose p{margin:0 0 20px}
.prose h2,.prose h3{font-family:var(--font-serif);font-weight:600;color:var(--color-leaf);line-height:1.15}
.prose h2{font-size:28px;margin:36px 0 12px}
.prose h3{font-size:26px;margin:34px 0 12px}
.prose .lead-in{margin-bottom:8px;font-weight:600;color:var(--color-leaf)}
.prose .close{margin-top:26px}
.article-back{margin-top:48px;padding-top:22px;border-top:1px solid var(--color-line);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.article-card__title{transition:none}}

.site-nav a[aria-current]{color:var(--color-clay)}