/* Sāmatvārtha Sessions · md-reader.css
   Styles for marked.js-rendered markdown — invite.html & handout-v0.2.html.
   Mirrors the codex aesthetic — cream / ink / saffron, Melodrama serif. */

.md-reader {
  padding: 5rem 0 6rem;
}
.md-reader .md-loading,
.md-reader .md-error {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: center;
  padding: 3rem 0;
}
.md-reader .md-error a {
  color: var(--saffron);
  border-bottom: 1px solid rgba(201,115,34,0.4);
  text-decoration: none;
}

/* headings */
.md-reader h1 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 6vw, 5rem);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.md-reader h1 em { color: var(--saffron); font-style: normal; }
.md-reader h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 3.2rem 0 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}
.md-reader h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.md-reader h2 em { color: var(--saffron); font-style: italic; }
.md-reader h3 {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 2.2rem 0 0.8rem;
}
.md-reader h3 em { color: var(--saffron); font-style: italic; }
.md-reader h4 {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron);
  margin: 1.8rem 0 0.8rem;
}

/* paragraphs — sans (Outfit) for long-form legibility, matches codex .essay-body */
.md-reader p {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--mid);
  margin: 0 0 1.2rem;
  max-width: 64ch;
}
.md-reader p strong { color: var(--ink); font-weight: 500; }
.md-reader p em { color: var(--ink); font-style: italic; }
.md-reader p a {
  color: var(--saffron);
  border-bottom: 1px solid rgba(201,115,34,0.4);
  text-decoration: none;
  padding-bottom: 1px;
}
.md-reader p a:hover { border-bottom-color: var(--saffron); }

/* italic + bold inline (global) */
.md-reader em { color: var(--ink); font-style: italic; }
.md-reader strong { color: var(--ink); font-weight: 500; }
.md-reader h2 strong, .md-reader h3 strong { color: var(--saffron); }
.md-reader p strong em,
.md-reader li strong em { color: var(--saffron); font-style: italic; }

/* lists — sans body, mid colour, codex line-height */
.md-reader ul, .md-reader ol {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--mid);
  margin: 0 0 1.4rem;
  padding-left: 1.6rem;
  max-width: 64ch;
}
.md-reader ul li, .md-reader ol li {
  margin-bottom: 0.5rem;
}
.md-reader ul li::marker { color: var(--saffron); }
.md-reader ol li::marker { color: var(--saffron); font-family: var(--mono); font-size: 0.85em; }
.md-reader li em { color: var(--mid); }
.md-reader li strong { color: var(--ink); font-weight: 500; }
.md-reader li a {
  color: var(--saffron);
  border-bottom: 1px solid rgba(201,115,34,0.3);
  text-decoration: none;
}

/* blockquotes — callout treatment */
.md-reader blockquote {
  border-left: 3px solid var(--saffron);
  padding: 0.4rem 0 0.4rem 1.6rem;
  margin: 1.6rem 0;
  background: var(--bg-soft, var(--cream-soft, #ECE5D0));
  padding: 1.2rem 1.6rem;
  max-width: 64ch;
}
.md-reader blockquote p {
  font-family: var(--sans);
  font-size: 1rem;
  font-style: italic;
  color: var(--mid);
  margin: 0 0 0.6rem;
  line-height: 1.65;
}
.md-reader blockquote p:last-child { margin-bottom: 0; }
.md-reader blockquote strong { color: var(--saffron); font-style: normal; }

/* code */
.md-reader code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink);
  background: var(--cream-soft, #ECE5D0);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  border-radius: 1px;
}
.md-reader pre {
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.5;
  background: var(--cream-soft, #ECE5D0);
  border: 1px solid var(--rule-strong);
  padding: 1.2rem 1.4rem;
  margin: 1.4rem 0;
  overflow-x: auto;
  max-width: 64ch;
}
.md-reader pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.92em;
}

/* tables */
.md-reader table {
  width: 100%;
  max-width: 70ch;
  border-collapse: collapse;
  margin: 1.6rem 0 2rem;
  font-family: var(--sans);
  font-size: 0.96rem;
}
.md-reader th, .md-reader td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.5;
}
.md-reader thead th {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--saffron);
  font-weight: 400;
  border-bottom: 1px solid var(--rule-strong);
}
.md-reader tbody td strong { color: var(--ink); font-weight: 500; }
.md-reader tbody td em { color: var(--mid); }
.md-reader tbody tr:hover { background: var(--cream-soft, #ECE5D0); }

/* hr */
.md-reader hr {
  border: none;
  border-top: 1px solid var(--rule-strong);
  margin: 3rem 0;
}

/* images */
.md-reader img {
  max-width: 100%;
  height: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
}

/* kbd */
.md-reader kbd {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--cream-soft, #ECE5D0);
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 2px;
}

/* page meta — small top eyebrow strip linking back to bootcamp.html */
.md-reader-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.6rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.md-reader-meta a {
  color: var(--saffron);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,115,34,0.3);
  padding-bottom: 1px;
}
.md-reader-meta .raw-link {
  color: var(--faint);
  border-color: var(--rule);
}

/* mobile */
@media (max-width: 700px) {
  .md-reader { padding: 3rem 0 4rem; }
  .md-reader p, .md-reader ul, .md-reader ol { font-size: 1.05rem; }
  .md-reader table { font-size: 0.9rem; }
}