/* ========================================
   MIRA — prose.css
   Long-form reading styles. Scoped via .prose class.
   Any container with class="prose" gets styled descendants.
   Used by document template, blog post body, and any future
   prose-centric page.
   ======================================== */

.prose {
   max-width: 68ch;
   margin: 0 auto;
   color: rgba(250, 246, 238, 0.84);
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   font-size: 1.08rem;
   line-height: 1.85;
}

/* Headings */
.prose h1 {
   font-family: 'Roboto', sans-serif;
   font-weight: 100;
   font-size: 2.75rem;
   line-height: 1.1;
   letter-spacing: -0.02em;
   color: var(--accent);
   margin: 0 0 1.5rem;
}

.prose h2 {
   font-family: 'Roboto', sans-serif;
   font-weight: 200;
   font-size: 1.75rem;
   line-height: 1.2;
   letter-spacing: -0.015em;
   color: var(--accent);
   margin: 3rem 0 1rem;
}

.prose h3 {
   font-family: 'Roboto', sans-serif;
   font-weight: 300;
   font-size: 1.25rem;
   line-height: 1.3;
   color: #faf6ee;
   margin: 2rem 0 0.75rem;
}

.prose h4 {
   font-family: 'IBM Plex Mono', monospace;
   font-weight: 500;
   font-size: 0.82rem;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: rgba(250, 246, 238, 0.8);
   margin: 2rem 0 0.5rem;
}

/* First heading after section start shouldn't have huge top margin */
.prose > h2:first-child,
.prose > h3:first-child {
   margin-top: 0;
}

/* Paragraphs */
.prose p {
   margin: 0 0 1.5rem;
}

.prose > p:last-child {
   margin-bottom: 0;
}

/* Lists */
.prose ul,
.prose ol {
   margin: 0 0 1.5rem;
   padding-left: 1.75rem;
}

.prose li {
   margin-bottom: 0.5rem;
}

.prose li::marker {
   color: rgb(var(--accent-rgb) / 0.6);
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
}

/* Links */
.prose a {
   color: var(--accent);
   text-decoration: none;
   border-bottom: 1px solid rgb(var(--accent-rgb) / 0.4);
   transition: border-color 0.2s ease, color 0.2s ease;
}

.prose a:hover {
   border-bottom-color: var(--accent);
}

.prose a:focus-visible {
   outline: 2px solid var(--accent);
   outline-offset: 3px;
   border-radius: 2px;
}

/* Emphasis */
.prose strong {
   color: #faf6ee;
   font-weight: 400;
}

.prose em {
   font-style: italic;
}

/* Blockquote */
.prose blockquote {
   border-left: 2px solid var(--accent);
   padding: 0.25rem 0 0.25rem 1.75rem;
   margin: 2rem 0;
   font-style: italic;
   color: rgba(250, 246, 238, 0.7);
}

.prose blockquote p {
   margin-bottom: 1rem;
}

.prose blockquote p:last-child {
   margin-bottom: 0;
}

/* Inline code */
.prose code {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.92em;
   background: rgba(250, 246, 238, 0.06);
   padding: 0.15em 0.4em;
   border-radius: 2px;
   color: #faf6ee;
}

/* Code block */
.prose pre {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.9rem;
   line-height: 1.65;
   background: rgba(250, 246, 238, 0.04);
   border: 1px solid rgba(250, 246, 238, 0.1);
   border-radius: 4px;
   padding: 1.25rem 1.5rem;
   overflow-x: auto;
   margin: 2rem 0;
   color: rgba(250, 246, 238, 0.88);
}

.prose pre code {
   background: none;
   padding: 0;
   border-radius: 0;
   font-size: inherit;
   color: inherit;
}

/* Horizontal rule */
.prose hr {
   border: none;
   border-top: 1px solid rgb(var(--accent-rgb) / 0.25);
   margin: 3rem 0;
}

/* Images and figures */
.prose img {
   max-width: 100%;
   height: auto;
   border-radius: 4px;
   margin: 2rem 0;
   display: block;
}

.prose figure {
   margin: 2rem 0;
}

.prose figure img {
   margin: 0 auto;
}

.prose figcaption {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.8rem;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: rgba(250, 246, 238, 0.6);
   text-align: center;
   margin-top: 0.75rem;
}

/* Tables */
.prose table {
   width: 100%;
   border-collapse: collapse;
   margin: 2rem 0;
   font-size: 0.95rem;
}

.prose th,
.prose td {
   padding: 0.75rem 1rem;
   text-align: left;
   border-bottom: 1px solid rgba(250, 246, 238, 0.1);
}

.prose th {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 0.72rem;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   color: rgba(250, 246, 238, 0.65);
   border-bottom: 1px solid rgb(var(--accent-rgb) / 0.3);
}

/* Mobile adjustments */
@media (max-width: 768px) {
   .prose {
      font-size: 1rem;
      line-height: 1.8;
   }

   .prose h1 {
      font-size: clamp(1.75rem, 6vw, 2.25rem);
   }

   .prose h2 {
      font-size: 1.4rem;
      margin: 2.5rem 0 0.875rem;
   }

   .prose h3 {
      font-size: 1.125rem;
   }

   .prose pre {
      padding: 1rem 1.25rem;
      font-size: 0.85rem;
   }

   .prose blockquote {
      padding-left: 1.25rem;
   }
}