/* base.css - global elements and typography */
body{
  font-family:var(--font-body);
  font-weight:400;
  color:var(--text);
  background:var(--bg);
  font-size:16px;
}
h1,h2,h3{font-family:var(--font-display);font-weight:400;color:var(--ink);line-height:1.15}
/* Italiana has no true italic — keep emphasised words upright rather than faux-slanted */
h1 em,h2 em,h3 em{font-style:normal}
h1{font-size:clamp(24px,4.4vw,40px);line-height:1.12}
h2{font-size:clamp(24px,3vw,30px)}
h3{font-size:20px}
p{max-width:60ch}

/* shared type utilities */
.eyebrow{
  font-family:var(--font-body);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--accent-ink);margin:0;font-weight:400;
}
.lede{font-size:15px;line-height:1.7;color:var(--text);font-weight:400}
.muted{color:var(--muted)}
.center{text-align:center}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* image placeholders (swap for real <img> later) */
.ph{
  background:var(--field);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;
  color:var(--muted);font-size:11px;letter-spacing:1px;
  border-radius:var(--radius-card);
}
.ph svg{width:26px;height:26px;stroke:var(--muted)}