/* ============================================================================
   OLISEMEKA.DEV — LONG-FORM CONTENT
   ----------------------------------------------------------------------------
   Typography for rendered Markdown: blog posts, project write-ups, the Now
   page body, and any other `.prose` region. Everything here is scoped to
   content so page chrome stays predictable.

   SECTIONS
     01. Article shell
     02. Prose rhythm
     03. Headings & anchors
     04. Inline elements
     05. Lists
     06. Quotes & callouts
     07. Code
     08. Tables
     09. Media, embeds & galleries
     10. Table of contents
     11. Article footer (tags, share, author)
   ============================================================================ */

/* ============================================================================
   01. ARTICLE SHELL
   ============================================================================ */
.article {
  padding-block: var(--sp-8) var(--sp-7);
}

/* Back to the shelf, above the kicker. */
.article-back { margin: 0 0 var(--sp-5); }

.article-head {
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: var(--rule-w) solid var(--rule);
}

.article-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.article-kicker .sep { inline-size: 3px; block-size: 3px; background: var(--rule-3); }

.article-title {
  margin: 0 0 var(--sp-4);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-3);
}
.article-meta .meta-item { display: inline-flex; align-items: center; gap: var(--sp-2); }

.article-standfirst {
  max-width: 42rem;
  margin: var(--sp-5) 0 0;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-2);
}

.article-hero {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-2);
  border: var(--rule-w) solid var(--rule);
  background: var(--paper-raised);
}
.article-hero img { inline-size: 100%; }

.article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: var(--rule-w) solid var(--rule);
}

/* ============================================================================
   02. PROSE RHYTHM
   ============================================================================ */
.prose {
  font-size: var(--step-1);
  line-height: 1.75;
  color: var(--ink);
}
.prose > * + * { margin-top: var(--sp-5); }
.prose p { margin: 0; }
.prose > p:first-child {
  font-size: 1.2em;
  line-height: 1.6;
  color: var(--ink);
}
.prose > p:first-child::first-letter { font-weight: 600; }

/* Prose that opens a page (the Now page intro) rather than an article. */
.prose--intro { margin-bottom: var(--sp-8); font-size: var(--step-0); }
.prose--intro > p:first-child { font-size: 1em; }

/* Tag / technology chips that sit inside an article header. */
.article-head .card-tags { margin-top: var(--sp-5); }
.article-head .article-meta { margin-top: var(--sp-5); }
.article-head .article-meta .meta-item {
  padding: 0.3rem 0.6rem;
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
}
.article-head .article-meta .meta-item:hover { border-color: var(--ink); text-decoration: none; }

/* ============================================================================
   03. HEADINGS & ANCHORS
   ============================================================================ */
.prose h2,
.prose h3,
.prose h4 {
  margin: 0;
  scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}
.prose > h2 { margin-top: var(--sp-8); font-size: var(--step-3); }
.prose > h3 { margin-top: var(--sp-7); font-size: var(--step-2); }
.prose > h4 { margin-top: var(--sp-6); font-size: var(--step-1); }

.prose h2::before,
.prose h3::before {
  content: "";
  display: block;
  inline-size: 1.75rem;
  block-size: 4px;
  margin-bottom: var(--sp-3);
  background-image: linear-gradient(90deg, var(--accent) 0 4px, transparent 4px 8px);
  background-size: 8px 4px;
}
.prose h4::before { display: none; }

.prose .heading-anchor {
  margin-left: 0.4em;
  color: var(--ink-4);
  opacity: 0;
  transition: opacity 0.12s ease;
  font-weight: 400;
}
.prose h2:hover .heading-anchor,
.prose h3:hover .heading-anchor,
.prose h4:hover .heading-anchor,
.prose .heading-anchor:focus { opacity: 1; }

/* ============================================================================
   04. INLINE ELEMENTS
   ============================================================================ */
.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.12s ease, color 0.12s ease;
}
.prose a:hover { text-decoration-color: var(--accent); color: var(--accent-deep); }

.prose strong { font-weight: 650; color: var(--ink); }

.prose mark {
  background: #fdf0c8;
  color: inherit;
  padding: 0.05em 0.2em;
}

.prose abbr[title] { text-decoration: underline dotted var(--rule-3); cursor: help; }

.prose kbd {
  font-family: var(--font-mono);
  font-size: 0.82em;
  padding: 0.1em 0.4em;
  border: var(--rule-w) solid var(--rule-2);
  border-bottom-width: 2px;
  background: var(--paper-raised);
  color: var(--ink);
}

.prose :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0.12em 0.36em;
  border: var(--rule-w) solid var(--rule);
  background: var(--paper-sunken);
  color: var(--accent-deep);
  white-space: break-spaces;
}

/* ============================================================================
   05. LISTS
   ============================================================================ */
.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.35rem;
}
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--ink-4); }
.prose ul > li::marker { content: "▪  "; }
.prose ol > li::marker {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--ink-3);
}
.prose li > ul,
.prose li > ol { margin-top: var(--sp-2); }

.prose dl { margin: 0; }
.prose dt { font-weight: 650; margin-top: var(--sp-4); }
.prose dd { margin: 0.25rem 0 0 1.25rem; color: var(--ink-2); }

/* ============================================================================
   06. QUOTES & CALLOUTS
   ============================================================================ */
.prose blockquote {
  margin: 0;
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-style: normal;
}
.prose blockquote p { margin: 0; }
.prose blockquote p + p { margin-top: var(--sp-3); }
.prose blockquote cite,
.prose blockquote footer {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-style: normal;
  color: var(--ink-3);
}

.prose .callout {
  padding: var(--sp-4) var(--sp-5);
  border: var(--rule-w) solid var(--rule-2);
  border-left: 3px solid var(--accent);
  background: var(--paper-raised);
  font-size: var(--step-0);
}
.prose .callout > :first-child { margin-top: 0; }
.prose .callout > :last-child { margin-bottom: 0; }
.prose .callout--warn { border-left-color: #b45309; }
.prose .callout--note { border-left-color: var(--rule-3); }

/* ============================================================================
   07. CODE
   ============================================================================ */
.prose pre {
  position: relative;
  margin: 0;
  padding: var(--sp-5);
  overflow-x: auto;
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.7;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}
/* Pixel "gutter" marks along the top edge of a code block. */
.prose pre::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background-image: linear-gradient(90deg, var(--rule-2) 0 4px, transparent 4px 8px);
  background-size: 8px 3px;
  opacity: 0.7;
  pointer-events: none;
}
.prose pre code {
  display: block;
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}

/* Chroma / hard-coded inline colours get normalised to the paper palette. */
.prose pre [style*="color"] { color: inherit !important; background: transparent !important; }
.prose pre span[style*="color:#f8f8f2"],
.prose pre span[style*="color: #f8f8f2"] { color: var(--ink) !important; }
.prose pre span[style*="color:#f92672"],
.prose pre span[style*="color:#ff79c6"],
.prose pre span[style*="color:#f472b6"] { color: #b91c1c !important; }
.prose pre span[style*="color:#a6e22e"],
.prose pre span[style*="color:#50fa7b"],
.prose pre span[style*="color:#84cc16"] { color: #15803d !important; }
.prose pre span[style*="color:#e6db74"],
.prose pre span[style*="color:#f1fa8c"] { color: #a16207 !important; }
.prose pre span[style*="color:#66d9ef"],
.prose pre span[style*="color:#8be9fd"],
.prose pre span[style*="color:#0ea5e9"] { color: #0369a1 !important; }
.prose pre span[style*="color:#ae81ff"],
.prose pre span[style*="color:#bd93f9"] { color: #6d28d9 !important; }
.prose pre span[style*="color:#75715e"],
.prose pre span[style*="color:#6272a4"] { color: var(--ink-4) !important; font-style: italic; }

.prose pre::-webkit-scrollbar { height: 10px; }
.prose pre::-webkit-scrollbar-track { background: var(--paper-sunken); }
.prose pre::-webkit-scrollbar-thumb { background: var(--rule-2); }

/* ============================================================================
   08. TABLES
   ============================================================================ */
.prose .table-scroll { overflow-x: auto; }
.prose table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
}
.prose th,
.prose td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: var(--rule-w) solid var(--rule);
  vertical-align: top;
}
.prose thead th {
  background: var(--paper-sunken);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: var(--rule-w) solid var(--rule-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--paper-sunken); }

/* ============================================================================
   09. MEDIA, EMBEDS & GALLERIES
   ============================================================================ */
.prose figure { margin: 0; }
.prose figure img { inline-size: 100%; }

.prose img {
  inline-size: 100%;
  border: var(--rule-w) solid var(--rule);
  background: var(--paper-raised);
}

/* A caption is an italic-only paragraph immediately after an image. */
.prose p:has(> em:only-child) {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}
.prose p:has(> em:only-child) em { font-style: normal; }

.prose .embed-youtube,
.prose .embed-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
  padding: var(--sp-2);
}
.prose .embed-youtube iframe,
.prose .embed-video iframe {
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}

.prose .screenshots-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.prose .screenshots-gallery img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  cursor: zoom-in;
  transition: border-color 0.12s ease;
}
.prose .screenshots-gallery img:hover { border-color: var(--ink); }

.prose .project-screenshots h2 { margin-top: var(--sp-8); }

/* ============================================================================
   10. TABLE OF CONTENTS
   ============================================================================ */
.toc {
  margin: 0 0 var(--sp-7);
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
}
.toc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--paper-sunken);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.toc-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.toc-body ul { list-style: none; margin: 0; padding: 0; }
.toc-body li { margin-top: var(--sp-2); font-size: var(--step--1); }
.toc-body ul ul { padding-left: var(--sp-4); margin-top: var(--sp-2); }
.toc-body ul ul li { font-size: var(--step--1); color: var(--ink-2); }
.toc-body a { color: var(--ink-2); }
.toc-body a:hover { color: var(--accent); text-decoration: none; }

.toc-toggle { display: none; }

@media (max-width: 48rem) {
  .toc-body { display: none; }
  .toc.is-open .toc-body { display: block; }
  .toc-head { cursor: pointer; }
  .toc-toggle {
    display: inline-grid;
    place-items: center;
    margin-left: auto;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border: var(--rule-w) solid var(--rule-2);
    background: var(--paper-raised);
    color: var(--ink-2);
    cursor: pointer;
  }
}

/* ============================================================================
   11. ARTICLE FOOTER
   ============================================================================ */
.article-foot {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: var(--rule-w) solid var(--rule);
  display: grid;
  gap: var(--sp-6);
}

.foot-block-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.tag-row a {
  padding: 0.25rem 0.6rem;
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
}
.tag-row a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }

.share-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.45rem 0.75rem;
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}
.share-btn:hover { border-color: var(--ink); color: var(--ink); }

.author-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: var(--rule-w) solid var(--rule-2);
  background: var(--paper-raised);
}
.author-card img {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  flex: none;
  border: var(--rule-w) solid var(--rule);
  image-rendering: pixelated;
}
.author-card .author-name { font-weight: 650; }
.author-card .author-line { margin: 0; font-size: var(--step--1); color: var(--ink-2); }