:root {
  --paper: #f5f2ea;
  --unit: 150px;
  --gap: 20px;

  /* muted tones, one per line of text */
  --blue:  #6f83a6;
  --sage:  #849673;
  --clay:  #b5876b;
  --mauve: #a28599;
  --sand:  #b8a27a;
  --ink:   #3d3a36;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.35;
}

body { isolation: isolate; }
#blog-ascii { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; z-index: -1; }
header { padding: 24px 24px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
#shuffle { background: none; border: 0; padding: 4px; margin: -4px; color: var(--ink); cursor: pointer; line-height: 0; }
#shuffle:hover { color: var(--blue); }
#shuffle:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
#shuffle.spun svg { animation: spun .35s ease; }
@keyframes spun { 50% { transform: scaleX(-1); } }
h1 { margin: 0; font-size: 18px; font-weight: 400; }
.blog-actions { display: flex; align-items: center; gap: 18px; }
.home-link { color: var(--ink); font-size: 15px; text-decoration: none; padding: 6px 0; }
.home-link:hover { color: var(--blue); }
.home-link:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
#gravity { background: none; border: 0; padding: 6px 0; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
#gravity:hover, #gravity[aria-pressed="true"] { color: var(--blue); }
#gravity:focus-visible { outline: 1px solid var(--blue); outline-offset: 4px; }
.grid.gravity-on { position: relative; display: block; overflow: hidden; padding: 0; isolation: isolate; }
.grid.gravity-on::after { display: none; }
.grid.gravity-on > figure { position: absolute; top: 0; left: 0; cursor: grab; touch-action: none; user-select: none; will-change: transform; }
.grid.gravity-on > figure.dragging { cursor: grabbing; z-index: 2; }
.grid.gravity-on > figure[data-pinned] { cursor: default; }
.grid.gravity-on img { -webkit-user-drag: none; }
.grid.gravity-mobile { margin: 0 16px 32px; border: 1px solid rgba(111, 131, 166, 0.16); border-radius: 6px; touch-action: pan-y; }
.grid.gravity-mobile figcaption { font-size: 11px; margin-top: 4px; }
.grid.gravity-mobile > figure[data-pinned] { touch-action: pan-y; }
.grid.gravity-mobile > figure[data-pinned] figcaption { font-size: 15px; margin-top: 8px; }
@media (max-width: 400px) {
  header { flex-wrap: wrap; gap: 10px; }
  .blog-actions { margin-left: auto; }
}

/* every item gets roughly the same area (--w is the square root of its aspect ratio),
   newest first, reading left to right then wrapping. rows stretch a little to fill the width. */
.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap);
  padding: 0 24px 60px;
}
.grid::after { content: ""; flex-grow: 999; }
figure {
  margin: 0;
  min-width: 0;
  flex-grow: var(--w);
  flex-basis: calc(var(--w) * var(--unit));
}
figure.big { flex-grow: calc(var(--w) * 2); flex-basis: calc(var(--w) * var(--unit) * 2); }
figure img, figure video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }

figcaption { margin-top: 8px; font-size: 15px; }
figcaption span { display: block; }

.tone-blue  { color: var(--blue); }
.tone-sage  { color: var(--sage); }
.tone-clay  { color: var(--clay); }
.tone-mauve { color: var(--mauve); }
.tone-sand  { color: var(--sand); }
.tone-ink   { color: var(--ink); }

/* cycling sets (give each one a different --off so they flip at different moments): three images stacked, each shown for 1.3 seconds */
.cycle { position: relative; }
.cycle img { animation: cycle 3.9s step-end infinite; animation-delay: calc(var(--off, 0s) * -1); }
.cycle img + img { position: absolute; inset: 0; height: 100%; object-fit: cover; }
.cycle img:nth-child(2) { animation-delay: calc(-2.6s - var(--off, 0s)); }
.cycle img:nth-child(3) { animation-delay: calc(-1.3s - var(--off, 0s)); }
/* two image sets: same 1.3 seconds each */
.cycle.two img { animation-name: cycle-two; animation-duration: 2.6s; }
.cycle.two img:nth-child(2) { animation-delay: calc(-1.3s - var(--off, 0s)); }
@keyframes cycle-two {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
}
@keyframes cycle {
  0%      { opacity: 1; }
  33.333% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cycle img { animation: none; }
  .cycle img + img { display: none; }
}

/* flipping sets posted from /blog/post: any number of photos, one shown at a time */
.flip { position: relative; }
.flip > * { opacity: 0; }
.flip > * + * { position: absolute; inset: 0; height: 100%; }
.flip > .on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .flip > :first-child { opacity: 1; } .flip > * + * { display: none; } }

/* song player tiles */
.player { position: relative; aspect-ratio: var(--ar); background: #ebe5d6; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 14px; }
.player .play { background: none; border: 0; padding: 8px; color: var(--ink); cursor: pointer; line-height: 0; border-radius: 50%; }
.player .play:hover { color: var(--clay); }
.player .play:focus-visible, .player .bar:focus-visible { outline: 1px solid var(--blue); outline-offset: 2px; }
.player .i-pause, .player.playing .i-play { display: none; }
.player.playing .i-pause { display: block; }
.player .bar { position: absolute; left: 14px; right: 14px; bottom: 30px; height: 14px; cursor: pointer; touch-action: none; }
.player .bar::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: #c9c1ae; }
.player .bar span { position: absolute; left: 0; top: 5px; height: 3px; width: 0; background: var(--clay); }
.player .time { position: absolute; left: 14px; right: 14px; bottom: 10px; display: flex; justify-content: space-between; font-size: 13px; color: #8a857c; font-variant-numeric: tabular-nums; }