:root {
  color-scheme: light dark;

  /* Each color is light-dark(light, dark), picked by the device setting */
  --paper: light-dark(#f8f9fa, #16181c);
  --ink: light-dark(#111418, #e4e6ea);
  --muted: light-dark(#4b5160, #a0a6b1);
  --link: light-dark(#1d3b8c, #93abeb);

  --font-text: "LM Roman 10", Georgia, serif;

  --size-text: 1rem;      /* 16px */
  --space: 0.75rem;       /* 12px, beside the text in the bar and captions */
}

@font-face {
  font-family: "LM Roman 10";
  src: url("fonts/lmroman10-regular-subset.woff2") format("woff2");
  font-display: swap;
}

/* Base: the bar, then one screen below it */
body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100dvh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--size-text);
  line-height: 1.4;
}

h1 {
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}

a {
  color: var(--link);
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Bar: Shuffle on the left, my name on the right */
.bar {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0 var(--space);
}

/* Each link fills the bar's height, so it's easy to tap */
.bar a {
  display: inline-block;
  padding-block: 0.5rem;
}

.name {
  margin-inline-start: auto;
}

/* Gallery: one screen of photos, cropped to fill the grid */
.gallery {
  display: grid;
  grid-template: repeat(3, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr));
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tall screens get 3 by 4, and phones 2 by 6 */
@media (max-aspect-ratio: 1/1) {
  .gallery {
    grid-template: repeat(4, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr));
  }
}

@media (max-aspect-ratio: 2/3) {
  .gallery {
    grid-template: repeat(6, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
  }
}

.gallery a,
.gallery picture,
.gallery img {
  display: block;
  width: 100%;
  height: 100%;
}

.gallery img {
  object-fit: cover;
}

/* Focus ring in ink and paper, so it shows on any photo */
.gallery a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.gallery a:focus-visible img {
  outline: 2px solid var(--paper);
  outline-offset: -4px;
}

/* Photo page: the whole photo as large as fits, with its place and date along its bottom edge */
main:has(.photo) {
  display: grid;
  place-items: center;
  container-type: size;
}

.photo {
  margin: 0;
}

/* Sized from the photo's shape before it loads, so the caption never jumps */
.photo img {
  display: block;
  width: min(100cqw, (100cqh - 3.8rem) * var(--ratio)); /* Leaves room for a caption of two lines */
  height: auto;
}

.photo figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 1rem;
  padding: 0.5rem var(--space);
  contain: inline-size; /* Keeps a long caption from widening the photo */
}

.photo p {
  margin: 0;
  color: var(--muted);
}

/* 404 page */
.message {
  padding: 0 var(--space);
}