/* seal — PixelGlass overrides on top of the compiled Tailwind sheet (screen.css). */

/* Fonts picked for this theme (same pairing as the original fonts.css). */
@import url("https://fonts.bunny.net/css?family=nunito:400,600,700|rubik:400,500,700|jetbrains-mono:400,500&display=swap");

:root {
  --pg-font-heading: "Nunito", ui-sans-serif, system-ui, sans-serif;
  --pg-font-body: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --gh-font-heading: var(--pg-font-heading);
  --gh-font-body: var(--pg-font-body);
  /* The publisher's accent (Settings › General) drives every accent surface. */
  --ghost-accent-color: var(--pixel-accent);
}

/* The typography plugin's quote marks live in @layer utilities, above the
   theme's own base-layer resets; this sheet is unlayered, so it wins. */
.prose-tailwind :not(pre) > code::before,
.prose-tailwind :not(pre) > code::after,
.prose-tailwind blockquote p:first-of-type::before,
.prose-tailwind blockquote p:last-of-type::after {
  content: none;
}
.prose-tailwind pre {
  border: 1px solid var(--color-line);
}
.prose-tailwind pre code {
  background: transparent;
  padding: 0;
}

/* Post body images from the editor. */
.prose-tailwind figure.post-media {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}
.prose-tailwind figure.post-media img,
.prose-tailwind figure.post-media video {
  width: 100%;
  height: auto;
  border-radius: 0;
}
.prose-tailwind figure.post-media figcaption {
  margin-top: 0.75em;
  color: var(--color-muted);
}
.prose-tailwind figure.post-media.post-media--wide {
  position: relative;
  width: min(80vw, 64rem);
  min-width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.prose-tailwind figure.post-media.post-media--full {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
.prose-tailwind figure[data-video] iframe {
  border-radius: 0;
}

/* Callouts — keep the platform's tints, square the corners. */
.prose-tailwind aside[data-callout] {
  border-radius: 0.25rem;
  margin-top: 2em;
  margin-bottom: 2em;
}
html.dark .prose-tailwind aside[data-callout] {
  --callout-bg: #161616;
  --callout-ink: #ececec;
}

/* The readers' conversation — the platform's frame, given the reading column. */
.pixel-comments-frame {
  display: block;
  width: 100%;
  margin-top: 1.25rem;
  border: 0;
  /* Match the frame element to the page so the browser never paints an
     opaque backdrop behind a frame whose scheme differs from its host. */
  color-scheme: light;
}
html.dark .pixel-comments-frame {
  color-scheme: dark;
}

/* Search screen. */
.search-input {
  width: 100%;
  border: 1px solid var(--color-line);
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  outline: none;
}
.search-input:focus {
  border-color: var(--color-ink);
}

/* Language switcher + footer mono line share the faint caps look. */
.lang-switch a[aria-current="true"] {
  color: var(--color-ink);
}

/* Author bio arrives as HTML — keep its paragraphs tight. */
.author-bio p + p {
  margin-top: 0.5em;
}
.author-bio a {
  text-decoration: underline;
  text-underline-offset: 2px;
}