/* ============================================================================
   styles.css — Lauren Emberson Photography
============================================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #f5f4f1;
  --ink: #111111;
  --frame: #111111;
  --nav-h: 72px;

  /* Shared layout grid — used by the nav, Profile, and Contact so that
     "Weddings", the profile photo/bio, and the contact info all line up. */
  --pad-x: 32px;
  --label-col: 220px;   /* left column: name / "Featured In" / "Get in touch" */
  --col-gap: 24px;      /* → content column begins at pad-x + label-col + gap */
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}
a, p, h1, h2, h3, nav, .nav__name {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}
a { color: inherit; text-decoration: none; }

/* ============================================================================
   NAVIGATION — name | (menu, aligned to the content column) | right links
============================================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: var(--label-col) 1fr auto;
  column-gap: var(--col-gap);
  align-items: center;
  padding: 0 var(--pad-x);
  z-index: 100;
  mix-blend-mode: difference;
  color: #ffffff;
  pointer-events: none;
}
.nav a { color: #ffffff; pointer-events: auto; }
.nav__name { grid-column: 1; }
.nav__center { grid-column: 2; display: flex; gap: 22px; }
.nav__right { grid-column: 3; display: flex; gap: 22px; }
.nav a:hover { opacity: 0.6; }

/* ============================================================================
   GALLERY PAGES — two columns, framed images, generous spacing
============================================================================ */
.gallery {
  column-count: 2;
  column-gap: 108px;
  max-width: 1160px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 72px) 40px 112px;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--frame);
  margin-bottom: 120px;
  break-inside: avoid;
}

/* ============================================================================
   PROFILE — photo, bio, and "Featured In" values all in the content column
   (aligned with "Weddings" in the nav); "Featured In" label in the left column.
============================================================================ */
.profile {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  column-gap: var(--col-gap);
  grid-template-areas:
    ".      intro"
    "flabel fvalues";
  padding: calc(var(--nav-h) + 96px) var(--pad-x) 112px;
}
.profile__intro { grid-area: intro; max-width: 560px; }
.profile__label { grid-area: flabel; }
.profile__values { grid-area: fvalues; }
.profile__photo {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 0 0 2.4rem;
  border: 2px solid var(--frame);
}
.profile__bio { text-align: justify; margin: 0 0 3.5rem; }
.profile__values p { margin-bottom: 0.4rem; }

/* ============================================================================
   CONTACT — "Get in touch" in the left column; contact info in the content
   column (same left edge as the profile photo/bio and the nav's "Weddings").
============================================================================ */
.contact {
  display: grid;
  grid-template-columns: var(--label-col) 1fr;
  column-gap: var(--col-gap);
  padding: calc(var(--nav-h) + 160px) var(--pad-x) 112px;
}
.contact__label { grid-column: 1; }
.contact__content { grid-column: 2; }
.contact__intro { max-width: 460px; margin: 2.6rem 0 0; }
.contact__list p { margin-bottom: 0.5rem; }
.contact a:hover { opacity: 0.6; }

/* ============================================================================
   RESPONSIVE
============================================================================ */
@media (max-width: 820px) {
  .gallery {
    column-count: 1;
    max-width: 560px;
    padding: calc(var(--nav-h) + 40px) 24px 80px;
  }
  .gallery img { margin-bottom: 48px; }
}

@media (max-width: 640px) {
  :root { --nav-h: 60px; }

  /* Nav back to a simple flow layout on small screens */
  .nav {
    display: flex;
    padding: 0 18px;
  }
  .nav__center { margin-left: 16px; gap: 14px; }
  .nav__right { margin-left: auto; gap: 14px; }

  /* Profile + Contact stack into one column */
  .profile, .contact {
    display: block;
    padding-left: 22px;
    padding-right: 22px;
  }
  .profile__intro { max-width: none; }
  .profile__label, .contact__label { margin-bottom: 0.4rem; opacity: 0.6; }
}