/* Blog-only styles. Everything else (colors, type, header, footer) comes from
   the main site's /styles.css so the blog always matches oddbits.ai. */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Post list: date in mono, title beside it, excerpt under the title. */
.post-list { margin-top: 40px; padding-left: 0; list-style: none; }
.post-list .post-item { padding-left: 0; }
.post-list .post-item::before { display: none; }
.post-list .post-item + .post-item { margin-top: 28px; }
.post-link {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px 20px;
  text-decoration: none;
}
.post-date { font: 13px/1.9 var(--mono); color: var(--muted); }
.post-title { font-weight: 600; font-size: 18px; line-height: 1.4; }
.post-link:hover .post-title { text-decoration: underline; text-underline-offset: 3px; }
.post-excerpt { margin: 4px 0 0 130px; color: var(--muted); }
@media (max-width: 520px) {
  .post-link { grid-template-columns: 1fr; gap: 0; }
  .post-excerpt { margin-left: 0; }
}

.post-meta { font: 13px/1.6 var(--mono); color: var(--muted); margin-bottom: 12px; }
.post-meta a { text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-meta .sep { margin: 0 8px; opacity: 0.6; }

/* About the author, at the end of each post. */
.author-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.author-box-avatar { flex: none; width: 48px; height: 48px; object-fit: cover; }
.author-box-name { font: 600 13px/1.6 var(--mono); }
.author-box-name a { text-decoration: none; }
.author-box-name a:hover { text-decoration: underline; }
.author-box-bio { margin-top: 2px; color: var(--muted); }

/* Tag and author pages. */
.archive-meta { margin: 16px 0 0; }
.author-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.author-head h1 { margin: 0; }
.author-avatar { flex: none; width: 64px; height: 64px; object-fit: cover; }

.feature-image { margin: 32px 0; }
.feature-image img { display: block; width: 100%; height: auto; }
figcaption { font: 13px/1.6 var(--mono); color: var(--muted); margin-top: 8px; text-align: center; }
figcaption a { color: inherit; }

.post-back { margin-top: 40px; font: 13px/1.6 var(--mono); }
.post-back a { text-decoration: none; color: var(--muted); }
.post-back a:hover { text-decoration: underline; color: var(--ink); }

/* Pagination (partials/pagination.hbs): newer, page count, older. */
.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  margin-top: 56px;
  font: 13px/1.6 var(--mono);
  color: var(--muted);
}
.pagination a { color: var(--ink); text-decoration: none; }
.pagination a:hover { text-decoration: underline; }
.pagination .older-posts { justify-self: end; }

/* Previous and next post, under each post. */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
}
.post-nav:not(:has(a)) { display: none; }
.post-nav-link { display: block; text-decoration: none; }
.post-nav-next { grid-column: 2; text-align: right; }
.post-nav-label { display: block; font: 13px/1.6 var(--mono); color: var(--muted); }
.post-nav-title { display: block; margin-top: 2px; font-weight: 600; line-height: 1.4; }
.post-nav-link:hover .post-nav-title { text-decoration: underline; }
@media (max-width: 520px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav-next { grid-column: auto; text-align: left; }
}

/* Ghost comments (an iframe from {{comments}}), set off by the same thin rule. */
.post-comments {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.post-comments + .subscribe { margin-top: 56px; }
/* The comments page inside the iframe is light-only; matching its color scheme
   keeps the iframe transparent instead of a white box in dark mode. */
.post-comments iframe { color-scheme: light; }

/* Subscribe box (partials/subscribe.hbs): a thin rule, a mono label, one field. */
.subscribe {
  margin-top: 72px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.subscribe h2 { margin-bottom: 8px; }
.subscribe-form { margin-top: 16px; }
.subscribe-row { display: flex; }
.subscribe-row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  font: 14px/1 var(--mono);
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-right: 0;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.subscribe-row input::placeholder { color: var(--muted); opacity: 1; }
.subscribe-row input:focus { border-color: var(--ink); }
.subscribe-row button {
  flex: none;
  height: 44px;
  padding: 0 18px;
  font: 600 14px/1 var(--mono);
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
}
.subscribe-row button:hover { opacity: 0.85; }
.subscribe-row button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.subscribe-sending { display: none; }
.subscribe-form.loading .subscribe-label { display: none; }
.subscribe-form.loading .subscribe-sending { display: inline; }
.subscribe-form.loading button { opacity: 0.7; cursor: progress; }
.subscribe-note { display: none; margin-top: 12px; font: 13px/1.6 var(--mono); }
.subscribe-note::before { content: "// "; color: var(--muted); }
.subscribe-form.success .subscribe-row { display: none; }
.subscribe-form.success .subscribe-success { display: block; margin-top: 0; }
.subscribe-form.error .subscribe-error { display: block; }
.subscribe-error:empty::after { content: "That didn't work. Please try again."; }
.subscribe-alt { margin-top: 16px; font: 13px/1.6 var(--mono); color: var(--muted); }
.subscribe-alt a { color: var(--ink); }

/* Post body. The site's h2 is a small "// label"; in posts, headings are real headings. */
.gh-content { margin-top: 32px; font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.gh-content > * + * { margin-top: 20px; }
.gh-content > h2, .gh-content > h3, .gh-content > h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink);
  margin-top: 44px;
}
.gh-content > h2 { font-size: 24px; line-height: 1.3; }
.gh-content > h3 { font-size: 19px; line-height: 1.35; }
.gh-content > h4 { font-size: 16px; line-height: 1.4; }
.gh-content > h2 + *, .gh-content > h3 + *, .gh-content > h4 + * { margin-top: 12px; }
.gh-content h2::before { content: none; }
.gh-content strong { font-weight: 600; }
.gh-content li + li { margin-top: 8px; }
.gh-content li > ul, .gh-content li > ol { margin-top: 8px; }
.gh-content ol { padding-left: 1.4em; list-style: decimal; }
.gh-content ol li { padding-left: 4px; }
.gh-content ol li::before { display: none; }
.gh-content blockquote:not(.kg-blockquote-alt) {
  border-left: 3px solid var(--ink);
  padding-left: 18px;
  font-style: italic;
}
.gh-content .kg-blockquote-alt {
  padding: 8px 1em;
  font: 500 20px/1.5 var(--mono);
  letter-spacing: -0.01em;
  text-align: center;
}
.gh-content code {
  font: 0.9em var(--mono);
  background: var(--rule);
  padding: 1px 5px;
}
.gh-content pre {
  font: 14px/1.6 var(--mono);
  background: var(--rule);
  padding: 16px 18px;
  overflow-x: auto;
  tab-size: 2;
}
.gh-content pre code { font-size: inherit; background: none; padding: 0; }
.gh-content img, .gh-content video, .gh-content iframe { max-width: 100%; }
.gh-content img { height: auto; }
.gh-content hr { border: 0; border-top: 1px solid var(--rule); margin: 44px 0; }
.gh-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gh-content th, .gh-content td {
  padding: 8px 12px 8px 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.gh-content th { font: 600 13px/1.4 var(--mono); color: var(--muted); }

/* Ghost editor cards. */
.gh-content > :first-child { margin-top: 0; }
.gh-content > .kg-card, .gh-content > .kg-card + * { margin-top: 32px; }
.kg-image-card img { display: block; margin: 0 auto; }
.kg-width-wide {
  position: relative;
  width: min(880px, calc(100vw - 40px));
  left: 50%;
  transform: translateX(-50%);
}
.kg-width-full {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
}
.kg-width-wide img, .kg-width-full img { width: 100%; }
.kg-width-full figcaption { padding: 0 20px; }

/* Ghost's cards.min.css loads after this file, so card overrides below are
   scoped to .gh-content to win. */

/* Galleries: the inline script in partials/gallery.hbs sizes each image by its
   aspect ratio; this is the fallback. */
.gh-content .kg-gallery-image { flex: 1 1 0; }
.gh-content .kg-gallery-image img { object-fit: cover; }

/* Accent: Ghost's accent is #111418 (the site's ink). In dark mode that would
   vanish into the page, so accent blocks and buttons use the rule gray instead. */
@media (prefers-color-scheme: dark) {
  .blog { --ghost-accent-color: var(--rule); }
}
.gh-content .kg-file-card-icon svg,
.gh-content .kg-cta-link-accent .kg-cta-text a,
.gh-content .kg-cta-link-accent .kg-cta-sponsor-label a { color: var(--ink); }

/* Square corners and the site's colors instead of white boxes. */
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-file-card a.kg-file-card-container,
.gh-content .kg-product-card-container,
.gh-content .kg-audio-card,
.gh-content .kg-nft-card a.kg-nft-card-container,
.gh-content .kg-callout-card,
.gh-content .kg-toggle-card,
.gh-content .kg-cta-card,
.gh-content .kg-cta-image-container img,
.gh-content .kg-signup-card,
.gh-content .kg-signup-card-fields,
.gh-content .kg-header-card,
.gh-content .kg-bookmark-thumbnail img { border-radius: 0; }
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover,
.gh-content .kg-file-card a.kg-file-card-container,
.gh-content .kg-product-card-container,
.gh-content .kg-audio-card,
.gh-content .kg-nft-card a.kg-nft-card-container {
  color: var(--ink);
  background: transparent;
}
.gh-content .kg-bookmark-card a.kg-bookmark-container,
.gh-content .kg-file-card a.kg-file-card-container { border: 1px solid var(--rule); }
.gh-content .kg-bookmark-card a.kg-bookmark-container:hover,
.gh-content .kg-file-card a.kg-file-card-container:hover { border-color: var(--muted); }
.gh-content .kg-product-card-container,
.gh-content .kg-audio-card,
.gh-content .kg-toggle-card,
.gh-content .kg-callout-card-white,
.gh-content .kg-cta-bg-white { box-shadow: inset 0 0 0 1px var(--rule); }
.gh-content .kg-nft-card a.kg-nft-card-container { box-shadow: none; border: 1px solid var(--rule); }
.gh-content .kg-audio-thumbnail.placeholder svg { fill: var(--paper); }

/* Bookmarks: link previews. */
.gh-content .kg-bookmark-content { padding: 16px 18px; font-family: var(--sans); }
.gh-content .kg-bookmark-title { font-size: 15px; line-height: 1.4; }
.gh-content .kg-bookmark-description { color: var(--muted); opacity: 1; }
.gh-content .kg-bookmark-metadata { margin-top: 14px; font: 12px/1.6 var(--mono); color: var(--muted); }
.gh-content .kg-bookmark-metadata > *:not(img) { opacity: 1; }
@media (max-width: 520px) {
  .gh-content .kg-bookmark-card a.kg-bookmark-container { flex-direction: column; }
  .gh-content .kg-bookmark-thumbnail { order: -1; width: 100%; min-height: 160px; }
}

/* Buttons in cards: square, mono. */
.gh-content .kg-button-card a.kg-btn,
.gh-content a.kg-cta-button,
.gh-content .kg-header-card a.kg-header-card-button,
.gh-content .kg-header-card.kg-v2 .kg-header-card-button,
.gh-content .kg-signup-card-button,
.gh-content .kg-signup-card-input,
.gh-content .kg-product-card a.kg-product-card-button {
  border-radius: 0;
  font-family: var(--mono);
}

/* Header cards with a light background keep dark text in dark mode. */
.gh-content .kg-header-card.kg-style-light,
.gh-content .kg-header-card.kg-style-light h2,
.gh-content .kg-header-card.kg-style-light h3 { color: #151515; }

/* Toggles and callouts. */
.gh-content .kg-toggle-card h4.kg-toggle-heading-text { font-family: var(--mono); letter-spacing: -0.01em; }
.gh-content .kg-toggle-heading svg { color: var(--muted); }
.gh-content .kg-callout-card { line-height: 1.6; }

/* Embeds: videos fill the column at 16:9 without extra scripts. */
.gh-content .kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gh-content .kg-embed-card iframe[src*="youtube.com"],
.gh-content .kg-embed-card iframe[src*="youtube-nocookie.com"],
.gh-content .kg-embed-card iframe[src*="player.vimeo.com"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }