/* Plain, readable starter styles. Replace or extend freely when you design the site. */
:root {
  --bg: #fdfcf9;
  --fg: #22211e;
  --muted: #5f5c55;
  --link: #1b4d8c;
  --rule: #d8d4ca;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #1b1a18; --fg: #e9e6df; --muted: #a8a49a; --link: #8db8f0; --rule: #3a3833; }
}
* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.65;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem .75rem; z-index: 10; }
.site-header, main, .pager, .site-footer { max-width: 40rem; margin-inline: auto; padding-inline: 1.25rem; }
.site-header { padding-top: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.site-header a { color: var(--muted); text-decoration: none; }
.site-header a:hover, .site-header a:focus-visible { color: var(--link); text-decoration: underline; }
main { padding-top: 1.5rem; padding-bottom: 1.5rem; }
h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 .25rem; }
h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.week, .byline { color: var(--muted); margin: 0 0 1.5rem; font-style: italic; }
article p { margin: 0 0 1.1rem; font-size: 1.125rem; }
a { color: var(--link); }
a:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.speedo { color: var(--muted); font-size: .95rem; border-top: 1px solid var(--rule); padding-top: .75rem; margin-top: 1.75rem; }
.the-end { text-align: center; font-weight: bold; letter-spacing: .05em; margin: 2rem 0 1rem; }
.author-note { font-style: italic; }
.editor-note {
  font-style: italic;
  color: var(--muted);
  font-size: .95rem;
  border-left: 3px solid var(--rule);
  padding-left: .75rem;
  margin: 0 0 1.1rem;
}
figure.drawings { margin: 1.5rem 0; }
figure.drawings .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; align-items: center; }
figure.drawings img { width: 100%; height: auto; display: block; background: #fff; }
figcaption { color: var(--muted); font-size: .95rem; margin-top: .5rem; }
figure.photo { margin: 1.5rem 0; }
figure.photo img { width: 100%; height: auto; display: block; }
main.wide { max-width: 72rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1.5rem 1rem; }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.gallery a:focus-visible img { outline: 3px solid var(--link); outline-offset: 2px; }
dialog.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; text-align: center; cursor: zoom-out; }
dialog.lightbox::backdrop { background: rgba(0, 0, 0, .85); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 85vh; width: auto; height: auto; margin: 0 auto; }
dialog.lightbox p { color: #eee; margin: .5rem 0 0; font-size: 1rem; }
dialog.lightbox .lightbox-hint { color: #aaa; font-size: .85rem; margin-top: .25rem; }
a[href^="images_full_resolution/"] { cursor: zoom-in; }
.pager { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .9rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 1rem; }
.pager a, .pager span { flex: 1 1 0; }
.pager a[rel="prev"] { text-align: left; }
.pager a[rel="next"] { text-align: right; }
.pager .all { text-align: center; flex: 0 0 auto; }
.entries { list-style: none; padding: 0; margin: 0 0 1rem; }
.entries li { margin: 0 0 .4rem; break-inside: avoid; }
.site-footer { padding-top: 1rem; padding-bottom: 2rem; color: var(--muted); font-size: .9rem; }
@media (max-width: 30rem) {
  h1 { font-size: 1.6rem; }
  .pager { font-size: .95rem; }
}