/* beckyevalentine.com — reproduces the Cargo "counterform-byday" design.
   Layout values copied from Cargo's own custom-design.css / globalstyle.css:
   #content_container width 940 + padding 50px 0 0 35px, project_title Georgia
   22px/1.5 padding-bottom 25px, nav line-height 2 padding-left 35, image gaps
   35px, project_thumb margin 10px 35px 10px 0. */

:root { --col: 975px; --text: #666; --nav: #9c9c9c; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #fff;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
img { border: 0; }

/* 975px centered column; header spans it, nav + content inset 35px */
.site-header, .site-nav, main, .site-footer { max-width: var(--col); margin: 0 auto; }

.site-header { padding: 40px 0 0; }
.site-header img { max-width: 100%; height: auto; display: block; }

.site-nav { padding: 5px 0 0 35px; line-height: 2; margin-top: 10px; }
.site-nav a { font-size: 13px; font-weight: 600; color: var(--nav); text-decoration: none;
  white-space: nowrap; margin-right: 22px; }
.site-nav a:hover { color: var(--text); }

/* Content column (= Cargo #content_container) */
main { padding: 50px 0 0 35px; }     /* 975 - 35 left = 940 content, 50 top */
.project-title { font-family: Georgia, Times, serif; font-weight: 400; font-size: 22px;
  line-height: 1.5; color: #000; margin: 0; padding: 0 0 25px; }

/* Text/caption blocks (section labels, descriptions, artist statements) */
.text-block { color: #555; margin: 0 0 16px; line-height: 1.5; }
.text-block b { font-weight: 700; }

.gallery { position: relative; }
.gallery .slide img, .gallery .stacked-slide img { max-width: 100%; height: auto; display: block; }

/* Stacked galleries: everything visible, in order; 35px between images */
.gallery.stacked .stacked-slide { margin: 0 0 35px; }
.gallery.stacked .text-block { margin: 18px 0 16px; }

/* Slideshow galleries */
.gallery.slideshow .slide-nav { color: #9c9c9c; margin: 0 0 10px; }
.gallery.slideshow .slide-nav a { color: #9c9c9c; text-decoration: none; }
.gallery.slideshow .slide-nav a:hover { color: #666; }
.gallery.slideshow .count { color: #9c9c9c; }
.fs-btn { display: inline-block; background: #cfcfcf; color: #fff; border: 0; border-radius: 2px;
  padding: 3px 10px; margin: 0 0 10px; cursor: pointer; font-size: 12px; font-family: inherit; }
.gallery.slideshow .stage { cursor: pointer; }
.gallery.slideshow .thumbs { gap: 8px; margin: 10px 0 0; }
.gallery.slideshow .thumb { padding: 2px; border: 1px solid #ddd; background: #fff; cursor: pointer; line-height: 0; }
.gallery.slideshow .thumb img { width: 110px; height: 72px; object-fit: cover; display: block; }
.gallery.slideshow .thumb.active { border-color: #888; }
.gallery.slideshow .text-block:first-of-type { margin-top: 24px; }

/* No-JS fallback: all slides stacked, interactive chrome hidden */
.gallery.slideshow .slide-nav, .gallery.slideshow .thumbs { display: none; }
.gallery.slideshow .stage .slide { margin: 0 0 35px; }
.gallery.slideshow.js .slide-nav { display: block; }
.gallery.slideshow.js .thumbs { display: flex; flex-wrap: wrap; }
.gallery.slideshow.js .stage .slide { display: none; margin: 0; }
.gallery.slideshow.js .stage .slide.active { display: block; }

.gallery:fullscreen { display: flex; align-items: center; justify-content: center; background: #111; }
.gallery:fullscreen .slide-nav, .gallery:fullscreen .thumbs, .gallery:fullscreen .fs-btn { display: none; }
.gallery:fullscreen .stage .slide.active img { max-height: 100vh; width: auto; margin: 0 auto; }

/* Home grid: 200px square thumbnails, 35px gaps (= Cargo .project_thumb) */
.home-grid { display: grid; grid-template-columns: repeat(4, 200px);
  column-gap: 35px; row-gap: 20px; justify-content: start; }
.home-grid .tile { display: block; text-decoration: none; color: var(--text); width: 200px; }
.home-grid .tile img { width: 200px; height: 200px; object-fit: cover; display: block; }
.home-grid .tile-title { display: block; font-size: 12px; margin-top: 6px; color: var(--text); }

/* Text pages */
.text-page { line-height: 1.6; max-width: 620px; }
.text-page a { color: var(--text); }

.site-footer { color: #aaa; font-size: 11px; padding: 50px 0 40px 35px; }

/* Mobile */
@media (max-width: 760px) {
  .site-nav, main, .site-footer { padding-left: 16px; padding-right: 16px; }
  .home-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; }
  .home-grid .tile, .home-grid .tile img { width: 100%; }
  .home-grid .tile img { height: auto; aspect-ratio: 1 / 1; }
}

/* Bottom project-thumbnail nav grid (Cargo project_bottom) */
.project-nav { margin-top: 45px; padding-top: 35px; border-top: 1px solid #eee; }