/* Jeffrey Willson Photography — static rebuild */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #1a1a1a;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 32px;
  padding: 30px 44px 22px;
}
.site-title {
  color: #111;
  text-decoration: none;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.05em;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.site-nav a {
  color: #6b6b6b;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 0;
}
.site-nav a:hover { color: #111; }
.site-nav a.active { color: #111; border-bottom: 1px solid #111; }

/* Gallery — three independent columns (stacked Oct 22, 2026 at Jeffrey's
   request): each image sits directly under the one above it in its column,
   so squares leave no dead space. Column 1: 001, 004, 007…; column 2:
   002, 005, 008…; column 3: 003, 006, 009… */
.gallery {
  --gap: 26px;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: 14px 44px 70px;
}
.g-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.g-item { margin: 0; overflow: hidden; }
.g-item.vert { aspect-ratio: 2 / 3; }
.g-item.sq { aspect-ratio: 1 / 1; }
.g-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.g-item img:hover { opacity: 0.92; }

@media (max-width: 1024px) {
  .gallery { --gap: 20px; padding: 10px 28px 56px; }
  .site-header { padding: 24px 28px 18px; }
}
@media (max-width: 640px) {
  .gallery { --gap: 10px; padding: 8px 14px 44px; }
  .site-header { padding: 20px 18px 14px; }
  .site-nav { gap: 4px 18px; }
}

/* Travel — full-bleed square-tile grid; click opens the full image */
.travel-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 0 0 6px;
}
.t-item { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; }
.t-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.t-item img:hover { opacity: 0.92; }
@media (max-width: 900px) { .travel-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .travel-gallery { grid-template-columns: repeat(2, 1fr); } }

/* About */
.about { max-width: 780px; margin: 0 auto; padding: 26px 28px 70px; }
.about h1 { font-size: 30px; font-weight: 500; line-height: 1.3; margin: 0 0 28px; }
.about p { font-size: 17px; line-height: 1.75; color: #2c2c2c; margin: 0 0 20px; }

/* Contact */
.contact { max-width: 780px; margin: 0 auto; padding: 26px 28px 70px; text-align: center; }
.contact h1 { font-size: 30px; font-weight: 500; line-height: 1.3; margin: 0 0 24px; }
.contact p { font-size: 17px; line-height: 1.7; color: #2c2c2c; margin: 0 0 14px; }
.contact-line { font-size: 19px; }
.contact-line a { color: #111; text-decoration: none; border-bottom: 1px solid #bbb; }
.contact-line a:hover { border-bottom-color: #111; }

/* Page background photos — full-page cover at 25% opacity behind the
   content (Oct 24, 2026, Jeffrey's choice). Contact uses his on-location
   shoot photo (cleaned + widened), stored as assets/contact-bg.jpg. */
body.contact-page {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Pin the footer (copyright line) to the bottom of the viewport so it
   doesn't cross the middle of the background photo (Jeffrey, Oct 24). */
.contact-page main { flex: 1 0 auto; }
/* All Contact text on the left, aligned like the About text column
   (Jeffrey, Oct 24): heading, phone, email, and the copyright line. */
.contact-page .contact { text-align: left; max-width: 660px; margin: 0 auto 0 44px; }
.contact-page .site-footer { text-align: left; margin-left: 44px; padding-left: 28px; }
@media (max-width: 1024px) {
  .contact-page .contact { margin-left: 28px; }
  .contact-page .site-footer { margin-left: 28px; }
}
@media (max-width: 640px) {
  .contact-page .contact { max-width: none; margin-left: 0; }
  .contact-page .site-footer { margin-left: 0; }
}
.contact-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("contact-bg.jpg") center center / cover no-repeat;
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}
.contact-page .site-header,
.contact-page main,
.contact-page .site-footer { position: relative; z-index: 1; }

/* About background (Oct 24, 2026, Jeffrey's pick): his black-and-white
   fashion photo with the background converted to white, stored as
   assets/about-bg.jpg. Sized at 25% opacity to sit below the header so
   the model's head stops just below the nav, anchored right; the About
   text column is shifted left so it clears the model (Jeffrey, Oct 24). */
body.about-page { position: relative; }
.about-page::before {
  content: "";
  position: fixed;
  top: 92px;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("about-bg.jpg") right top / contain no-repeat;
  opacity: 0.25;
  z-index: 0;
  pointer-events: none;
}
.about-page .site-header,
.about-page main,
.about-page .site-footer { position: relative; z-index: 1; }
.about-page .about { max-width: 660px; margin: 0 auto 0 44px; }
/* Copyright line aligned left with the bio text (Jeffrey, Oct 24) */
.about-page .site-footer { text-align: left; margin-left: 44px; padding-left: 28px; }
@media (max-width: 1024px) {
  .about-page .about { margin-left: 28px; }
  .about-page .site-footer { margin-left: 28px; }
}
@media (max-width: 640px) {
  .about-page::before { top: 118px; }
  .about-page .about { max-width: none; margin-left: 0; }
  .about-page .site-footer { margin-left: 0; }
}

/* Placeholder pages */
.placeholder { max-width: 780px; margin: 0 auto; padding: 60px 28px 90px; color: #777; text-align: center; }

/* Footer */
.site-footer { padding: 34px 20px 44px; text-align: center; }
.site-footer p { margin: 0; font-size: 12px; letter-spacing: 0.08em; color: #999; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; }
.lightbox button {
  position: absolute;
  background: none; border: 0; color: #222;
  font-size: 44px; line-height: 1; cursor: pointer;
  padding: 14px 18px; opacity: 0.75;
}
.lightbox button:hover { opacity: 1; }
.lb-close { top: 8px; right: 10px; font-size: 38px; }
.lb-prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 6px; top: 50%; transform: translateY(-50%); }