:root {
  --bg: #fbfaf8;
  --fg: #222;
  --muted: #6b6b6b;
  --accent: #880088;
  --rule: #e4e1dc;
  --tile-bg: #eee;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161517;
    --fg: #e8e6e3;
    --muted: #9a979f;
    --accent: #d68ad6;
    --rule: #333036;
    --tile-bg: #2a282c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 1.5em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--rule);
}

.site-title { font-weight: 700; font-size: 1.15rem; color: var(--fg); }
.site-header nav { display: flex; gap: 1.25em; }

main { max-width: 1400px; margin: 0 auto; padding: 1rem; }

h1 { font-size: 1.5rem; margin: 0.5rem 0 1rem; }

/* A justified grid: every photo in a row has the same height, and rows fill
   the width.  Each tile's basis is its width at the target row height, and
   its grow factor is its aspect ratio, so the spare width in a row is shared
   out in proportion to aspect ratio, which keeps the heights equal.  The
   ::after element takes up the spare width in the last row, so a short last
   row stays near the target height instead of being stretched to fill the
   whole width.  -- claude, 2026-09-26 */
.grid {
  --row: 240px;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.grid li {
  flex-grow: var(--ar);
  flex-basis: calc(var(--ar) * var(--row));
}

.grid::after {
  content: "";
  flex-grow: 1000000;
}

.grid img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tile-bg);
}

.grid li.video a { display: block; position: relative; }

/* A video camera in a white ring, in the bottom right corner, after Flickr's
   (which is centered and larger).  The dark fill keeps it legible on pale
   photos.  -- claude, 2026-09-27 */
.grid li.video a::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='rgba(0,0,0,0.35)' stroke='white' stroke-width='2'/%3E%3Crect x='8' y='11.5' width='10.5' height='9' rx='1.5' fill='white'/%3E%3Cpath d='M19.5 14.6 L24.5 11.8 V20.2 L19.5 17.4 Z' fill='white'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  pointer-events: none;
}

@media (max-width: 600px) {
  .grid li.video a::after { width: 24px; height: 24px; right: 6px; bottom: 6px; }
}

@media (max-width: 600px) {
  .grid { --row: 150px; }
}

.photo figure { margin: 0; text-align: center; }

.photo figure img {
  max-width: 100%;
  height: auto;
  max-height: 85vh;
  width: auto;
}

/* Browsers shrink an img proportionally under max-height, but not a video,
   whose intrinsic size isn't known until its metadata loads.  So a video is
   sized explicitly from its aspect ratio, given by the page as --ar: as wide
   as will fit, but no wider than 85vh of height allows.  -- claude, 2026-09-27 */
.photo figure video {
  display: block;
  margin: 0 auto;
  aspect-ratio: var(--ar);
  width: min(100%, calc(85vh * var(--ar)));
  height: auto;
  background: #000;
}

.neighbors {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0 1rem;
}
.neighbors a[rel=next] { margin-left: auto; }

.photo-info {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem 2rem;
}

.photo-text h1 { margin-top: 0; }

.photo-meta { margin: 0; }
.photo-meta dt { color: var(--muted); font-size: 0.85rem; }
.photo-meta dd { margin: 0 0 0.75rem; }
.photo-meta .tags a { margin-right: 0.5em; }

.photo-map {
  grid-column: 2;
  height: 240px;
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 800px) {
  .photo-info { grid-template-columns: 1fr; }
  .photo-map { grid-column: 1; }
}

.big-map { height: calc(100vh - 8rem); min-height: 400px; border-radius: 6px; }

.map-popup { display: block; text-align: center; color: #222; }
.map-popup img { display: block; margin: 0 auto 4px; object-fit: cover; }

.album-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.album-list a { display: block; color: var(--fg); }
.album-list img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--tile-bg);
}
.album-title { display: block; font-weight: 600; margin-top: 0.25rem; }

.count { color: var(--muted); font-size: 0.85rem; }

.tag-cloud { list-style: none; padding: 0; columns: 14em; }
.tag-cloud li { margin-bottom: 0.25rem; }

.archive-year, .archive-month { margin-bottom: 2rem; }
.archive-year h2, .archive-month h2 { font-size: 1.2rem; margin: 0 0 0.5rem; }
h1 .count, h2 .count { font-weight: normal; margin-left: 0.5em; }
.more { margin: 0.5rem 0 0; }

.site-search { margin-left: auto; }

.site-search input {
  font: inherit;
  padding: 0.25em 0.6em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  width: 12em;
}

/* Pagefind's search UI takes its colors from these. */
:root {
  --pagefind-ui-primary: var(--accent);
  --pagefind-ui-text: var(--fg);
  --pagefind-ui-background: var(--bg);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-tag: var(--tile-bg);
  --pagefind-ui-font: inherit;
  --pagefind-ui-image-box-ratio: 4 / 3;
}