/* css/markdown.css (NEW) */

/* Simple hero for About — left on desktop, centered on mobile */
.about-hero{ margin-top:3rem; text-align:left; }
.about-title{
  font-family: Metropolis-B, var(--font);
  font-weight:800;
  font-size:clamp(2rem,5vw,3rem);
  letter-spacing:-.01em;
}
.about-lead{
  color:var(--muted);
  font-family: Metropolis-R, var(--font);
  font-size:clamp(.98rem,1.5vw,1.08rem);
  margin:.7rem 0 0 0;
  max-width:840px;
}
@media (max-width:900px){
  .about-hero{ text-align:center; }
  .about-lead{ margin:.7rem auto 0; }
}

/* Markdown container */
.md{ 
  margin-top:2rem; 
  line-height:1.75; 
  color:var(--text);
  font-family: Metropolis-R, var(--font);
}

/* Headings */
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{
  font-family: Metropolis-SB, var(--font);
  font-weight:800;
  line-height:1.25;
  margin:1.3em 0 .5em;
}
.md h1{ font-size:clamp(1.8rem,3.5vw,2.4rem) }
.md h2{ font-size:clamp(1.4rem,2.6vw,1.9rem) }
.md h3{ font-size:clamp(1.15rem,2vw,1.35rem) }

/* Paragraphs & lists */
.md p{ margin:.85em 0; color:var(--text) }
.md ul,.md ol{ margin:.85em 0 .85em 1.2em; }
.md li{ margin:.35em 0; color:var(--muted) }

/* Links */
.md a{ color:var(--accent); text-decoration:none; }
.md a:hover{ text-decoration:underline }

/* Code */
.md code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.92em; background: var(--glass);
  padding:.16em .36em; border-radius:6px;
  border:0.8px solid var(--border);
}
.md pre{
  background: var(--glass);
  border:0.8px solid var(--border);
  border-radius:12px; padding:1rem; overflow:auto;
}
[data-theme="light"] .md code,
[data-theme="light"] .md pre{ background:#f6f7f9; }

/* Blockquote */
.md blockquote{
  border-left:3px solid var(--accent);
  margin:1.1rem 0; padding:.6rem 1rem;
  color:var(--muted); background:var(--glass);
  border-radius:0 10px 10px 0;
}
[data-theme="light"] .md blockquote{ background:#ffffff }

/* Tables */
.md table{ width:100%; border-collapse:collapse; font-size:.98rem; margin:1rem 0; }
.md thead th{
  text-align:left; padding:.6rem .7rem;
  border-bottom:1px solid var(--border);
  background: color-mix(in oklab, var(--glass) 85%, var(--glass-strong));
}
.md tbody td{
  padding:.6rem .7rem; border-top:1px solid var(--border); color:var(--muted);
}
[data-theme="light"] .md thead th{ background:#f6f7f9; }

/* Images */
.md img{ max-width:100%; height:auto; border-radius:12px; display:block; }

/* Horizontal rule */
.md hr{ border:0; border-top:1px solid var(--border); margin:1.4rem 0; }