:root {
  --bg: #f4f2ee;
  --fg: #1c1b19;
  --muted: #77736b;
  --line: #dcd8d0;
  --accent: #b24a2b;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --row: 260px;
  --gap: 6px;
  --measure: 38rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121211; --fg: #e9e6e0; --muted: #8d8980; --line: #2a2927; --accent: #e07a55; }
}
@media (max-width: 700px) { :root { --row: 150px; --gap: 3px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.6 var(--sans); }
a { color: inherit; }
img { display: block; }

header.site, footer.site {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px clamp(16px, 4vw, 48px);
}
header.site .brand { font: 600 15px var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
header.site .admin-link { font-size: 13px; color: var(--muted); }
footer.site { color: var(--muted); font-size: 13px; padding-block: 64px 32px; }
.draft { font: 500 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); vertical-align: middle; }
.empty { text-align: center; color: var(--muted); padding: 20vh 0; }

/* Home ---------------------------------------------------------------------*/
.home {
  display: grid; gap: clamp(24px, 4vw, 56px) clamp(16px, 3vw, 40px);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  padding: 8px clamp(16px, 4vw, 48px);
}
.card { text-decoration: none; display: block; }
.card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--line) center / cover; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card:hover .card-img img { transform: scale(1.03); }
.card-meta h2 { font: 400 26px/1.2 var(--serif); margin: 14px 0 4px; }
.card-meta p { margin: 0 0 4px; color: var(--muted); }
.card-meta small { color: var(--muted); font-size: 13px; }

/* Album --------------------------------------------------------------------*/
.album { padding: 0 clamp(8px, 2vw, 24px); }
.album-head { max-width: var(--measure); margin: clamp(24px, 8vh, 96px) auto clamp(32px, 6vh, 72px); text-align: center; }
.album-head h1 { font: 400 clamp(36px, 6vw, 68px)/1.05 var(--serif); margin: 0; letter-spacing: -.01em; }
.album-head .sub { font: italic 400 clamp(18px, 2.2vw, 22px)/1.4 var(--serif); color: var(--muted); margin: 14px 0 0; }
.album-head .meta { font-size: 13px; color: var(--muted); letter-spacing: .04em; margin: 18px 0 0; }
.album-head .intro { text-align: left; margin-top: 36px; }

.prose { max-width: var(--measure); margin: clamp(40px, 9vh, 110px) auto; padding: 0 8px; font: 19px/1.65 var(--serif); }
.prose p { margin: 0 0 1em; }
.prose h2, .prose h3, .prose h4 { font-weight: 400; line-height: 1.2; margin: 0 0 .6em; }
.prose h2 { font-size: 32px; }
.prose h3 { font-size: 24px; }
.prose blockquote { margin: 1.2em 0; padding-left: 1.2em; border-left: 2px solid var(--accent); font-style: italic; color: var(--muted); }
.prose a { color: var(--accent); }

/* Justified grid: items grow proportionally to their aspect ratio */
.jg { display: flex; flex-wrap: wrap; gap: var(--gap); margin-bottom: var(--gap); }
.jg::after { content: ""; flex-grow: 1e6; }
.jg-i { position: relative; display: block; min-width: 0; overflow: hidden; cursor: zoom-in; }
.jg-i i { display: block; background-size: cover; }
.jg-i img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jg-i:hover img { opacity: .92; }

.feat { margin: clamp(28px, 6vh, 72px) auto; max-width: min(100%, 1800px); }
.feat a { display: block; margin: 0 auto; width: min(100%, calc(92vh * var(--r))); background-size: cover; cursor: zoom-in; }
.feat img { width: 100%; height: 100%; object-fit: contain; }
.feat figcaption { max-width: var(--measure); margin: 12px auto 0; text-align: center; color: var(--muted); font: italic 15px/1.5 var(--serif); }

/* Lightbox -----------------------------------------------------------------*/
.lb {
  position: fixed; inset: 0; z-index: 50; background: rgba(8, 8, 8, .97); color: #ddd;
  display: grid; grid-template-rows: 1fr auto; opacity: 0; transition: opacity .2s; touch-action: none;
}
.lb.on { opacity: 1; }
.lb-stage { position: relative; overflow: hidden; }
.lb-stage img { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 24px); max-height: calc(100% - 24px);
  object-fit: contain; background-size: cover; transition: transform .25s ease; }
.lb-bar { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  padding: 10px 20px 16px; font-size: 13px; color: #9a968e; }
.lb-bar .cap { color: #e8e4dc; font: italic 16px var(--serif); }
.lb-bar .ex span + span::before { content: " · "; }
.lb-bar a { color: #9a968e; }
.lb button { position: absolute; background: none; border: 0; color: #ccc; cursor: pointer; font: 300 34px/1 var(--sans);
  padding: 18px; opacity: .55; }
.lb button:hover { opacity: 1; }
.lb .x { top: 0; right: 4px; font-size: 30px; z-index: 2; }
.lb .prev { left: 0; top: 50%; transform: translateY(-50%); }
.lb .next { right: 0; top: 50%; transform: translateY(-50%); }
.lb .count { position: absolute; top: 18px; left: 22px; font-size: 13px; color: #777; }
@media (hover: none) { .lb .prev, .lb .next { display: none; } }