:root {
  --bg: #EAE5DA;
  --text: #1a1a18;
  --quiet: #7a766d;
  --accent: #b5316a;
  --rule:  #d6d0c2;
  --display: 'Fraunces', Georgia, serif;
  --serif: 'Newsreader', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111110;
    --text: #e8e6e1;
    --quiet: #8a867d;
    --accent: #e0619a;
    --rule: #2a2926;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 18px/1.5 var(--serif); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--accent); }
img { display: block; max-width: 100%; height: auto; }
h1 { font: 300 48px/1.15 var(--display); margin: 0; }
.mono { font: 400 12px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--quiet); }
.dim { color: var(--rule); }
.place { color: var(--accent); }

.wrap { max-width: 1232px; margin: 0 auto; padding: 0 16px; }
.column { max-width: 960px; margin: 0 auto; }
.column.wide { max-width: 1200px; }

header.site { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px 28px; padding: 28px 0 20px; border-bottom: 1px solid var(--rule); }
.brand { font: 400 26px/1 var(--display); }
.since { margin-left: 14px; font-size: 11px; }
header.site nav { display: flex; gap: 28px; }
header.site nav a[aria-current] { color: var(--text); }
footer.site { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 72px; padding: 24px 0 64px; border-top: 1px solid var(--rule); font-size: 11px; }

.intro { padding: 88px 0 72px; }
.intro h1 { margin-bottom: 16px; }
.intro.short { padding: 48px 0; }
/* Each post is as wide as it can be while the photo plus its meta line still fit the screen height.
   Tall photos come out narrower and centred instead of forcing a scroll. */
.post { width: min(100%, calc((100vh - 160px) * var(--ar))); width: min(100%, calc((100svh - 160px) * var(--ar))); margin: 0 auto 96px; }
.meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 20px; margin-top: 14px; }
.caption { font-style: italic; font-size: 20px; margin: 4px 0 0; }
.pager { display: flex; justify-content: space-between; padding-top: 24px; }
.empty { padding: 48px 0; color: var(--quiet); }

/* Photo page: the photo sits as a plate, never cropped, never taller than the screen. */
.plate { margin: 32px 0 0; }
/* Header (~80px) + top margin + meta line must fit alongside the photo. */
.plate img { width: auto; max-height: calc(100vh - 190px); max-height: calc(100svh - 190px); margin: 0 auto; }
.plate figcaption { max-width: 1140px; margin: 20px auto 0; }
.plate .meta { margin-top: 0; }
.plate .meta .exif { margin-left: auto; }
.plate .caption { font-size: 28px; margin-top: 8px; }
.prevnext { display: flex; justify-content: space-between; max-width: 1140px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--rule); }
.prevnext a, .prevnext > span { display: flex; flex-direction: column; gap: 6px; font-size: 20px; }
.prevnext .next { text-align: right; align-items: flex-end; }
.prevnext .dim .mono { color: var(--rule); }
.prevnext .dim em { color: var(--quiet); }
.more { max-width: 1140px; margin: 56px auto 0; }
.more header { display: flex; justify-content: space-between; margin-bottom: 16px; }
.hint { text-align: center; margin-top: 56px; font-size: 10px; }
.hint .touch { display: none; }
@media (hover: none) { .hint .keys { display: none; } .hint .touch { display: inline; } }

.title { padding: 72px 0 40px; }
.title h1 { font-size: 72px; margin-bottom: 12px; }
.title .strip { margin-top: 20px; }
.grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 20px; align-items: start; }
.grid .mono { display: block; margin-top: 8px; font-size: 10px; }
.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip i { width: 14px; height: 14px; border-radius: 1px; }

.places { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--rule); }
.places a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--rule); }
.places .name { font: 400 30px/1.2 var(--display); }
.places:first-of-type li:first-child .name { color: var(--accent); }
.places .right { display: flex; align-items: center; gap: 20px; }
.places .strip { flex-wrap: nowrap; }
.places .count { width: 32px; text-align: right; }
.city { display: flex; justify-content: space-between; margin: 56px 0 8px; font-size: 12px; font-weight: 400; }
.city span:first-child { color: var(--text); }
.city:first-of-type { margin-top: 0; }

.yeartitle { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 72px 0 48px; }
.yeartitle h1 { font-size: 112px; line-height: 0.9; }
.stats { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-size: 11px; }
.stats .strong { color: var(--text); font-size: 13px; }
.legend { display: flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 2px; margin-left: 10px; }
.legend .lg-post { background: var(--quiet); }
.yeargrid { display: grid; grid-template-columns: 48px repeat(31, minmax(0, 1fr)) 56px; gap: 6px; align-items: center; }
.yeargrid > a, .yeargrid > span:not(.label):not(.count) { aspect-ratio: 1; border-radius: 2px; }
.yeargrid > a:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.miss { border: 1px solid var(--quiet); }
.off { background: var(--rule); opacity: 0.6; }
.none { visibility: hidden; }
.yeargrid .label, .yeargrid .count { font-size: 11px; }
.yeargrid .count { text-align: right; }
.note { font-style: italic; color: var(--quiet); margin-top: 40px; }
.years { margin-top: 24px; }
.years span { color: var(--text); }

.prose { max-width: 640px; }
.prose p { margin: 0 0 1em; }
.prose a:not(.mono a) { border-bottom: 1px solid var(--rule); }

@media (max-width: 700px) {
  body { font-size: 17px; }
  h1, .title h1 { font-size: 36px; }
  .brand { font-size: 20px; }
  .since { display: none; }
  header.site { padding: 20px 0 14px; }
  header.site nav { gap: 14px; font-size: 10px; }
  .mono { font-size: 10px; }
  .intro { padding: 32px 0; }
  .intro h1 { font-size: 30px; line-height: 1.2; }
  .post { margin-bottom: 48px; }
  .caption { font-size: 17px; }
  .plate { margin: 16px -16px 0; }
  .plate img { width: auto; max-height: calc(100svh - 130px); }
  .plate figcaption { padding: 0 16px; margin-top: 16px; }
  .plate .meta .exif { margin-left: 0; width: 100%; }
  .plate .caption { font-size: 22px; }
  .prevnext a, .prevnext > span { font-size: 16px; }
  .title { padding: 40px 0 28px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .places .name { font-size: 22px; }
  .places .strip { display: none; }
  .yeartitle { padding: 40px 0 28px; }
  .yeartitle h1 { font-size: 64px; }
  .stats { align-items: flex-start; }
  .legend i:first-child { margin-left: 0; }
  .yeargrid { grid-template-columns: 30px repeat(31, minmax(0, 1fr)) 0; gap: 2px; }
  .yeargrid .count { visibility: hidden; }
}