/* Fred Snyder Artist — rebuilt from the original WordPress theme */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, ul, li, p { margin: 0; padding: 0; }
ul { list-style: none; }
img { vertical-align: bottom; border: 0; }

html { height: 100%; }
body {
  background: #fff url(/images/fred_snyder_art_bg.png) repeat-x left 152px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-size: 100%;
  color: #3a3a3a;
  line-height: 170%;
  min-height: 100%;
  -webkit-text-size-adjust: 100%;
}
a { color: #3a3a3a; }
p { font-size: 14px; margin: 0 0 30px; }

#wrapper {
  max-width: 1021px;               /* 980 content + 40 padding + 1 border */
  min-height: 100vh;
  margin: 0 auto;
  border-left: 1px solid #3a3a3a;
  padding: 30px 0 0 40px;
}

/* Header */
#header h1 { line-height: 0; }
#header h1 img { max-width: 100%; height: auto; }

.nav { margin: 30px 0 0 1px; display: flex; flex-wrap: wrap; }
.nav li { display: flex; font-size: 14px; }
.nav li + li::before { content: "|"; }
.nav a { text-decoration: none; text-transform: lowercase; padding: 0 15px; }
.nav li:first-child a { padding-left: 0; }
.nav a.active, .nav a:hover, .nav a:focus-visible { color: #0000ff; }

/* Galleries */
.gallery {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 40px 20px;
  margin: 60px 0 0;
}
.gallery li { width: 180px; text-align: center; }
.gallery a { display: inline-block; }
.gallery img { max-width: 100%; height: auto; transition: opacity .2s; }
.gallery a:hover img, .gallery a:focus-visible img { opacity: .5; }
.caption { display: block; text-align: center; color: #c1c1c1; font-size: 11px; }

.text_content { margin: 60px 0 0; max-width: 980px; }

/* Footer */
#footer {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 20px;
  max-width: 980px; margin: 30px 0 0;
}
#footer p { font-size: 10px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 10; display: none;
  align-items: center; justify-content: center; background: rgba(0,0,0,.85); }
.lb.open { display: flex; }
.lb figure { margin: 0; text-align: center; }
.lb img { max-width: 92vw; max-height: 86vh; background: #fff; padding: 6px; }
.lb figcaption { color: #bbb; font-size: 11px; margin-top: 8px; }
.lb button { position: absolute; background: none; border: 0; color: #fff;
  font: 300 40px/1 sans-serif; padding: 16px; cursor: pointer; opacity: .75; }
.lb button:hover, .lb button:focus-visible { opacity: 1; }
.lb .lb-close { top: 4px; right: 8px; }
.lb .lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

/* Narrow screens */
@media (max-width: 1060px) {
  #wrapper { margin-left: 16px; padding-left: 24px; }
}
@media (max-width: 640px) {
  body { background: #fff; }
  #wrapper { margin-left: 12px; padding: 24px 16px 0 16px; }
  #header { border-bottom: 3px double #b7b4d1; padding-bottom: 14px; }
  .nav { margin-top: 20px; row-gap: 4px; }
  .nav a { padding: 0 10px; }
  .gallery { margin-top: 36px; gap: 28px 16px; justify-content: space-between; }
  .gallery li { width: calc(50% - 8px); }
  .gallery img { width: auto; max-height: 180px; }
  .text_content { margin-top: 36px; }
}