/* ============================================================
   Fonts
   ============================================================ */

@font-face {
  font-family: "Euclid Circular";
  src: url("../fonts/EuclidCircularB-Regular-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Circular";
  src: url("../fonts/EuclidCircularB-Medium-WebXL.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Circular";
  src: url("../fonts/EuclidCircularB-Semibold-WebXL.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Flex";
  src: url("../fonts/EuclidFlex-Semibold-WebXL.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Flex Medium";
  src: url("../fonts/EuclidFlex-Medium-WebXL.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Euclid Mono Vanguard";
  src: url("../fonts/EuclidMono-Vanguard-WebXL.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ============================================================
   Tokens
   ============================================================ */

:root {
  --font-sans: "Euclid Circular", sans-serif;
  --font-heading: "Euclid Flex", "Euclid Circular", sans-serif;
  --font-heading-medium: "Euclid Flex Medium", "Euclid Circular", sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;
  --font-euclid-mono: "Euclid Mono Vanguard", ui-monospace, Menlo, monospace;

  --color-accent: #2e5d50;
  --color-ink: #111111;
  --color-body: #3a3a35;
  --color-muted: #66665f;
  --color-faint: #71716b;
  --color-bg-soft: #f7f6f3;
  --color-line: #e4e2dc;
  --color-line-soft: #edece7;
  --color-surface-dark: #111111;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: #ffffff;
  color: var(--color-body);
  font-family: var(--font-sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading), sans-serif; margin: 0; }

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.site-main { flex: 1 0 auto; }

/* ============================================================
   Header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
}

.site-header-inner {
  margin: 0 auto;
  max-width: 1280px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
}

@media (min-width: 1024px) {
  .site-header-inner { padding-left: 48px; padding-right: 48px; }
}

.site-header-logo { display: flex; align-items: center; }

.logo-full { display: none; height: 51px; width: auto; }
.logo-emblem { display: block; height: 48px; width: 48px; }

@media (min-width: 360px) {
  .logo-full { display: block; }
  .logo-emblem { display: none; }
}

.site-header-home-link {
  display: flex;
  align-items: center;
  height: 51px;
  border: 1px solid var(--color-ink);
  padding: 0 28px;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  transition: color 150ms, border-color 150ms;
}
.site-header-home-link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  margin-top: auto;
  background: var(--color-surface-dark);
  color: #ffffff;
  padding: 56px 0 40px;
}

.site-footer-inner { margin: 0 auto; max-width: 1280px; padding: 0 24px; }

@media (min-width: 1024px) {
  .site-footer-inner { padding-left: 48px; padding-right: 48px; }
}

.site-footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.site-footer-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.site-footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.site-footer-nav a {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: color 150ms;
}
.site-footer-nav a:hover { color: #ffffff; }

.site-footer-bottom {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 24px;
}

.site-footer-copyright,
.site-footer-links {
  font-family: var(--font-euclid-mono);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.site-footer-links a { transition: color 150ms; }
.site-footer-links a:hover { color: #ffffff; }

/* ============================================================
   Blog index
   ============================================================ */

.blog-index { margin: 0 auto; max-width: 820px; padding: 64px 24px 96px; }

.blog-index-header { margin-top: 8px; border-top: 2px solid var(--color-ink); padding-top: 18px; }

.blog-index-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}

.blog-index-title-row h1 {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
@media (min-width: 640px) {
  .blog-index-title-row h1 { font-size: 40px; }
}

.locale-switch {
  font-family: var(--font-euclid-mono);
  font-size: 13px;
  color: var(--color-accent);
  text-underline-offset: 2px;
}
.locale-switch:hover { text-decoration: underline; }

.blog-index-intro { margin-top: 18px; max-width: 544px; font-size: 16px; line-height: 1.7; color: var(--color-body); }
.blog-index-empty { margin-top: 44px; font-size: 16px; line-height: 1.7; color: var(--color-body); }
.blog-index-empty a { color: var(--color-accent); text-underline-offset: 2px; }
.blog-index-empty a:hover { text-decoration: underline; }

.post-list {
  margin-top: 44px;
  display: grid;
  grid-template-columns: 1fr;
  border-left: 1px solid var(--color-line);
  border-top: 1px solid var(--color-line);
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--color-line);
  border-right: 1px solid var(--color-line);
  background: #ffffff;
  padding: 28px;
  transition: background-color 150ms;
}
.post-card:hover { background: var(--color-bg-soft); }

.post-card-meta {
  font-family: var(--font-euclid-mono);
  font-size: 13px;
  color: var(--color-faint);
}

.post-card-title { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--color-ink); }

.post-card-excerpt { margin: 0; max-width: 544px; font-size: 16px; line-height: 1.7; color: var(--color-body); }

/* ============================================================
   Article
   ============================================================ */

.article { margin: 0 auto; max-width: 820px; padding: 64px 24px 96px; }

.article-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-back-link {
  font-family: var(--font-euclid-mono);
  font-size: 13px;
  color: var(--color-faint);
  transition: color 150ms;
}
.article-back-link:hover { color: var(--color-accent); }

.article-byline {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.article-byline-left { display: flex; align-items: center; gap: 10px; }

.article-avatar {
  height: 28px;
  width: 28px;
  border-radius: 9999px;
  border: 1px solid var(--color-line);
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

.article-byline-text { font-family: var(--font-euclid-mono); font-size: 13px; color: var(--color-faint); }

.article-kicker {
  margin: 20px 0 0;
  font-family: var(--font-euclid-mono);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.article-title {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-wrap: balance;
}
.article-kicker + .article-title { margin-top: 10px; }
h1.article-title:first-of-type { margin-top: 16px; }
@media (min-width: 640px) {
  .article-title { font-size: 44px; }
}

.article-lede {
  margin-top: 24px;
  max-width: 544px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-body);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  .article-lede { font-size: 19px; }
}

.article-cover {
  margin-top: 40px;
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid var(--color-line);
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

/* ============================================================
   Article body typography (Koenig / imported HTML output)
   ============================================================ */

.post-content { margin-top: 40px; }

.post-content > * + * { margin-top: 20px; }

.post-content h2 {
  margin: 48px auto 16px;
  max-width: 544px;
  scroll-margin-top: 112px;
  font-family: var(--font-heading-medium), sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--color-ink);
}
.post-content h2:first-child { margin-top: 0; }

.post-content h3 {
  margin: 36px auto 12px;
  max-width: 544px;
  scroll-margin-top: 112px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-ink);
}

/* Revealed on hover of the heading it belongs to — a plain hash-link
   rather than a copy-to-clipboard button: clicking it navigates to the
   anchor and puts the shareable URL straight in the address bar. */
.heading-anchor {
  margin-left: 8px;
  vertical-align: middle;
  font-size: 0.75em;
  font-weight: 400;
  color: var(--color-faint);
  text-decoration: none;
  opacity: 0;
  transition: opacity 150ms, color 150ms;
}
.heading-anchor:hover { color: var(--color-accent); }
.post-content h2:hover .heading-anchor,
.post-content h3:hover .heading-anchor { opacity: 1; }
@media print { .heading-anchor { display: none; } }

.post-content p {
  max-width: 544px;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body);
}

.post-content a { color: var(--color-accent); text-underline-offset: 2px; transition: color 150ms; }
.post-content a:hover { text-decoration: underline; }

.post-content ul,
.post-content ol {
  max-width: 544px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-body);
}
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-top: 8px; }
.post-content li::marker { color: var(--color-accent); }

.post-content blockquote {
  max-width: 544px;
  margin-left: auto;
  margin-right: auto;
  border-left: 2px solid var(--color-accent);
  padding: 4px 0 4px 20px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--color-ink);
}

.lede code {
  background: var(--color-bg-soft);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-ink);
}

.post-content :not(pre) > code {
  background: var(--color-bg-soft);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--color-ink);
  border-radius: 0;
}

.post-content pre {
  position: relative;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--color-surface-dark);
  padding: 20px;
}
.post-content pre code {
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.65;
  color: #ffffff;
}

.post-content hr { max-width: 544px; margin: 40px auto; border: none; border-top: 1px solid var(--color-line); }

.post-content figure,
.post-content .kg-card {
  /* Browsers default <figure> to margin: 1em 40px — additional to width:
     100%, not part of it, so those 40px push the figure past its
     container's right edge instead of just eating into its own padding.
     Barely visible on desktop (plenty of surrounding whitespace to absorb
     it), but on mobile .post-content already spans the full available
     width, so the extra margin overflows the viewport — exactly what made
     images and code blocks scrollable off-screen on a phone. */
  margin: 0;
  width: 100%;
}

.post-content figcaption {
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-faint);
}

.post-content .table-wrap,
.post-content table { width: 100%; }

.post-content .table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--color-line); }

.post-content table { border-collapse: collapse; text-align: left; font-size: 15px; }
.post-content th {
  border-bottom: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-faint);
}
.post-content td {
  border-bottom: 1px solid var(--color-line-soft);
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.65;
  color: var(--color-body);
}

.post-content .pullquote,
.pullquote {
  max-width: 100%;
  margin-top: 32px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  padding: 24px 28px;
}
.pullquote-label {
  font-family: var(--font-euclid-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-faint);
}
.pullquote-body { margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 1.65; color: var(--color-ink); }

/* ============================================================
   Baseline styling for native Koenig cards we don't otherwise use
   (the migration only produces headings/paragraphs/lists/blockquotes/
   code/tables/images and the custom Pullquote HTML block, but the
   editor could add a callout or an alt-style quote later).
   ============================================================ */

.post-content .kg-callout-card {
  display: flex;
  gap: 12px;
  max-width: 544px;
  margin: 24px auto 0;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  padding: 16px 20px;
}
.post-content .kg-callout-emoji { flex: none; font-size: 1.2em; line-height: 1.65; }
.post-content .kg-callout-text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--color-ink); }
.post-content .kg-callout-card-grey { background: var(--color-bg-soft); }
.post-content .kg-callout-card-white { background: #ffffff; }
.post-content .kg-callout-card-accent { background: rgba(46, 93, 80, 0.1); }

.post-content .kg-width-wide { max-width: 100%; }
.post-content .kg-width-full { max-width: 100vw; }

.post-content .kg-gallery-container { display: flex; flex-direction: column; max-width: 100%; }
.post-content .kg-gallery-row { display: flex; width: 100%; }
.post-content .kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; }

.post-content .kg-bookmark-card { width: 100%; }
.post-content .kg-bookmark-container {
  display: flex;
  min-height: 148px;
  border: 1px solid var(--color-line);
  color: inherit;
}
.post-content .kg-bookmark-content { flex: 1 1 auto; padding: 20px; order: 1; }
.post-content .kg-bookmark-title { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.post-content .kg-bookmark-description {
  margin-top: 6px;
  max-height: 3.4em;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.65;
  color: var(--color-faint);
}
.post-content .kg-bookmark-metadata { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-euclid-mono); font-size: 12px; color: var(--color-faint); }
.post-content .kg-bookmark-author,
.post-content .kg-bookmark-publisher { color: var(--color-faint); }
.post-content .kg-bookmark-icon { height: 16px; width: 16px; }
.post-content .kg-bookmark-thumbnail { flex: 0 0 auto; width: 220px; order: 2; }
.post-content .kg-bookmark-thumbnail img { height: 100%; width: 100%; object-fit: cover; }

.post-content .kg-blockquote-alt {
  border: none;
  padding-left: 0;
  font-family: var(--font-heading), sans-serif;
  font-style: normal;
}

/* ============================================================
   Table of contents (built by toc.js)
   ============================================================ */

.toc-box {
  container-type: inline-size;
  margin: 40px auto 0;
  max-width: 544px;
  scroll-margin-top: 152px;
  border: 1px solid var(--color-line);
  background: var(--color-bg-soft);
  padding: 24px 28px;
}
.toc-label { font-family: var(--font-euclid-mono); font-size: 13px; font-weight: 500; color: var(--color-faint); }
.toc-list { margin-top: 12px; column-width: 200px; column-gap: 28px; }
.toc-entry { display: block; break-inside: avoid; padding: 4px 8px; }
.toc-entry.is-h3 { padding-left: 20px; }
.toc-entry a { display: flex; gap: 8px; align-items: baseline; font-size: 15px; line-height: 1.65; color: var(--color-body); }
.toc-num { font-family: var(--font-euclid-mono); font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--color-faint); }
.toc-entry.is-active { background: rgba(46, 93, 80, 0.1); }
.toc-entry.is-active a,
.toc-entry.is-active .toc-num { color: var(--color-accent); font-weight: 500; }
.toc-entry.is-flash { background: rgba(46, 93, 80, 0.3); }

.current-section-bar {
  position: sticky;
  top: 96px;
  z-index: 40;
  display: none;
  border-bottom: 1px solid var(--color-line);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
}
.current-section-bar.is-visible { display: block; }
.current-section-bar a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  text-decoration: none;
}
.current-section-arrow {
  flex-shrink: 0;
  color: var(--color-faint);
  transition: color 150ms;
}
.current-section-num {
  flex-shrink: 0;
  font-family: var(--font-euclid-mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-faint);
  transition: color 150ms;
}
.current-section-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  transition: color 150ms;
}
.current-section-bar a:hover .current-section-arrow,
.current-section-bar a:hover .current-section-num,
.current-section-bar a:hover .current-section-text { color: var(--color-accent); }

/* ============================================================
   Reading progress / back to top
   ============================================================ */

.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  height: 3px;
  width: 0;
  background: var(--color-accent);
  transition: width 100ms linear;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  height: 44px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-ink);
  background: #ffffff;
  color: var(--color-ink);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* ============================================================
   Code copy button
   ============================================================ */

.code-copy-btn {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--color-surface-dark);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  opacity: 0;
  transition: opacity 150ms;
}
.post-content pre:hover .code-copy-btn,
.code-copy-btn:focus-visible { opacity: 1; }

/* ============================================================
   Mastodon share
   ============================================================ */

.mastodon-share {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 9999px;
  background: #6364ff;
  color: #ffffff;
  font-size: 15px;
  padding: 10px 20px;
  transition: opacity 150ms;
}
.mastodon-share:hover { opacity: 0.9; }
.mastodon-share-compact { gap: 6px; padding: 7px 14px; font-size: 13px; }
.mastodon-share-standalone { margin: 32px auto 0; display: flex; width: fit-content; }

/* ============================================================
   Discuss box
   ============================================================ */

.discuss-box { max-width: 544px; margin: 24px auto 0; border: 1px solid var(--color-line); background: var(--color-bg-soft); padding: 24px 28px; }
.discuss-box-label { font-family: var(--font-euclid-mono); font-size: 13px; font-weight: 500; color: var(--color-faint); }
.discuss-box-text { margin-top: 8px; font-size: 15px; line-height: 1.65; }
.discuss-box-text a { color: var(--color-accent); text-underline-offset: 2px; }
.discuss-box-text a:hover { text-decoration: underline; }

/* ============================================================
   Zoomable image lightbox (built by zoomable-image.js)
   ============================================================ */

.post-content figure img,
.post-content > img { cursor: zoom-in; border: 1px solid var(--color-line); height: auto; width: 100%; }

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.95);
  padding: 24px;
}
.image-lightbox.is-open { display: flex; }
.image-lightbox img { max-height: 90vh; max-width: 90vw; object-fit: contain; cursor: zoom-out; }
.image-lightbox-close {
  position: absolute;
  right: 24px;
  top: 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: var(--color-surface-dark);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: #ffffff;
  cursor: pointer;
}

/* ============================================================
   Print
   ============================================================ */

@media print {
  .site-header,
  .reading-progress,
  .back-to-top,
  .mastodon-share,
  .current-section-bar,
  .article-top-nav .locale-switch,
  .code-copy-btn { display: none !important; }
  .post-content pre { border: 1px solid var(--color-line); background: #ffffff; }
  .post-content pre code { color: var(--color-ink); }
  .toc-box { break-inside: avoid; }
}