/* ============================================================
   Design tokens
   Change these first — everything else refers back to them.
   ============================================================ */
:root {
  --bg:        white;
  --surface:   whitesmoke;
  --ink:       darkslategray;   /* body text, links */
  --ink-soft:  slategray;       /* hover, overlay wash */
  --shadow:    0 0 5px 3px #DCDCDC;
  --measure:   1000px;          /* max content width */
  --font:      Palatino, "Times New Roman", serif;
}

/* ============================================================
   Layout — .bod is the centered content column
   ============================================================ */
@media (min-width: 1050px) {
  .bod {
    width: var(--measure);
    margin: auto;
    padding-top: 20px;
    padding-bottom: 40px;
  }
  .container {
    position: relative;
    width: 497.5px !important;
  }
  .table a:nth-child(odd) .container {
    margin-right: 5px;          /* 5px gutter inside the 2-up grid */
  }
}
@media (max-width: 1050px) {
  .bod {
    padding-right: 40px;
    padding-left: 40px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 40px;
  }
}
@media (max-width: 456px) {
  .table {
    justify-content: center;
  }
  .table img {
    width: 256px !important;
    height: auto !important;
  }
  .container {
    width: 100% !important;
    height: auto !important;
  }
}

/* ============================================================
   Typography
   ============================================================ */
body {
  font-family: var(--font);
  font-weight: 500;
  background-color: var(--bg);
  color: var(--ink);
}
h1 {
  font-size: xx-large;
  margin-top: 5px;
  padding-bottom: 10px;
  margin-bottom: 0px;
  float: left;                  /* header uses floats, not flex */
}
p {
  font-size: 125%;
  line-height: 1.5;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
li {
  font-size: 125%;
}
em {
  font-style: italic;
}
sup {
  vertical-align: super;
  font-size: xx-small;
}

/* ============================================================
   Menu — inline nav, floated right opposite the h1
   ============================================================ */
.menu ul {
  list-style-type: none;
  margin-top: 5px;
  padding-top: 10px;
  margin-bottom: 0px;
  padding-bottom: 10px;
  float: right;
}
.menu li {
  display: inline;
  padding-right: 6px;
  padding-left: 2px;
}
.menu a:link,
.menu a:visited {
  text-decoration: none;
  color: var(--ink);
}
.menu a:hover,
.menu a:active {
  text-decoration: none;
  color: var(--ink-soft);
}

/* ============================================================
   Utility
   ============================================================ */
.clear {
  clear: left;                  /* put on the <hr> under the header */
}

/* ============================================================
   Table — flex gallery (wraps to 2-up, then 1-up)
   ============================================================ */
.table {
  padding-top: 25px;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   Container + overlay — the signature hover-fade image tile
   ============================================================ */
.container {
  position: relative;
  width: 500px;
}
.image {
  display: block;
  width: 100%;
  height: auto;
}
.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 99%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: var(--ink-soft);
}
.container:hover .overlay {
  opacity: .75;
}
.container:hover .text {
  opacity: 1 !important;
}
.text {
  color: white;
  font-family: var(--font);
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0 !important;
  transition: .5s ease;
}

/* ============================================================
   Figure — image with caption
   ============================================================ */
figure {
  padding-top: 25px;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}
figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   Poem — tight paragraph stack for verse / fragmentary text
   ============================================================ */
.poem {
  padding-top: 20px;
}
.poem p {
  padding-top: 0px;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}

/* ============================================================
   Stage — shared card presentation for the home-page slideshow
   and the about-page figure. Square 800px max-width, whitesmoke
   surface, 40px internal padding, soft gainsboro shadow.
   (The .slideshow class is still used elsewhere for state
   toggling — .slideshow.is-playing — and slideshow-specific
   child elements; this rule only defines the shared card.)
   ============================================================ */
.stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 1 / 1;
  background-color: var(--surface);   /* pale tint behind contain'd images; matte effect is intentionally faint */
  margin: 25px auto 0;
  padding: 40px;                      /* breathing room around the image, matching the footer */
  overflow: hidden;
  -webkit-box-shadow: var(--shadow);
     -moz-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}
.stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;                /* preserve native aspect; matte fills the rest */
}
.slideshow-play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: rgba(47, 79, 79, 0.75);  /* darkslategray @ 75% */
  cursor: pointer;
  transition: background-color .3s ease, opacity .3s ease;
}
.slideshow-play:hover {
  background-color: rgba(112, 128, 144, 0.85);  /* slategray @ 85% */
}
.slideshow-play svg {
  width: 50%;
  height: 50%;
  fill: white;
  display: block;
  margin: 25% auto;
}
/* Hide the play button while the slideshow is running.
   It reappears when audio ends, so a repeat press replays the selection. */
.slideshow.is-playing .slideshow-play {
  opacity: 0;
  pointer-events: none;
}
/* Progress bar — thin line at the bottom of the slideshow frame.
   Hidden until playback starts (via the .is-playing class). */
.slideshow-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background-color: rgba(47, 79, 79, 0.15);      /* faint darkslategray track against the whitesmoke stage */
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.slideshow.is-playing .slideshow-progress {
  opacity: 1;
}
.slideshow-progress-fill {
  width: 0%;
  height: 100%;
  background-color: var(--ink-soft);               /* slategray */
}
.slideshow-reload {
  padding-top: 10px !important;
}


.raisedbox {
  background-color: var(--surface);
  padding: 40px;
  margin-top: 0px;
  margin-bottom: 0px;
  -webkit-box-shadow: var(--shadow);
     -moz-box-shadow: var(--shadow);
          box-shadow: var(--shadow);
}
.raisedbox p {
  padding-top: 5px;
  margin-top: 5px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}