/* ==========================================================================
   Photography Portfolio — style.css
   One stylesheet for the whole site. Organized into:
     1. Variables / reset
     2. Sidebar navigation
     3. Main content wrapper
     4. Homepage (hero image)
     5. Bio page
     6. Portfolio pages (horizontal strip)
     7. Small screens
   ========================================================================== */

/* ---------- 1. Variables / reset ---------- */

:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-muted: #767676;
  --color-border: #e8e8e8;

  --sidebar-width: 220px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --transition-fast: 0.2s ease;
  --transition-slow: 0.6s ease;
}

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

html,
body {
  height: 100%;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* ---------- 2. Sidebar navigation ---------- */

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  border-right: 1px solid var(--color-border);
}

.site-title {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
}

.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-link {
  display: inline-block;
  font-size: 0.95rem;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text);
}

/* ---------- 3. Main content wrapper ---------- */

.content {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
}

/* ---------- 4. Homepage (hero image) ---------- */

.hero {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2rem;
}

.hero-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.hero-image.is-loaded {
  opacity: 1;
}

/* ---------- 5. Bio page ---------- */

.bio {
  max-width: 560px;
  padding: 5rem 3rem;
  font-size: 1.05rem;
  line-height: 1.75;
}

.bio h1 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.bio p + p {
  margin-top: 1.2rem;
}

/* ---------- 6. Portfolio pages (horizontal strip) ---------- */

.strip-wrapper {
  position: relative; /* makes this the offsetParent for main.js's centering math */
  height: 100vh;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Thin, unobtrusive scrollbar where supported. */
  scrollbar-width: thin;
}

.strip {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  /* Half the wrapper's width on each side (percentage padding resolves
     against the containing block's width) so there's enough scroll room
     to bring the first or last image all the way to center, instead of
     them being stuck flush against the edge of the screen. */
  padding: 0 50%;
}

.strip-image {
  /* Less than the full wrapper height so images float with breathing room
     above and below, rather than bleeding to the top/bottom edge. */
  height: 80vh;
  width: auto;
  flex-shrink: 0;
}

/* ---------- 7. Small screens ---------- */

@media (max-width: 760px) {
  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .nav-list {
    flex-direction: row;
    gap: 1.25rem;
  }

  .content {
    margin-left: 0;
    /* Let content size to its own page instead of always filling the
       viewport — otherwise a shorter section (like the strip below)
       leaves dead space at the bottom of the page. */
    min-height: 0;
  }

  .hero {
    height: 70vh;
  }

  .bio {
    padding: 3rem 1.5rem;
  }

  .strip-wrapper {
    height: 70vh;
  }

  .strip-image {
    height: 56vh;
  }
}