:root {
  --paper: #fff;
  --ink: #111;
  --ink-soft: #8a8a8a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sheet-in: 3.25;
  --gutter: 16px;
  --ppi: min(133px, (100vw - 2 * var(--gutter)) / var(--sheet-in));
  --sheet: calc(var(--sheet-in) * var(--ppi));
  --top-h: 56px;
}

* { box-sizing: border-box; }

html { scroll-padding-top: calc(var(--top-h) + 8px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.5 var(--mono);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.top {
  position: sticky;
  top: 0;
  z-index: 2;
  height: var(--top-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  background: linear-gradient(var(--paper) 75%, transparent);
}

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; }
.brand img { display: block; }

.month {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.toggle {
  justify-self: end;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color 150ms;
}
.toggle:hover, .toggle:focus-visible { text-decoration-color: currentColor; }

/* ---------- stream ---------- */

.stream {
  width: var(--sheet);
  margin: 0 auto;
  padding: 16px 0 50vh;
}

.entry { margin: 0 0 calc(var(--ppi) * 0.6); }

.caption {
  margin: 0;
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  font-size: inherit;
  font-weight: inherit;
}
.caption .date { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.sheet {
  min-height: var(--sheet);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet img {
  display: block;
  width: calc(var(--in) * var(--ppi));
  max-width: 100%;
  height: auto;
}

/* ---------- grid ---------- */

.stream.is-grid {
  width: auto;
  padding: 0 var(--gutter) 25vh;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.stream.is-grid .entry { margin: 0; aspect-ratio: 1; }
.stream.is-grid .caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.stream.is-grid .sheet { min-height: 0; height: 100%; padding: 8px; }
.stream.is-grid .sheet img { width: 100%; height: 100%; object-fit: contain; }
.stream.is-grid .entry a { display: block; height: 100%; }
.stream.is-grid .entry a:hover img { transform: scale(1.06); }
.stream.is-grid .sheet img { transition: transform 150ms; }
@media (prefers-reduced-motion: reduce) { .stream.is-grid .sheet img { transition: none; } }

.month-label {
  grid-column: 1 / -1;
  margin: 24px 0 0;
  padding-top: 8px;
  color: var(--ink-soft);
  font-size: inherit;
  font-weight: inherit;
}
.stream:not(.is-grid) .month-label { display: none; }