/* Intentionally minimal. Only rules that are functionally necessary
   (layout width, image sizing, carousel scrolling, the lock screen)
   are here - everything else is left to the browser's defaults:
   default serif font, default blue links, default spacing. */

body {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

nav {
  margin-bottom: 20px;
}

nav a {
  margin-right: 12px;
}

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

.post {
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #ccc;
}

/* Carousel needs a little real CSS to actually scroll horizontally -
   this part is mechanical, not decorative. */
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel-track img {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.carousel-controls {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
}

audio {
  width: 100%;
  margin-top: 6px;
}

/* Password lock screen - functional only */
body.locked > *:not(.lock-overlay) {
  display: none;
}

.lock-overlay {
  display: none;
}

body.locked .lock-overlay {
  display: block;
  text-align: center;
  margin-top: 100px;
}

.lock-form {
  display: inline-block;
}