/* --- Global reset / base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---- Neue Montreal Font Faces ---- */

/* Light */
@font-face {
  font-family: "NeueMontreal";
  src:
    url("fonts/Neue-montreal/NeueMontreal-Regular.woff2") format("woff2"),
    url("fonts/Neue-montreal/NeueMontreal-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NeueMontreal";
  src:
    url("fonts/Neue-montreal/NeueMontreal-Italic.woff2") format("woff2"),
    url("fonts/Neue-montreal/NeueMontreal-Italic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "NeueMontreal";
  src:
    url("fonts/Neue-montreal/NeueMontreal-Bold.woff2") format("woff2"),
    url("fonts/Neue-montreal/NeueMontreal-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NeueMontreal";
  src:
    url("fonts/Neue-montreal/NeueMontreal-Light.woff2") format("woff2"),
    url("fonts/Neue-montreal/NeueMontreal-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

.view { display: none; }
.view.is-active { display: block; }

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "NeueMontreal", sans-serif;
  background-color: #ffffff;
  color: #000000;
}

/* Disable scrolling only on pages that use .no-scroll */
.no-scroll {
  overflow: hidden;
  height: 100vh;
}

/* --- Header layout (desktop-first) --- */

.site-header {
  padding: 12px 40px;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: transparent;
}

.header-inner {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.logo img {
  width: 320px;
  display: block;
}

/* Desktop nav */

.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.site-nav a {
  font-family: "NeueMontreal", sans-serif;
  font-style: normal;
  text-decoration: none;
  color: #000;
  font-size: 18px;
  text-transform: lowercase;
}

/* --- PORTFOLIO WRAPPER --- */

.portfolio {
  max-width: 1800px;
  width: 100%;
  margin: 80px auto 120px;
  padding: 0 40px;
}

/* --- Shoots spacing --- */
.shoot {
  margin-bottom: clamp(120px, 12vw, 260px);
}

/* --- The new “random but responsive” engine --- */
.shoot-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 2vw, 28px);
  align-items: start;
}

/* Make media behave consistently */
.shoot-grid > img,
.shoot-grid > video {
  width: 100%;
  height: auto;
  display: block;
}

/* Optional nudge: set per item via --x / --y */
.nudge {
  transform:
    translate(
      clamp(-18px, var(--x, 0px), 18px),
      clamp(-28px, var(--y, 0px), 28px)
    );
}

/* ------------------------------ */
/* BOTT placements (12-col grid)  */
/* ------------------------------ */
.bott1 {
  grid-column: 5 / span 4;   /* right side */
  --x: 10px;
  --y: 0px;
 
}

.bott2 {
  grid-column: 9 / span 8;   /* directly next to bott1 */
  --x: 0px;
  --y: 0px;
}

.bott3 {
  grid-column: 1 / span 5; /* furthest left */
  --x: 24px;
  --y: -20px;
  margin-top: clamp(24px, 4vw, 120px);
}

/* ------------------------------ */
/* PAVI placements                */
/* ------------------------------ */
.pavi1 {
  grid-column: 7 / span 6;     /* right-weighted */
  --x: 12px;
  --y: 0px;
}

.pavi2 {
  grid-column: 2 / span 5;     /* left-weighted */
  --x: -10px;
  --y: -18px;                  /* subtle overlap vibe */
}

/* ------------------------------ */
/* JORDANKIDS placements          */
/* ------------------------------ */
.jordankids1 {
  grid-column: 2 / span 4;
  --x: -10px;
  --y: 6px;
}

.jordankids2 {
  grid-column: 5 / span 4;
  --x: 0px;
  --y: -10px;
}

.jordankids3 {
  grid-column: 9 / span 3;
  --x: 12px;
  --y: 12px;
}

/* ------------------------------ */
/* JORDANDESERT placements        */
/* ------------------------------ */
.jd1 {
  grid-column: 1 / span 4;
  grid-row: 1;
}

.jd2 {
  grid-column: 9 / span 4;
  grid-row: 1;
}

/* center stack BETWEEN jd1 + jd2 */
.jd3 {
  grid-column: 5 / span 3;
  grid-row: 1;
}

/* ------------------------------ */
/* JNCO video: “center but a bit right” */
/* ------------------------------ */
.matt1 {
  grid-column: 1 / span 5;   /* left */
}

.jnco-video {
  grid-column: 8 / span 4;
  justify-self: center;
  transform: translateX(clamp(12px, 3vw, 44px));
}

.gqsyd1 {
  grid-column: 7 / span 4; /* right of center */
  grid-row: 1;
}

.alondra1 {
  grid-column: 1 / span 5;
  grid-row: 2;
  margin-top: clamp(-320px, -18vw, -120px);
}

.spur {
  margin-top: clamp(-220px, -10vw, -60px);
}

/* SPUR section: override gap ONLY here */
.spur-grid {
  gap: 0;                 /* no space between the two */
}

/* Bigger, still side-by-side */
.spur1 {
  grid-column: 6 / span 4;
}

.spur2 {
  grid-column: 10 / span 3;
}

/* CULTURED layout */
.cultured-grid {
  overflow: visible; /* allow overlap */
}

/* LEFT — bigger, flush left */
.cultured2 {
  grid-column: 1 / span 6;
  grid-row: 1;
}

/* RIGHT — smaller, overlaps left */
.cultured1 {
  grid-column: 7 / span 4;
  grid-row: 1;
  margin-left: clamp(-80px, -6vw, -40px);
}

/* R29 — off-center right */
.r291 {
  grid-column: 8 / span 4;
  margin-top: clamp(-180px, -10vw, -60px);
}

/* --- Info page layout --- */
.info-page {
  min-height: calc(100vh - 150px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 40px;
}

.info-content {
  text-align: center;
}

.info-description {
  font-family: "NeueMontreal", sans-serif;
  font-style: normal;
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.info-name {
  color: #000000;
  font-family: "NeueMontreal", sans-serif;
  font-style: italic;
  
}

.info-email {
  font-family: "NeueMontreal", sans-serif;
  font-style: italic;
  font-size: 18px;
  text-decoration: none;
  color: #000;
  display: inline-block;
  margin-bottom: 5px;
}

.info-ig {
  display: block;
  text-align: center;
  margin-top: 1px;
  tex
}

.info-ig img {
  width: 10%;
  display: inline-block;
}

/* --- Clients Page --- */

.clients-page {
  max-width: 1400px;
  margin: 120px auto;
  padding: 0 40px;
}

.clients-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: "NeueMontreal", sans-serif;
  font-style: normal;
  font-size: 18px;
  line-height: 1.0;
  text-transform: lowercase;
}

.clients-list li {
  margin-bottom: 4px;
}

/* --- Mobile styles (desktop-like, no overlap, constant spacing) --- */
@media (max-width: 768px) {

  .site-header {
    padding: 0px 20px;
  }

  .logo img {
    height: 100px;
    width: auto;
    margin-top: 10px;
  }

  .portfolio {
    padding: 0 16px;
    margin: 40px auto 80px;
  }

  /* space between sections */
  .shoot {
    margin-bottom: clamp(60px, 10vw, 140px);
  }

  /* KEEP SAME GRID AS DESKTOP */
  .shoot-grid {
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;              /* constant space between ALL images */
  }

  /* NO transforms on mobile = NO overlap ever */
  .shoot-grid > img,
  .shoot-grid > video,
  .nudge {
    transform: none !important;
  }

  /* images scale by grid only */
  .shoot-grid > img,
  .shoot-grid > video {
    width: 100%;
    height: auto;
  }

  /* ---------- GROW DIRECTION CONTROL ---------- */
  /* left item grows LEFT */
  .bott1 {
    justify-self: end;
  }

  /* right item grows RIGHT */
  .bott2 {
    justify-self: start;
  }

  /* ---------- MOBILE SIZE TWEAKS (EDIT THESE) ---------- */

  /* BOTT */
  .bott1 { grid-column: 2 / span 4; }
  .bott2 { grid-column: 6 / span 6; }
  .bott3 { grid-column: 1 / span 6; }

  /* PAVI */
  .pavi1 { grid-column: 6 / span 7; }
  .pavi2 { grid-column: 2 / span 5; }

  /* JORDANKIDS */
  .jordankids1 { grid-column: 1 / span 8; }
  .jordankids2 { grid-column: 6 / span 8; }
  .jordankids3 { grid-column: 2 / span 8; }

  /* JORDANDESERT */
  .jd1 { grid-column: 1 / span 4; }
  .jd2 { grid-column: 9 / span 4; }
  .jd3 { grid-column: 5 / span 4; }

  /* JNCO */
  .jnco-video {
    grid-column: 7 / span 5;
  }

  /* GQSYD — bigger on mobile */
/* GQSYD — bigger on mobile */
.gqsyd1 {
  grid-column: 6 / span 6;
  grid-row: 1;
}

.alondra1 {
  grid-column: 1 / span 7;
  grid-row: 2;
  margin-top: 0;          /* IMPORTANT: removes the overlap on mobile */
}

/* SPUR — bigger on mobile */
.spur1 {
  grid-column: 3 / span 5;  /* cols 3–7 */
}

.spur2 {
  grid-column: 8 / span 5;  /* cols 8–12 */
}

  .r291 {
    grid-column: 7 / span 5;

  /* INFO / CLIENTS */
  .clients-list {
    font-size: 18px;
    line-height: 1.0;
  }

  .info-description,
  .info-email,
  .info-name {
    font-size: 18px;
    line-height: 1.4;
  }

  .info-ig img {
    height: 15%;
  }
}

/* --- Very large screens --- */
@media (min-width: 1200px) {
  .site-header {
    padding-left: 80px;
    padding-right: 80px;
  }
}