/* ===== Voryntel Blog — extends the site design system ===== */
/* Loads on top of the root styles.css (tokens, header, footer, buttons,
   grain, scroll-progress, brand, kicker, grad-text are inherited). */

/* ---- Reading measure ---- */
:root { --measure: 720px; }

/* ===== Blog index: intro ===== */
.blog-hero { position: relative; overflow: hidden; padding: 56px 0 20px; }
.blog-hero .hero-bg { position: absolute; inset: -30% -10% 0; z-index: 0; filter: blur(60px); opacity: 0.75; pointer-events: none; }
.blog-hero .b1 { width: 40vw; height: 40vw; max-width: 520px; max-height: 520px; left: -8%; top: -12%; background: radial-gradient(circle, var(--g1), transparent 68%); animation: drift1 18s ease-in-out infinite; }
.blog-hero .b2 { width: 38vw; height: 38vw; max-width: 480px; max-height: 480px; right: -6%; top: -18%; background: radial-gradient(circle, var(--g4), transparent 66%); animation: drift2 22s ease-in-out infinite; }
.blog-hero-inner { position: relative; z-index: 1; }
.blog-hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 3.8rem); line-height: 1.0;
  letter-spacing: -0.045em; margin: 10px 0 18px; text-wrap: balance;
}
.blog-hero .lede { font-size: clamp(1.1rem, 2vw, 1.32rem); color: var(--ink-2); max-width: 30em; }

/* ===== Post list ===== */
.post-list { padding: 34px 0 96px; }
.post-grid { display: grid; gap: 22px; }
.post-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 128px 1fr; gap: 30px; align-items: start;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 22px;
  padding: 30px 32px; text-decoration: none; color: inherit;
  box-shadow: 0 10px 30px -20px rgba(30,20,60,0.3);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.post-card:hover { transform: translateY(-5px); border-color: rgba(79,70,229,0.35); box-shadow: 0 26px 50px -24px rgba(79,70,229,0.4); }
.post-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, -30%), rgba(79,70,229,0.12), transparent 62%);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.post-card:hover::after { opacity: 1; }

.post-date { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; }
.post-date .d-day { font-family: var(--display); font-weight: 700; font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(100deg, var(--g1), var(--g3) 55%, var(--g4)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.post-date .d-mo { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

.post-body h2 { font-family: var(--display); font-weight: 700; font-size: 1.6rem; line-height: 1.14; letter-spacing: -0.025em; margin: 0 0 10px; text-wrap: balance; }
.post-body p { color: var(--muted); font-size: 1.04rem; margin: 0 0 16px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.post-tags span {
  font-size: 0.78rem; font-weight: 600; color: var(--ink-2);
  padding: 5px 13px; border-radius: 100px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--g2) 6%, var(--bg-2));
}
.post-more { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--g2); font-size: 0.98rem; }
.post-more span { transition: transform 0.2s var(--ease); }
.post-card:hover .post-more span { transform: translateX(4px); }
.post-meta-inline { font-size: 0.86rem; color: var(--muted); }

/* ===== Article ===== */
.article-head { position: relative; overflow: hidden; padding: 30px 0 26px; }
.article-head .hero-bg { position: absolute; inset: -40% -10% 0; z-index: 0; filter: blur(64px); opacity: 0.6; pointer-events: none; }
.article-head .b1 { width: 42vw; height: 42vw; max-width: 540px; max-height: 540px; left: -10%; top: -30%; background: radial-gradient(circle, var(--g1), transparent 68%); }
.article-head .b2 { width: 36vw; height: 36vw; max-width: 460px; max-height: 460px; right: -8%; top: -34%; background: radial-gradient(circle, var(--g4), transparent 66%); }
.article-head-inner { position: relative; z-index: 1; max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

.back-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; color: var(--muted); text-decoration: none; margin-bottom: 22px; transition: color 0.2s var(--ease), gap 0.2s var(--ease); }
.back-link:hover { color: var(--g2); gap: 11px; }

.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 0.9rem; color: var(--muted); margin-top: 18px; }
.article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.article-meta .tag { font-weight: 600; color: var(--ink-2); padding: 5px 13px; border-radius: 100px; border: 1px solid var(--line); background: color-mix(in srgb, var(--g2) 6%, var(--bg-2)); }

/* ---- Article body / prose ---- */
.prose { max-width: var(--measure); margin: 0 auto; padding: 14px 24px 90px; font-size: 1.12rem; line-height: 1.72; color: var(--ink-2); }
.prose > * { margin-left: auto; margin-right: auto; }

/* the pandoc article dumps its first <h1> as the title — we hide it and use the styled head instead */
.prose > h1:first-of-type { display: none; }
/* the pandoc "Published ..." line right after the title */
.prose > h1:first-of-type + p { display: none; }

.prose h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 1.95rem); line-height: 1.12; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance;
  margin: 2.6rem 0 0.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
}
.prose h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink); margin: 2rem 0 0.5rem; text-wrap: balance;
}
.prose p { margin: 0 auto 1.25rem; }
.prose a { color: var(--g2); font-weight: 500; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--g2) 35%, transparent); transition: border-color 0.2s, color 0.2s; }
.prose a:hover { color: var(--g1); border-bottom-color: var(--g1); }

.prose ul, .prose ol { max-width: var(--measure); margin: 0 auto 1.35rem; padding-left: 1.4rem; }
.prose li { margin: 0.45rem 0; }
.prose li::marker { color: var(--g2); }

/* Figures + captions (a paragraph that is only italic text follows each image) */
.prose img {
  display: block; max-width: 100%; height: auto;
  margin: 1.9rem auto 0.7rem;
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 50px -26px rgba(30,20,60,0.5);
}
.prose p > em:only-child {
  display: block; text-align: center; color: var(--muted);
  font-size: 0.92rem; line-height: 1.55; font-style: italic;
  max-width: 34em; margin: 0 auto 1.9rem;
}

/* Inline code + code blocks */
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em; background: color-mix(in srgb, var(--g2) 8%, #fff);
  color: #4338ca; padding: 0.14em 0.42em; border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--g2) 14%, transparent);
}
.prose pre {
  max-width: var(--measure); margin: 1.4rem auto 1.5rem;
  background: #0f1024; color: #e6e6f0;
  border: 1px solid rgba(124,58,237,0.28); border-radius: 14px;
  padding: 18px 20px; overflow-x: auto;
  box-shadow: 0 24px 50px -30px rgba(79,70,229,0.7);
}
.prose pre code { background: none; border: none; color: inherit; padding: 0; font-size: 0.82rem; line-height: 1.6; }
.prose pre a { border: none; }

/* Tables */
.prose table { max-width: var(--measure); width: 100%; margin: 1.7rem auto 1.9rem; border-collapse: separate; border-spacing: 0;
  font-size: 0.95rem; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 40px -28px rgba(30,20,60,0.4); }
.prose th, .prose td { padding: 11px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--grad); color: #fff; font-weight: 600; letter-spacing: 0.01em; border-bottom: none; }
.prose tbody tr:last-child td { border-bottom: none; }
.prose tbody tr:nth-child(even) { background: color-mix(in srgb, var(--g2) 4%, var(--bg-2)); }

.prose blockquote { max-width: var(--measure); margin: 1.4rem auto; padding: 0.5rem 1.2rem; color: var(--muted);
  border-left: 3px solid; border-image: var(--grad) 1; background: color-mix(in srgb, var(--g2) 4%, transparent); border-radius: 0 10px 10px 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.4rem auto; }

/* ---- Article footer / CTA ---- */
.article-cta { max-width: var(--measure); margin: 0 auto 90px; padding: 0 24px; }
.article-cta-card {
  position: relative; overflow: hidden; border-radius: 26px;
  background: var(--grad); color: #fff; padding: 46px 44px; text-align: center;
  box-shadow: 0 40px 80px -34px rgba(79,70,229,0.6);
}
.article-cta-card .cb { position: absolute; border-radius: 50%; }
.article-cta-card .cb1 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(255,255,255,0.32), transparent 62%); top: -160px; left: -70px; filter: blur(10px); }
.article-cta-card .cb2 { width: 320px; height: 320px; background: radial-gradient(circle, var(--g5), transparent 60%); bottom: -170px; right: -50px; opacity: 0.5; filter: blur(20px); }
.article-cta-card > * { position: relative; z-index: 1; }
.article-cta-card h2 { font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.2rem); letter-spacing: -0.03em; margin-bottom: 12px; }
.article-cta-card p { color: rgba(255,255,255,0.9); max-width: 34em; margin: 0 auto 26px; }

/* ===== Pandoc syntax highlighting (dark scheme for our code blocks) ===== */
code span.al { color: #ff6b6b; font-weight: bold; }
code span.an { color: #8aa0b6; font-style: italic; }
code span.at { color: #d4b483; }
code span.bn { color: #7ee787; }
code span.bu { color: #7ee787; }
code span.cf { color: #ff9edb; font-weight: bold; }
code span.ch { color: #a5d6ff; }
code span.cn { color: #ffa657; }
code span.co { color: #8b8ba7; font-style: italic; }
code span.cv { color: #8b8ba7; font-style: italic; }
code span.do { color: #8b8ba7; font-style: italic; }
code span.dt { color: #79c0ff; }
code span.dv { color: #7ee787; }
code span.er { color: #ff6b6b; font-weight: bold; }
code span.fl { color: #7ee787; }
code span.fu { color: #d2a8ff; }
code span.im { color: #7ee787; font-weight: bold; }
code span.in { color: #8b8ba7; font-style: italic; }
code span.kw { color: #ff9edb; font-weight: bold; }
code span.op { color: #b0b0cc; }
code span.ot { color: #7ee787; }
code span.pp { color: #ffa657; }
code span.sc { color: #a5d6ff; }
code span.ss { color: #a5d6ff; }
code span.st { color: #a5d6ff; }
code span.va { color: #ffd7a8; }
code span.vs { color: #a5d6ff; }
code span.wa { color: #ffa657; font-style: italic; }
.prose pre code span.co { color: #8b8ba7; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  .post-card { grid-template-columns: 1fr; gap: 12px; padding: 26px 24px; }
  .post-date { flex-direction: row; align-items: baseline; gap: 8px; }
  .post-date .d-day { font-size: 1.6rem; }
  .prose { font-size: 1.05rem; padding-left: 20px; padding-right: 20px; }
  .article-head-inner, .article-cta { padding-left: 20px; padding-right: 20px; }
}