/* ============================================================
   Analogue — Blog
   Loaded AFTER styles.css. Re-themes the shared design tokens to
   light, so the reused nav / buttons / footer flip automatically,
   then adds the editorial listing + article layout.
   ============================================================ */

/* ---- light theme: override the shared tokens on the blog body ---- */
body.blog {
  --bg: #ffffff;
  --bg-2: #ffffff;
  --panel: #f3f3f4;
  --line: rgba(18, 18, 23, 0.10);
  --line-strong: rgba(18, 18, 23, 0.16);
  --text: #17171b;
  --muted: #56565f;
  --faint: #8a8a93;
  --ink-body: #727274; /* body copy colour for all blog text */
  --container: 1320px; /* shared page width — matches the homepage + footer */
  --content: 760px;    /* article reading column (text AND images live here) */

  background: #ffffff;
  color: var(--text);
  scroll-behavior: smooth;
}
body.blog ::selection { background: rgba(123, 140, 255, 0.24); }

/* the film grain reads as heavy speckle on white — keep just a whisper */
body.blog .grain { opacity: 0.022; }

/* ---- scroll reveals: JS adds .reveal (no-JS shows all), IO adds .is-in ----
   End state is applied by the class, not a JS ticker, so content can never
   be stranded hidden even if rAF is throttled. */
html.js .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
html.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- nav: swap the dark scrim for a light one ---- */
body.blog .nav::before {
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 45%,
    rgba(255, 255, 255, 0.30) 78%, rgba(255, 255, 255, 0) 100%);
}
body.blog .nav::after { background: rgba(18, 18, 23, 0.08); }
body.blog .nav-links a[aria-current="page"] { color: var(--text); }

/* ---- buttons: dark pill on white (keeps the shared shape) ---- */
body.blog .btn-light { background: var(--text); color: #fff; }
body.blog .btn-light:hover { box-shadow: 0 6px 26px rgba(18, 18, 23, 0.20); }
body.blog .btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
body.blog .btn-ghost:hover { border-color: var(--text); }

/* ============================================================
   BLOG — index / listing (uses the shared 1320px container)
   ============================================================ */
.blog-main {
  padding: clamp(128px, 20vh, 216px) var(--pad) clamp(40px, 6vh, 72px);
}
.blog-inner { max-width: var(--container); margin: 0 auto; }

/* grid of posts */
.post-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(44px, 5.5vw, 76px) clamp(30px, 4vw, 56px);
}
@media (max-width: 720px) { .post-grid { grid-template-columns: 1fr; gap: 52px; } }

.post-card-link { display: block; color: inherit; }
.post-card-media {
  position: relative; overflow: hidden; border-radius: 16px;
  aspect-ratio: 3 / 2; background: var(--panel); margin-bottom: 22px;
}
.post-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.post-card-link:hover .post-card-media img { transform: scale(1.035); }
.post-card-title {
  font-size: clamp(21px, 2.3vw, 27px); font-weight: 550;
  letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 10px;
  transition: color 0.25s;
}
.post-card-desc { font-size: 16px; line-height: 1.55; color: var(--ink-body); max-width: 60ch; }
.post-card-more {
  display: inline-block; margin-top: 16px; font-size: 14px;
  font-weight: 500; color: var(--text);
}
.post-card-more .back-arrow {
  display: inline-block; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.post-card-link:hover .post-card-more .back-arrow { transform: translateX(4px); }

/* ============================================================
   ARTICLE — sticky on-this-page nav (left) + one contained column
   ============================================================ */
.article-main {
  padding: clamp(112px, 15vh, 168px) var(--pad) clamp(28px, 5vh, 64px);
}
.article {
  display: grid;
  /* TOC | spacer (gives the sticky nav more room) | content */
  grid-template-columns: minmax(150px, 220px) minmax(0, 10px) minmax(0, var(--content));
  justify-content: start; /* TOC hangs off the same left edge as the nav + blog listing */
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
  max-width: var(--container); margin: 0 auto;
}
.article-toc { grid-column: 1; }
.article-content { grid-column: 3; }

/* left column: back link + table of contents, sticky on desktop */
.article-toc {
  position: sticky; top: 104px; align-self: start;
  display: flex; flex-direction: column; gap: clamp(22px, 3vh, 34px);
}
.toc { display: flex; flex-direction: column; }
.toc-link {
  position: relative; padding: 7px 0 7px 20px;
  font-size: 14px; line-height: 1.4; color: var(--faint);
  transition: color 0.25s;
}
.toc-link::before {
  content: ""; position: absolute; left: 0; top: 50%; margin-top: -3px;
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  opacity: 0; transform: scale(0.6); transition: opacity 0.25s, transform 0.25s;
}
.toc-link:hover { color: var(--muted); }
.toc-link.is-active { color: var(--text); font-weight: 500; }
.toc-link.is-active::before { opacity: 1; transform: scale(1); }

.article-content { min-width: 0; }

.back-link {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--muted); transition: color 0.25s;
}
.back-link:hover { color: var(--text); }
.back-link .back-arrow { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.back-link:hover .back-arrow { transform: translateX(-3px); }

.article-header { margin: 0 0 clamp(34px, 5vh, 52px); }
.article-title {
  font-size: clamp(32px, 4.4vw, 50px); font-weight: 550;
  letter-spacing: -0.035em; line-height: 1.06;
}
.article-dek {
  margin-top: clamp(18px, 3vh, 26px);
  font-size: clamp(17px, 1.7vw, 19px); line-height: 1.55; /* matches .hero-sub / .lede */
  color: var(--muted); font-weight: 400;
}

.article-hero {
  margin: 0 0 clamp(40px, 6vh, 68px);
  border-radius: 16px; overflow: hidden; background: var(--panel);
}
.article-hero img { width: 100%; height: auto; display: block; }

.article-body > :first-child { margin-top: 0; }

.prose { font-size: 16px; line-height: 1.55; color: var(--ink-body); } /* matches body {} on the homepage */
.prose p { margin: 0 0 1.35em; }
.prose h2 {
  font-size: clamp(23px, 2.8vw, 31px); font-weight: 600;
  letter-spacing: -0.022em; line-height: 1.22; color: var(--text);
  margin: clamp(44px, 6vh, 68px) 0 0.55em; scroll-margin-top: 100px;
}
.prose h3 {
  font-size: clamp(19px, 2.2vw, 22px); font-weight: 600;
  letter-spacing: -0.015em; color: var(--text);
  margin: 2em 0 0.5em; scroll-margin-top: 100px;
}
.prose h4 {
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--text); margin: 1.8em 0 0.5em; scroll-margin-top: 100px;
}
.prose h5 {
  font-size: 14.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--text);
  margin: 1.6em 0 0.5em; scroll-margin-top: 100px;
}
.prose h6 {
  font-size: 12.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--faint);
  margin: 1.4em 0 0.5em; scroll-margin-top: 100px;
}
.prose a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: rgba(18, 18, 23, 0.28); text-underline-offset: 3px;
  text-decoration-thickness: 1px; transition: text-decoration-color 0.2s;
}
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 650; color: var(--text); }
.prose em { font-style: italic; }

/* lists — Astro renders bare <ul>/<ol>; markup carries no build.js classes */
.prose ul, .prose ol { margin: 0 0 1.4em; padding-left: 1.3em; }
.prose li { margin: 0 0 0.5em; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose li::marker { color: var(--faint); }

.prose blockquote {
  margin: clamp(38px, 5vh, 58px) 0; padding: 2px 0 2px 1.15em;
  border-left: 2px solid var(--text);
}
.prose blockquote p {
  margin: 0; font-size: clamp(20px, 2.3vw, 24px); line-height: 1.42;
  letter-spacing: -0.012em; color: var(--text); font-weight: 450;
}
.prose hr {
  border: 0; height: 1px; width: 100%; background: var(--line);
  margin: clamp(44px, 6vh, 68px) 0;
}
.prose pre {
  margin: 0 0 1.4em; padding: 18px 20px; overflow-x: auto;
  background: #16161a; color: #eaeaf0; border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; line-height: 1.6;
}
.prose code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em;
  background: var(--panel); padding: 0.12em 0.4em; border-radius: 5px;
  color: var(--text); /* inline code is a highlighted item — stays dark, not body-copy grey */
}
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* figures stay INSIDE the reading column — never break out
   (.post-figure is added by the rehype plugin; bare <figure> as a fallback) */
.prose .post-figure, .prose figure { margin: clamp(36px, 5vh, 60px) 0; }
.prose .post-figure img, .prose figure img {
  width: 100%; height: auto; display: block;
  border-radius: 14px; background: var(--panel);
}
.prose .post-figure figcaption, .prose figure figcaption {
  margin-top: 13px; font-size: 13.5px; line-height: 1.55; /* matches .footer-brand p / .cta-req */
  color: var(--faint); text-align: left;
}
.prose p img { max-width: 100%; height: auto; border-radius: 12px; }

/* ---- image gallery (Gallery.astro) — grid of thumbs + click-to-zoom ---- */
.post-gallery {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px, 1vw, 12px);
  margin: clamp(36px, 5vh, 60px) 0;
}
@media (max-width: 620px) { .post-gallery { grid-template-columns: repeat(2, 1fr); } }
.post-gallery-item {
  display: block; padding: 0; border: 0; margin: 0; cursor: zoom-in;
  aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px;
  background: var(--panel); -webkit-tap-highlight-color: transparent;
}
.post-gallery-item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
.post-gallery-item:hover img { transform: scale(1.045); }
.post-gallery-item:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* lightbox overlay (built by blog.js, appended to <body>) */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(12, 12, 14, 0.94);
  opacity: 0; visibility: hidden; transition: opacity 0.28s ease;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  transform: scale(0.98); transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lightbox.is-open .lightbox-img { transform: scale(1); }
.lightbox-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.10); color: #fff;
  font-size: 22px; line-height: 1; transition: background 0.2s;
}
.lightbox-btn:hover { background: rgba(255, 255, 255, 0.20); }
.lightbox-prev { left: clamp(10px, 3vw, 32px); }
.lightbox-next { right: clamp(10px, 3vw, 32px); }
.lightbox-close {
  position: absolute; top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px);
  width: 42px; height: 42px; transform: none;
}
.lightbox-count {
  position: absolute; bottom: clamp(14px, 3vw, 28px); left: 50%; transform: translateX(-50%);
  font-size: 13px; letter-spacing: 0.03em; color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 620px) { .lightbox-prev, .lightbox-next { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox-img { transition: none; }
}

.article-foot {
  margin: clamp(52px, 8vh, 92px) 0 0;
  padding-top: clamp(28px, 4vh, 44px); border-top: 1px solid var(--line);
}

/* stack on narrow screens: hide the section list, keep the back link */
@media (max-width: 900px) {
  .article { display: block; max-width: 46rem; }
  .article-toc { position: static; margin-bottom: clamp(22px, 4vh, 34px); }
  .article-toc .toc { display: none; }
}

/* ============================================================
   footer — same width + wordmark as the homepage, re-themed light
   ============================================================ */
body.blog .footer { margin-top: clamp(56px, 8vh, 104px); }
body.blog .footer-wordmark span {
  background: linear-gradient(to bottom, rgba(18, 18, 23, 0.12), rgba(18, 18, 23, 0.03));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(10%);
}