/* ============================================
   NICOLAS SILBERFADEN — DEUX RIVES
   Based on Bryan Schutmaat layout
   ============================================ */

/* --- GLOBAL --- */
body {
  background-color: #ffffff;
  color: #111111;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* --- PAGE CONTAINER --- */
/* Centers content in a single column like Schutmaat */
#page-content,
.content-inner,
[data-layout] {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- NAVIGATION --- */
/* Minimal top nav — name left, links right */
header,
nav,
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #ffffff;
  padding: 18px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Nav links */
nav a,
header a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #111111;
  text-decoration: none;
  letter-spacing: 0.01em;
  margin-left: 24px;
}

nav a:hover,
header a:hover {
  color: #111111;
  text-decoration: none;
  opacity: 0.5;
}

/* Your name / site title */
nav a:first-child,
header a:first-child,
.nav-title a {
  font-weight: 500;
  margin-left: 0;
}

/* --- PAGE TOP PADDING (so content clears the fixed nav) --- */
#main,
main,
.page-content {
  padding-top: 60px;
}

/* --- IMAGES --- */
/* Full width of column, stacked vertically */
img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 4px 0; /* tight gap between images like Schutmaat */
}

/* Remove any default image borders or shadows */
img,
figure {
  border: none;
  box-shadow: none;
  padding: 0;
}

figure {
  margin: 0 0 4px 0;
}

/* --- SPACING BETWEEN IMAGE BLOCKS --- */
/* Schutmaat has very tight spacing — images almost touch */
.content-area img + img {
  margin-top: 4px;
}

/* --- TEXT BLOCKS --- */
/* The prose poem that appears mid-sequence */
p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: #111111;
  max-width: 580px;
  margin: 40px auto 40px auto;
}

/* --- PROJECT TITLE (if any) --- */
h1, h2, h3 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: #111111;
  margin: 0 0 40px 0;
}

/* --- LINKS INSIDE TEXT --- */
a {
  color: #111111;
  text-decoration: none;
}

a:hover {
  opacity: 0.5;
}

/* --- NEXT / PREVIOUS PROJECT LINK --- */
/* The "Next →" link at the bottom like Schutmaat */
.next-project,
.pagination,
[class*="next"],
[class*="prev"] {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #111111;
  text-decoration: none;
  display: block;
  margin: 60px 0 80px 0;
}

.next-project:hover,
.pagination:hover {
  opacity: 0.5;
}

/* --- INDEX / GALLERY LIST PAGE --- */
/* If you have a list of projects on the home page */
.thumbnail-index,
.project-list {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

.thumbnail-index a,
.project-list a {
  display: block;
  font-size: 13px;
  color: #111111;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: none;
}

.thumbnail-index a:hover,
.project-list a:hover {
  opacity: 0.5;
}

/* --- SCROLLBAR --- */
/* Minimal scrollbar to keep the aesthetic clean */
::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  #page-content,
  .content-inner,
  [data-layout] {
    max-width: 100%;
    padding: 0 14px;
  }

  header,
  nav,
  #header {
    padding: 14px 16px;
  }

  #main,
  main,
  .page-content {
    padding-top: 50px;
  }

  p {
    max-width: 100%;
    margin: 30px 0;
  }
}