:root {
  --paper: #faf8ef;
  --ink: #111111;
  --ink-soft: #333333;
  --accent: #1b1b1b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Patrick Hand", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
}

.wrap {
  width: min(1100px, 92vw);
  margin: 0 auto;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Header */
.site-header {
  border-bottom: 3px solid var(--ink);
  background: radial-gradient(circle at 20% 10%, rgba(0,0,0,0.04), transparent 40%), var(--paper);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.25rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.logo { height: 56px; width: auto; display: block; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05)); }

/* Main */
.site-main .wrap { padding: 1.25rem 0.25rem 3rem; }

.section-title {
  font-family: "Patrick Hand", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: 1.6rem;
  margin: 0.5rem 0 1rem;
}

.card {
  border: 3px solid var(--ink);
  background: #fffef9;
  box-shadow: 3px 3px 0 0 var(--ink);
}
.card-header { padding: 0.6rem 0.8rem; border-top: 3px solid var(--ink); }
.card .block { display: block; }

.latest-comic img { max-width: 100%; max-height: 80vh; width: auto; height: auto; display: block; margin: 0 auto; }
.comic-title { margin: 0; font-size: 1.35rem; }
.comic-meta { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 0.95rem; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.thumb img { width: 100%; height: 180px; object-fit: cover; object-position: top; display: block; }
.thumb-meta { padding: 0.5rem; border-top: 3px solid var(--ink); background: #fffef9; }
.thumb .name { font-size: 1rem; font-weight: 600; }
.thumb .date { font-size: 0.85rem; color: var(--ink-soft); }
.more { margin-top: 1rem; }

/* Comic Page */
.comic-header { margin-bottom: 0.5rem; }
.comic-figure { border: 3px solid var(--ink); background: #fffef9; padding: 0.35rem; box-shadow: 3px 3px 0 0 var(--ink); max-width: 100%; }
.comic-figure img { max-width: 100%; max-height: 80vh; width: auto; height: auto; display: block; margin: 0 auto; image-rendering: -webkit-optimize-contrast; }
/* SVG comics embedded via <object>: limit height to 80% of viewport */
.comic-figure object.comic-image {
  height: 80vh;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto; /* center horizontally */
}
/* Shrink figure to the cartoon size when embedding SVG via <object> */
.comic-figure:has(object.comic-image) {
  width: fit-content;
  margin: 0 auto;
}
/* Fallback <img> inside <object> if SVG fails */
.comic-figure object.comic-image > img {
  height: 80vh;
  width: auto;
  max-width: 100%;
  display: block;
}
.comic-pager { margin-top: 1rem; }
.pager { display: flex; justify-content: space-between; gap: 1rem; }
.pager a { text-decoration: none; color: var(--ink); border-bottom: 2px solid var(--ink); }

.transcript { margin-top: 1rem; }
.transcript summary { cursor: pointer; }
.transcript-body { background: #fffef9; border: 3px solid var(--ink); padding: 0.75rem; box-shadow: 3px 3px 0 0 var(--ink); }

/* Notes */
.comic-notes { margin-top: 1rem; }
.notes-body { background: #fffef9; border: 3px solid var(--ink); padding: 0.75rem; box-shadow: 3px 3px 0 0 var(--ink); }
.contact-link { margin-top: 0.75rem; font-size: 0.95rem; }

/* Footer */
.site-footer { border-top: 3px solid var(--ink); padding: 1.25rem 0.25rem; color: var(--ink-soft); text-align: center; }
.site-footer a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
.site-footer a:hover { border-bottom-width: 2px; }

/* Responsiveness */
@media (min-width: 900px) {
  .latest .card { max-width: 980px; margin: 0 auto; }
}

@media (max-width: 600px) {
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  .thumb img { height: 140px; }
}