@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500&display=swap');

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #1a1a1a;
  font-family: 'Manrope', sans-serif;
}

/* ---------- Nav (same on every page) ---------- */

.site-nav {
  position: fixed;
  top: 42px;
  left: 36px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.site-nav a {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  line-height: 17px;
  font-weight: 400;
  color: #1a1a1a;
  text-decoration: none;
  margin-bottom: 3px;
  position: relative;
  width: fit-content;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0%;
  height: 1px;
  background: #1a1a1a;
  transition: width 0.2s ease;
}

.site-nav a:hover::after {
  width: 100%;
}

.site-nav a.active {
  font-weight: 500;
}

/* ---------- Footer ---------- */

.site-footer {
  position: fixed;
  left: 36px;
  bottom: 31px;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  line-height: 17px;
  color: #1a1a1a;
  z-index: 10;
}

.site-footer a {
  color: #1a1a1a;
  text-decoration: none;
  position: relative;
}

.site-footer a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0%;
  height: 1px;
  background: #1a1a1a;
  transition: width 0.2s ease;
}

.site-footer a:hover::after {
  width: 100%;
}

/* footer variant for the About page: four items spread across the bottom row */
.site-footer.about-footer {
  left: 0;
  right: 0;
  bottom: 31px;
  display: flex;
}

.about-footer span,
.about-footer a {
  position: absolute;
}

.about-footer .f-copy   { left: 36px; }
.about-footer .f-email  { left: 28.6%; }
.about-footer .f-insta  { left: 63%; }
.about-footer .f-linked { left: 90.2%; }

/* ---------- Home page ---------- */

.home-page {
  min-height: 100vh;
}

/* ---------- Photography page ---------- */

.photo-scroll {
  padding-top: 42px;
  padding-left: 235px;
  padding-right: 40px;
  padding-bottom: 120px;
  min-height: 100vh;
}

.photo-scroll img {
  display: block;
  width: 780px;
  height: auto; /* crop each photo to 780px wide yourself before uploading — height follows naturally */
  background: #eeeeee; /* shows while a real photo loads, or as a placeholder */
  margin-bottom: 15px;
}

/* ---------- About page ---------- */

.about-content {
  position: absolute;
  top: 42px;
  right: 36px;
  text-align: right;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  line-height: 24px;
  color: #1a1a1a;
}

.about-content .block {
  margin-bottom: 46px;
}

.about-content .block p {
  margin: 0;
}

/* ===================================================================
   Posters page — same scrolling stack as Photography, fixed 780x1104
   =================================================================== */

.poster-scroll {
  padding-top: 42px;
  padding-left: 235px;
  padding-right: 40px;
  padding-bottom: 120px;
  min-height: 100vh;
}

.poster-scroll img {
  display: block;
  width: 780px;
  height: 1104px;
  object-fit: cover;
  background: #eeeeee;
  margin-bottom: 15px;
}

/* ===================================================================
   Overview list pages — Branding / Web / Exhibitions
   Each row = a thumbnail + its project title (one text per project).
   Row width is set per page (580 for branding/web, 780 for exhibitions)
   via a modifier class, so the title gap works either way.
   =================================================================== */

.project-list {
  padding-top: 42px;
  padding-left: 235px;
  padding-right: 40px;
  padding-bottom: 120px;
  min-height: 100vh;
}

.project-row {
  position: relative;
  margin-bottom: 15px;
}

.project-row.size-580 { width: 580px; height: 400px; }
.project-row.size-780 { width: 780px; height: 490px; }

.project-thumb {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.project-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the second image fades in on hover — "the picture changes" */
.project-thumb .thumb-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-thumb:hover .thumb-hover {
  opacity: 1;
}

/* title sits bottom-right of the rectangle, 32px gap — same as Print/Music */
.project-title {
  position: absolute;
  left: calc(100% + 32px);
  bottom: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  line-height: 17px;
  color: #1a1a1a;
  white-space: nowrap;
}

/* ===================================================================
   Slider — the 780x490 (or custom size) image carousel used on
   Branding/Web/Exhibitions detail pages and inline on Print/Music.
   =================================================================== */

.media-row {
  position: relative;
  margin-bottom: 30px;
}

.media-row.w780 { width: 780px; height: 490px; }
.media-row.w500 { width: 700px; height: 700px; }


.slider {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #eeeeee;
}

.slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.4s ease;
}

.slider-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* arrows: sit to the right of the rectangle, vertically centered */
.row-arrows {
  position: absolute;
  left: calc(100% + 32px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 14px;
}

.row-arrows button {
  all: unset;
  cursor: pointer;
  font-family: 'Manrope', sans-serif;
  font-size: 18px;
  line-height: 1;
  color: #1a1a1a;
}

/* caption used on Print / Music rows: same 32px gap, bottom-aligned */
.row-title {
  position: absolute;
  left: calc(100% + 32px);
  bottom: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  line-height: 17px;
  color: #1a1a1a;
  white-space: normal;
}

/* ===================================================================
   Detail pages — Branding project / Web project / Exhibitions project
   Title + description sit in normal flow BELOW the rectangle+arrows.
   =================================================================== */

.detail-title {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 17px;
  text-transform: uppercase;
  color: #1a1a1a;
  margin: 0 0 40px 0px;
}

.detail-title a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

.detail-title a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0%;
  height: 1px;
  background: #1a1a1a;
  transition: width 0.2s ease;
}

.detail-title a:hover::after { width: 100%; }

.detail-text {
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 15px;
  color: #1a1a1a;
  max-width: 780px;
  white-space: pre-line;
}
.row-title a {
  color: inherit;
  text-decoration: none;
}

.row-title a:hover {
  opacity: 0.7;
}

/* ===================================================================
   Mobile nav — hamburger button + full-screen white menu overlay.
   Hidden by default; switched on for narrow screens in the breakpoint
   below. Built once in JS from the existing .site-nav links, so it
   always matches whatever pages/order you have there.
   =================================================================== */

.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 28px;
  left: 14px;
  z-index: 60;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.mobile-nav-toggle .dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1a1a1a;
}

/* on Photography/Posters, switch to white + exclusion so it always
   contrasts against whatever photo is behind it */
.mobile-nav-toggle.blend-icon .dot {
  background: #ffffff;
  mix-blend-mode: exclusion;
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 100;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 24px;
  overflow-y: auto;
}

.mobile-nav-overlay.open {
  display: flex;
}

.mobile-nav-close {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  line-height: 1;
  color: #1a1a1a;
  cursor: pointer;
}

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 24px 0 auto 0;
}

.mobile-nav-links a {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  line-height: 22px;
  color: #1a1a1a;
  text-decoration: none;
  position: relative;
  width: fit-content;
}

.mobile-nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0%;
  height: 1px;
  background: #1a1a1a;
  transition: width 0.2s ease;
}

.mobile-nav-links a:active::after {
  width: 100%;
}

.mobile-nav-footer {
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  line-height: 17px;
  color: #1a1a1a;
}

body.mobile-nav-locked {
  overflow: hidden;
}

/* ===================================================================
   Lightbox — tap a Photography/Poster image to see it in full.
   =================================================================== */

.photo-scroll img,
.poster-scroll img {
  cursor: zoom-in;
}

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 200;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.open {
  display: flex;
}

.lightbox-overlay img {
  max-width: 92%;
  max-height: 92%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: default;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  border: none;
  background: none;
  padding: 8px;
  color: #ffffff;
  font-family: 'Manrope', sans-serif;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  z-index: 210;
}

/* ===================================================================
   MOBILE BREAKPOINT
   =================================================================== */

@media (max-width: 768px) {

/* Ensure strict size & placement uniformity for ©yavrhs across mobile pages */
  .site-footer,
  .mobile-nav-footer {
    position: fixed !important;
    left: 24px !important;
    bottom: 24px !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 17px !important;
    line-height: 17px !important;
    font-weight: 400 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 150 !important; /* Kept above content and mobile menu */
  }

  /* Keep About Page stacked exception layout intact if needed */
  .site-footer.about-footer {
    position: static !important;
    padding: 0 24px 40px !important;
  }

  /* --- nav: sidebar becomes the hamburger + overlay --- */
  .site-nav { display: none; }
  .mobile-nav-toggle { display: flex; }

  /* Hide footer on mobile by default (hides on Print, Web, Branding, Music, Exhibitions) */
  .site-footer { 
    display: none; 
  }

  /* Show footer ONLY on Home, Photography, Posters, and inside the Mobile Menu */
  .home-page ~ .site-footer,
  .photo-scroll ~ .site-footer,
  .poster-scroll ~ .site-footer,
  .mobile-nav-overlay .site-footer,
  .mobile-nav-footer {
    display: block;
  }

  /* on Photography/Posters, the copyright sits directly on top of a
     photo — give it the same auto-contrasting exclusion treatment */
  .site-footer.blend-icon a {
    color: #ffffff;
    mix-blend-mode: exclusion;
  }

  .site-footer.blend-icon a::after {
    background: #ffffff;
    mix-blend-mode: exclusion;
  }

  /* --- Photography & Posters: no white space at the top at all —
     each image fills a full 9:16 screen edge-to-edge, no gap between
     them. The nav circle and copyright sit on top with the exclusion
     blend below, so nothing needs to be cleared for them. --- */
  .photo-scroll,
  .poster-scroll {
    padding: 0;
  }

  .photo-scroll img,
  .poster-scroll img {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    object-fit: cover;
    margin-bottom: -2px; /* Overlaps images by 1px to cover rounding seams */
  }

  /* --- Branding / Web / Exhibitions / Print / Music: same aspect
     ratio as desktop, just scaled to fit the screen, centered --- */
  .project-list {
    padding: 84px 20px 60px;
  }

  .project-row,
  .media-row {
    width: 100% !important;
    height: auto !important;
  }

  .project-row.size-580 { aspect-ratio: 580 / 400; }
  .project-row.size-780 { aspect-ratio: 780 / 490; }
  .media-row.w780 { aspect-ratio: 780 / 490; }
  .media-row.w500 { aspect-ratio: 1 / 1; }

  /* overview title: underneath the rectangle instead of beside it */
  .project-title {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: 10px;
    white-space: normal;
  }

  /* Print/Music caption underneath, same as desktop's spacing logic
     but stacked instead of to the side */
  .row-title {
    position: static;
    left: auto;
    bottom: auto;
    margin-top: 16px;
  }

  /* arrows become a white overlay on the image itself, tap or swipe */
  .row-arrows {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    pointer-events: none;
  }

  .row-arrows button {
    pointer-events: auto;
    color: #ffffff;
    font-size: 22px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
  }

  .detail-text { max-width: 100%; }

  /* --- About page: stack everything, left-aligned --- */
  .about-content {
    position: static;
    text-align: left;
    padding: 84px 24px 40px;
  }

  .site-footer.about-footer {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 24px 40px;
  }

  .about-footer span,
  .about-footer a {
    position: static;
    left: auto !important;
  }
}