/* ═══════════════════════════════════════════════
   Requisite Variety — Global Styles
   ═══════════════════════════════════════════════ */

/* ── Design Tokens (CSS Custom Properties) ── */
:root {
  --color-bg:          #f9f9f9;
  --color-surface:     #ffffff;
  --color-surface-alt: #f0f0f0;
  --color-primary:     #EB0A1E;
  --color-primary-light: #ff2d3f;
  --color-text:        #333333;
  --color-text-muted:  #555555;
  --color-border:      #e0e0e0;
  --color-glow:        rgba(235, 10, 30, 0.10);
  --color-circuit:     rgba(0, 0, 0, 0.04);

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --font-logo:  'Space Grotesk', var(--font-sans);

  --radius:     10px;
  --max-width:  1120px;
}

/* ── Circuit Background ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url('assets/background.png') center center / cover no-repeat fixed;
  opacity: 0.4;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--color-circuit) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── Navbar Brand ── */
#quarto-header .navbar-brand-container {
  flex: 0 0 auto;
  max-width: none;
}

#quarto-header .navbar-brand {
  min-width: 0;
  white-space: normal;
}

#quarto-header .navbar-title {
  display: inline-block;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

@media (max-width: 320px) {
  #quarto-header .navbar-brand-container {
    flex-shrink: 1;
  }

  #quarto-header .navbar-title {
    white-space: normal;
  }
}

/* ── Quarto Title Meta ── */
.quarto-title-meta-heading {
  color: #888889;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.quarto-title-meta {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e8e8e8;
}

/* Subtitle styling */
.lead {
  font-size: 1.1rem;
  color: #888889;
  font-weight: 400;
}

/* ── Bottom line up front (ai-posts) ──
   Sits above the hero image. Quarto renders `description` inside the title-block
   furniture between the tags and the byline, so it reads as metadata; this is body
   content and reads as the start of the article. */
.post-bluf {
  border-left: 3px solid var(--color-primary);
  padding-left: 1.25rem;
  margin: 1rem 0 2.25rem 0;
}

.post-bluf > p:first-child {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 1rem;
}

.post-bluf ul {
  margin: 0;
  padding-left: 1.1rem;
  list-style: none;
}

.post-bluf li {
  position: relative;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.post-bluf li:last-child {
  margin-bottom: 0;
}

.post-bluf li::before {
  content: "→";
  position: absolute;
  left: -1.1rem;
  color: var(--color-primary);
}

/* Keep notebook figures inside the reading column on narrow screens. */
.cell-output-display img {
  max-width: 100%;
  height: auto;
}

/* ── Hero image attribution ── */
.hero-attribution {
  display: block;
  text-align: left;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin: -0.5rem 0 1.5rem 0;
}

/* ── Author-views disclaimer (auto-injected on posts/ai-posts) ── */
hr.disclaimer-rule {
  margin-top: 3rem;
  border: 0;
  border-top: 1px solid var(--color-border);
}

p.disclaimer {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 1rem;
}

/* Benchmarks */
.benchmark-list section {
  margin-bottom: 2rem;
}

.benchmark-list h2 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: 0;
}

.benchmark-list p {
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

.benchmark-list table {
  margin-bottom: 0;
}

.benchmark-list .table-responsive {
  margin-bottom: 0.5rem;
}

.benchmark-updates {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.benchmark-updates summary {
  cursor: pointer;
  padding: 0.5rem 0;
}

.benchmark-updates p,
.benchmark-updates ul {
  margin-bottom: 0.5rem;
}

/* ═══════════════════════════════════════════════
   Home Page — Content Grid
   ═══════════════════════════════════════════════ */

.content-grid-section {
  position: relative;
  z-index: 1;
  padding: 8px 24px 80px;
}

/* Kill Quarto's default top padding above page content on the home page only.
   .content-grid-section is the home page's wrapper (defined inline in
   index.qmd) and appears nowhere else. Using :has() scopes the override
   to this page so first-level pages (Blog, Papers, About, etc.) keep
   their title margin. */
#quarto-content:has(.content-grid-section) {
  padding-top: 0;
}

.content-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

.content-grid > .artagent-callout,
.content-grid > .ai-post-section,
.content-grid > .benchmark-section,
.content-grid > .callout-card {
  grid-column: auto !important;
}

.content-grid > .posts-section {
  grid-column: span 2 !important;
}

.content-grid > .papers-section {
  grid-column: span 2 !important;
}

.content-grid > .reading-section {
  grid-column: 1 / -1 !important;
}

/* ══ Section Frames ══
   Five sections share one frame, which is what keeps the card grids, the art
   panel and the nav rows on the same lines across a row: 1px border, 24px of
   side and bottom padding, and 348px of room for the label plus the content
   above the nav row. The two families spend that 348px differently — a
   container of cards is transparent, so its labels can sit in a notch on the
   border and the cards start 28px in; a standalone panel is itself the white
   card, where a notch reads as floating, so its label and date sit inside the
   panel and the content slot gives up the difference. */
.posts-section,
.papers-section,
.reading-section,
.artagent-callout,
.ai-post-section,
.benchmark-section {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px 24px;
  /* The content slot is a fixed 320px, so a section that stretched to its grid
     row would grow slack inside itself instead and the nav rows would drift
     apart again. */
  align-self: start;
}

.posts-section,
.papers-section,
.reading-section {
  background: transparent;
}

.artagent-callout,
.ai-post-section,
.benchmark-section {
  background: var(--color-surface);
  /* 48 + 300 = the 28 + 320 the container sections use, so the nav rows still
     land on the same line across a grid row. */
  padding-top: 48px;
}

/* Labels are out of flow in both families, so the content slot below them is
   what sets the section height. On a transparent frame the label notches into
   the top border and paints the page colour behind it. */
.posts-label,
.papers-label,
.reading-label,
.artagent-label,
.ai-label,
.benchmark-label {
  position: absolute;
  top: -10px;
  left: 24px;
  padding: 0 12px;
  background: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

/* A standalone panel's label drops inside the frame instead, 16px below the
   border, with the date mirrored on the right. Neither gets a pill: there is no
   border to interrupt here, so a fill would only show as a seam, and dropping
   the 12px side padding lines both up with the 24px content edge. */
.artagent-label,
.ai-label,
.benchmark-label,
.artagent-date,
.ai-post-date {
  position: absolute;
  top: 16px;
  padding: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.artagent-date,
.ai-post-date {
  right: 24px;
  color: var(--color-text-muted);
}

/* ── Posts Section (Row 1, spans 2 cols) ── */
.posts-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  flex: 1;
}

.posts-nav {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* ── (Featured Post layout removed; replaced by .posts-section) ── */

/* ── Art Agent Callout ── */
/* Frame, fill, label and date come from the shared section rules above. Note
   there is no overflow:hidden here: it would clip the notch label where it
   crosses the border. */
.artagent-viewport {
  /* Two measured sources of dead height under the art panel: Quarto gives
     iframes a 1em bottom margin (17.64px here), and as an inline replaced
     element it also sat on the text baseline and picked up the line box's
     leading. Both have to go or the footer drops below the Posts nav row. */
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  /* 20px shorter than a card, which is what the label and date cost when they
     moved inside the panel. */
  height: 300px;
  border-radius: 6px;
  background: #0b0f1c;
}

.artagent-iframe {
  position: absolute;
  width: 1080px;
  height: 1920px;
  margin: 0;
  border: none;
  transform-origin: top left;
  pointer-events: none;
}

.artagent-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

/* Stretch, not center: the critique button is a flex box around a 14px icon,
   so centering let it size to the icon while its text siblings sized to the
   inherited 1.8 line box. It came out ~8px shorter than the nav arrows. */
.artagent-footer-left {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.artagent-nav {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.artagent-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.artagent-btn:hover:not(:disabled) {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.artagent-btn-disabled {
  color: var(--color-border);
  cursor: default;
}

.artagent-info-btn {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px 10px;
  transition: color 0.2s, border-color 0.2s;
}

.artagent-critique-btn {
  display: flex;
  align-items: center;
  padding: 4px 8px;
}

.artagent-critique-btn svg {
  display: block;
}

.artagent-info-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.artagent-award-btn {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  text-decoration: none;
}

.artagent-award-btn svg {
  display: block;
}

.artagent-popup {
  display: none;
  position: absolute;
  left: 24px;
  right: 24px;
  /* Clear of the footer: 24px padding + a 32.66px button row. */
  bottom: 60px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  z-index: 10;
}

.artagent-popup.visible {
  display: block;
}

.artagent-popup p {
  margin: 0;
}

.critique-loading {
  opacity: 0.5;
  font-style: italic;
}

.critique-meta {
  margin: 0 0 6px 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  opacity: 0.5;
}

.critique-text {
  margin: 0;
}

/* ── AI Post Section ── */
/* Frame, fill, label and date come from the shared section rules above; the
   label overlaps the card link, so it must not swallow clicks. */
.ai-label {
  pointer-events: none;
}

.ai-post-nav {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

.benchmark-art {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  object-fit: contain;
}

.benchmark-update {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.benchmark-credit {
  margin: 10px 0 0;
  font-size: 0.72rem;
  line-height: 28px;
  color: var(--color-text-muted);
}

.callout-card--benchmark .callout-headline {
  padding-right: 0;
}

/* ── Callout Card (shared pattern) ── */
.callout-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.callout-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow), 0 4px 16px rgba(0,0,0,0.05);
  transform: translateY(-2px);
}

/* The standalone panel's single card is its content slot: 20px shorter than a
   card in a container section, since the label and date sit above it rather
   than in the border. */
.callout-card--ai,
.callout-card--benchmark {
  border: none;
  padding: 0;
  height: 300px;
}

/* Cards have a fixed height, so a long title would push the art and excerpt
   out of the bottom. Four lines still leave room for both. */
.callout-headline {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 12px;
  padding-right: 86px;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  flex-shrink: 0;
}

.callout-meta {
  position: absolute;
  top: 18px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin: 0;
}

.callout-author {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.35;
  margin: -6px 88px 12px 0;
}

.callout-art-wrapper {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
  min-height: 140px;
}

.callout-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  min-height: 140px;
}

.callout-art[src*="storybook-futures-public-installation-speculative-narrative-exploration/sf.jpg"],
.quarto-listing img.thumbnail-image[src*="storybook-futures-public-installation-speculative-narrative-exploration/sf.jpg"] {
  object-position: center top;
}

.callout-art[src*="pbs.twimg.com/profile_images/"],
.quarto-listing img.thumbnail-image[src*="pbs.twimg.com/profile_images/"] {
  object-fit: contain;
}

.callout-art[src*="large-language-models-as-a-cognitive-virus/figure-1.png"],
.quarto-listing img.thumbnail-image[src*="large-language-models-as-a-cognitive-virus/figure-1.png"],
.callout-art[src*="fully-autonomous-ai-agents-should-not-be-developed/table-1.png"],
.quarto-listing img.thumbnail-image[src*="fully-autonomous-ai-agents-should-not-be-developed/table-1.png"],
.reading-quote-image[src*="fully-autonomous-ai-agents-should-not-be-developed/table-1.png"],
.callout-art[src*="humanist-ai-in-practice-a-public-consultation-on-our-code-of-conduct/image.png"],
.quarto-listing img.thumbnail-image[src*="humanist-ai-in-practice-a-public-consultation-on-our-code-of-conduct/image.png"],
.reading-quote-image[src*="humanist-ai-in-practice-a-public-consultation-on-our-code-of-conduct/image.png"],
.callout-art[src*="alexzhang13.github.io/assets/img/preview/harnesses.png"],
.quarto-listing img.thumbnail-image[src*="alexzhang13.github.io/assets/img/preview/harnesses.png"],
.reading-quote-image[src*="alexzhang13.github.io/assets/img/preview/harnesses.png"] {
  object-fit: contain;
  background-color: #fff;
}

.callout-art-placeholder {
  width: 100%;
  min-height: 140px;
  background: var(--color-surface-alt);
  border-radius: 6px;
}

.callout-overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 16px;
  margin: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.callout-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 140px;
}

.callout-placeholder p {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* ── Papers Section (Row 2, spans 2 cols) ── */
.papers-section {
  grid-column: span 2;
}

.papers-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.papers-nav {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

.callout-card--in-section {
  border: 1px solid var(--color-border);
  height: 320px;
  overflow: hidden;
}

/* ── Iotas Section (Row 3, full width) ── */
.reading-section {
  grid-column: 1 / -1;
}

.reading-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.reading-nav {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: flex-end;
}

/* ── Daily joke (Row 4) ──
   One line under the grid. A different model writes it each night; the
   homepage fetches it from GitHub Pages at load and keeps the row hidden
   until that succeeds. Muted and italic with no frame: meant to be found,
   not noticed. The byline reuses the card-date treatment. */
.content-grid > .daily-joke {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  text-align: center;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.daily-joke-by {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  opacity: 0.7;
  margin-left: 0.6em;
  white-space: nowrap;
}

.daily-joke-line {
  display: block;
}

.daily-joke-hof-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-style: normal;
  opacity: 0.55;
  text-decoration: none;
}

.daily-joke-hof-link:hover,
.daily-joke-hof-link:focus-visible {
  color: var(--color-text-muted);
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Joke Hall of Fame ── */
.joke-hof-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.joke-hof-entry {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border);
}

.joke-hof-text {
  margin: 0;
  color: var(--color-text);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.55;
}

.joke-hof-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.65rem 0 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
}

.joke-hof-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}

.joke-hof-meta a:hover,
.joke-hof-meta a:focus-visible {
  color: var(--color-primary);
}

@media (min-width: 700px) {
  .joke-hof-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: start;
  }

  .joke-hof-meta {
    justify-content: flex-end;
    margin-top: 0;
    white-space: nowrap;
  }
}

/* ── AI Artist Hall of Fame ── */
body.art-hof-page #title-block-header {
  grid-column: page-start / page-end;
}

.art-hof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 0;
  padding: 0;
  list-style: none;
}

.art-hof-entry {
  min-width: 0;
}

.art-hof-card {
  display: block;
  overflow: hidden;
  height: 100%;
  color: inherit;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.art-hof-card:hover,
.art-hof-card:focus-visible {
  color: inherit;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-glow), 0 4px 16px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.art-hof-poster {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}

.art-hof-card-body {
  display: block;
  padding: 0.85rem 1rem 1rem;
}

.art-hof-title {
  display: block;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.art-hof-date {
  display: block;
  margin-top: 0.45rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  line-height: 1.3;
}

@media (min-width: 640px) {
  .art-hof-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .art-hof-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ── Iota entry page ── */

/* Hide Quarto's auto-rendered AUTHOR / PUBLISHED meta block on the
   outer page — on Iota entries the curator's blurb is the body and
   we don't want it to look attributed to the cited piece's author. */
body.reading-entry .quarto-title-meta,
body.reading-entry .quarto-title-meta-author,
body.reading-entry .quarto-title-meta-heading {
  display: none !important;
}

/* The curator's blurb sits in the document body as a plain paragraph
   (first-order black body text). We are quoting the cited piece — not
   ourselves — so no blockquote styling on the blurb. */
body.reading-entry > main > p:first-of-type,
body.reading-entry #quarto-document-content > p:first-of-type {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--color-text);
  margin: 18px 0 24px 0;
}

/* Default article quote treatment for Iota entries. */
body.reading-entry #quarto-document-content blockquote:not(.twitter-tweet) {
  border-left: 8px solid var(--color-primary);
  border-radius: 0 8px 8px 0;
  background: linear-gradient(90deg, rgba(235, 10, 30, 0.08), rgba(235, 10, 30, 0.025));
  color: var(--color-text);
  margin: 8px 0 26px;
  padding: 18px 22px;
  box-shadow: inset 1px 0 0 rgba(235, 10, 30, 0.22);
}

body.reading-entry #quarto-document-content blockquote:not(.twitter-tweet) p {
  margin: 0 0 0.8rem;
}

body.reading-entry #quarto-document-content blockquote:not(.twitter-tweet) p:last-child {
  margin-bottom: 0;
}

/* The cited source card. */
.reading-quote {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 4px 12px 12px 4px;
  background: var(--color-surface);
  overflow: hidden;
  margin: 12px 0 28px 0;
  max-width: 620px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.reading-quote:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-glow);
}

.reading-quote-link,
.reading-quote-link:hover {
  display: block;
  text-decoration: none;
  color: inherit;
}

.reading-quote-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: cover;
  border-bottom: 1px solid var(--color-border);
}

.reading-quote-body {
  padding: 16px 20px 18px;
}

.reading-quote-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 8px 0;
  color: var(--color-text);
}

.reading-quote-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
  margin: 0;
}

.reading-quote-meta .reading-quote-source {
  color: var(--color-primary);
}

/* ── Responsive: Content Grid ── */
@media (max-width: 900px) {
  .content-grid {
    grid-template-columns: 1fr;
  }

  .content-grid > .posts-section,
  .content-grid > .artagent-callout,
  .content-grid > .ai-post-section,
  .content-grid > .benchmark-section,
  .content-grid > .papers-section,
  .reading-section {
    grid-column: 1 / -1 !important;
  }

  .posts-inner,
  .papers-inner,
  .reading-inner {
    grid-template-columns: 1fr;
  }

  /* Single column, so nothing has to line up across a row any more — give the
     9:16 artwork more room than the 320px slot. */
  .artagent-viewport {
    height: 360px;
  }

  #reading-callout-3 {
    display: flex !important;
  }
}

@media (max-width: 600px) {
  .content-grid-section {
    padding: 8px 16px 64px;
  }

  .artagent-viewport {
    height: 300px;
  }

  .callout-card--in-section,
  .callout-card--ai {
    height: auto;
    min-height: 280px;
  }
}

/* Listing metadata column: long author strings wrap instead of widening the column and
   pushing it left of the title. */
.quarto-post .metadata {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Halve the gap between the nav bar and the page title (73px -> ~36px at the base size).
   Quarto's main column keeps its own 1rem margin and 14px padding; only the theme's
   content padding shrinks, and only on pages that have a title block, so the custom
   home page is unaffected. */
#quarto-content:has(#title-block-header):not(:has(.content-grid-section)) {
  padding-top: 0.3rem;
}