/* Idyll Vision — the photographs carry it. Everything else gets out of the way. */

:root {
  --black: #111;
  --white: #fff;
  --grey: #888;
  --rule: #ddd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px;
  background: var(--white);
  color: var(--black);
  font-family: Arial, Helvetica, sans-serif;
}

a { color: var(--black); }

.spine {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: var(--grey);
  text-decoration: none;
}
.spine:hover { background: var(--black); color: var(--white); }
.spine:focus-visible { outline: 2px solid var(--black); outline-offset: 2px; }

header {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0 56px;
}

header h1 {
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 30px;
  margin: 28px 0 6px;
}

header .meta {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: var(--grey);
  margin: 0;
}

.plates {
  max-width: 900px;
  margin: 0 auto;
}

figure {
  margin: 0 0 72px;
}

figure img {
  display: block;
  width: 100%;
  height: auto;
}

figcaption {
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  color: var(--grey);
  margin-top: 8px;
}

footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 0 64px;
  border-top: 1px solid var(--rule);
}

footer p {
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  color: var(--grey);
  margin: 0;
}

@media (max-width: 600px) {
  figure { margin-bottom: 44px; }
  header { padding-bottom: 36px; }
}