/* smallbatch's post blocks, for imported themes, which don't know them.
   The selectors are specific so a theme's own image rules don't win. */
figure { margin: 1.5rem 0; }
figure > img { display: block; }
figure > figcaption { opacity: .75; font-size: .9em; margin-top: .4rem; }
div.video-frame { position: relative; aspect-ratio: 16 / 9; }
div.video-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; }
div.gallery { display: grid; grid-template-columns: repeat(var(--columns, 3), 1fr); gap: .5rem; margin: 1.5rem 0; }
div.gallery > figure { margin: 0; }
div.gallery > figure > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0; }
@media (max-width: 30rem) {
  div.gallery { grid-template-columns: repeat(min(var(--columns, 3), 2), 1fr); }
}

/* Block layout, used when the site has a layout.json. */
:root {
  --width: 42rem;
  --wide: 64rem;
  --gap: 2rem;
  --spacing: 1.5rem;
  --radius: 4px;
  --surface: #f3f3ef;
  --accent: var(--link);
  --on-accent: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --surface: #222226; --on-accent: #18181a; }
}
body.layout { max-width: none; padding: 0; }
.row { padding: calc(var(--spacing) / 2) 1rem; }
.row:first-child { padding-top: var(--spacing); }
.row:last-child { padding-bottom: var(--spacing); }
.row.surface, .row.accent { padding-block: var(--spacing); }
.row.surface { background: var(--surface); }
.row.accent { background: var(--accent); color: var(--on-accent); }
.row.accent a, .row.accent .site-title, .row.accent .meta, .row.accent .site-footer { color: inherit; }
.row-inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); max-width: var(--width); margin: 0 auto; }
.row.wide .row-inner { max-width: var(--wide); }
.row.full .row-inner { max-width: none; }
.col { grid-column: span var(--span, 12); min-width: 0; }
.col > * + * { margin-top: var(--spacing); }
@media (max-width: 48rem) {
  .col { grid-column: 1 / -1; }
}
.align-center { text-align: center; }
.align-right { text-align: right; }

.layout .site-header, .layout .site-footer { margin: 0; }
.layout .site-header { padding: 0 0 1rem; }
.layout .site-footer { padding-top: 1rem; }
.site-logo img { display: block; max-height: 3rem; width: auto; }
.tagline { margin: 0; color: var(--muted); font-size: .95rem; }
.site-nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.site-nav a { text-decoration: none; }
.site-nav a[aria-current] { color: var(--text); }
.layout main > :first-child { margin-top: 0; }
.hero h1 { font-size: 2.4rem; margin: 0 0 .5rem; }
.hero img { display: block; width: 100%; margin-bottom: 1rem; }
.hero p { font-size: 1.15rem; }
.recent ul, .tag-list ul { list-style: none; padding: 0; margin: 0; }
.recent li { margin-bottom: .6rem; }
.recent time { display: block; color: var(--muted); font-size: .85rem; }
.recent p { margin: .2rem 0 0; font-size: .95rem; }
.tag-list ul { display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.tag-list .count { color: var(--muted); font-size: .85rem; }
.image { margin: 0; }
.image img { display: block; }
.image.align-center img { margin: 0 auto; }
.image.align-right img { margin-left: auto; }
.col h2:first-child { margin-top: 0; }
.layout .site-header { align-items: center; }
.row.accent .site-header, .row.accent .site-footer { border-color: color-mix(in srgb, currentColor 35%, transparent); }