/* © 2026 Raúl Vázquez. Visual fidelity overrides for the approved pre-CMS design. */
:root {
  --edge: max(clamp(1.15rem, 3.2vw, 3.25rem), env(safe-area-inset-left));
  --edge-r: max(clamp(1.15rem, 3.2vw, 3.25rem), env(safe-area-inset-right));
  --edge-t: max(clamp(1rem, 2.8vw, 2.75rem), env(safe-area-inset-top));
  --edge-b: max(clamp(1rem, 2.8vw, 2.75rem), env(safe-area-inset-bottom));
}

/* Landing carousel — editorial hard cuts, no dissolve/fade between media. */
.media-slide {
  transition: none;
}

/* Primary identity/navigation — slightly larger and clearer on larger screens. */
.site-header {
  z-index: 80;
}
.site-name {
  font-size: clamp(.82rem, 1vw, 1rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .01em;
  color: var(--cream);
  white-space: nowrap;
}
.site-nav {
  gap: 0;
  flex-wrap: nowrap;
}
.site-nav__link {
  font-size: clamp(.80rem, .96vw, .96rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: rgba(242, 238, 229, .94);
  white-space: nowrap;
}
.site-nav__link.is-active {
  color: var(--cream);
}
.site-nav__link + .site-nav__link::before {
  content: "/";
  display: inline-block;
  margin: 0 .62em;
  color: var(--cream-soft);
  font-weight: 400;
  letter-spacing: 0;
  pointer-events: none;
}
/* Spanish uses the shorter editorial label while preserving the underlying i18n key. */
html[lang="es"] .site-nav__link[data-i18n="work"] {
  font-size: 0;
}
html[lang="es"] .site-nav__link[data-i18n="work"]::after {
  content: "trabajo";
  font-size: clamp(.80rem, .96vw, .96rem);
}
.language-switcher {
  font-size: clamp(.66rem, .78vw, .78rem);
  gap: .48rem;
}
.social-links {
  font-size: clamp(.76rem, .9vw, .9rem);
  gap: .48rem;
}
.copyright {
  font-size: clamp(.56rem, .64vw, .66rem);
  font-weight: 400;
  line-height: 1.35;
  opacity: .48;
}

/* On scrolling pages the copyright belongs to the real end of the page,
   instead of floating over gallery imagery. */
.work-shell,
.project-shell,
.about-shell {
  position: relative;
}
.work-page .copyright,
.project-page .copyright,
.about-page .copyright {
  position: absolute;
  z-index: 60;
  left: 50%;
  right: auto;
  bottom: var(--edge-b);
  width: max-content;
  max-width: calc(100% - (2 * var(--edge)));
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

/* Selected Work navigation — return both levels to the left and to normal flow. */
.work-filters,
.work-filters--project {
  position: relative;
  z-index: 50;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: 70rem;
  margin: clamp(5.8rem, 7.2vw, 6.8rem) var(--edge-r) 0 var(--edge);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: .35rem 0;
  font-size: clamp(.79rem, .92vw, .94rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .01em;
}
.work-filter + .work-filter::before {
  content: "/";
  display: inline-block;
  margin: 0 .5em;
  color: var(--cream-soft);
  font-weight: 400;
  pointer-events: none;
}

.photo-subfilters {
  position: relative;
  z-index: 50;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: 70rem;
  margin: .65rem var(--edge-r) 0 calc(var(--edge) + clamp(.9rem, 1.55vw, 1.65rem));
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: baseline;
  gap: .35rem 0;
  font-size: clamp(.79rem, .92vw, .94rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .01em;
}
.photo-subfilter + .photo-subfilter::before {
  content: "/";
  display: inline-block;
  margin: 0 .5em;
  color: var(--cream-soft);
  font-weight: 400;
  pointer-events: none;
}

/* Since the filters are back in normal flow, content no longer needs the large CMS top offset. */
.work-content {
  padding: clamp(1.9rem, 3.2vw, 3.1rem) var(--edge-r) 7rem var(--edge);
}
.photo-category {
  padding: clamp(1.65rem, 2.7vw, 2.6rem) var(--edge-r) 7rem var(--edge);
}
.project {
  padding: clamp(1.45rem, 2.45vw, 2.3rem) var(--edge-r) 7.2rem var(--edge);
}
.photo-project {
  padding-top: clamp(1.75rem, 2.8vw, 2.6rem);
}

/* Restore the slightly larger secondary text used in the approved design. */
.work-card__meta,
.photo-directory__meta {
  font-size: clamp(.80rem, .92vw, .94rem);
  line-height: 1.5;
  font-weight: 400;
}
.photo-category__eyebrow {
  font-size: clamp(.84rem, .95vw, .98rem);
}
.photo-category__note {
  font-size: clamp(.80rem, .92vw, .94rem);
}
.about__bio {
  font-size: clamp(.92rem, 1.08vw, 1.08rem);
  line-height: 1.82;
  font-weight: 400;
}
.about-contact__label {
  font-size: clamp(.76rem, .88vw, .88rem);
}
.about-contact__email {
  font-size: clamp(.90rem, 1.04vw, 1.04rem);
}
.about-contact__note {
  font-size: clamp(.76rem, .88vw, .88rem);
}

/* The top blur sits above scrolling content (including both filter levels)
   but below the fixed primary header, so the filters blur naturally as they pass behind it. */
.work-page .edge-blur--top,
.project-page .edge-blur--top,
.about-page .edge-blur--top {
  z-index: 70;
  top: -10px;
  height: 14rem;
  -webkit-mask-image: linear-gradient(180deg,
    #000 0%, rgba(0,0,0,.92) 9%, rgba(0,0,0,.72) 18%,
    rgba(0,0,0,.48) 27%, rgba(0,0,0,.26) 33%,
    rgba(0,0,0,.11) 37%, rgba(0,0,0,.035) 40%,
    transparent 42%, transparent 100%);
  mask-image: linear-gradient(180deg,
    #000 0%, rgba(0,0,0,.92) 9%, rgba(0,0,0,.72) 18%,
    rgba(0,0,0,.48) 27%, rgba(0,0,0,.26) 33%,
    rgba(0,0,0,.11) 37%, rgba(0,0,0,.035) 40%,
    transparent 42%, transparent 100%);
  transform: translate3d(0,0,0);
}

@media (max-width: 720px) {
  :root {
    --edge: max(1.15rem, env(safe-area-inset-left));
    --edge-r: max(1.15rem, env(safe-area-inset-right));
    --edge-t: max(1rem, env(safe-area-inset-top));
    --edge-b: max(1rem, env(safe-area-inset-bottom));
  }

  /* Keep the top bar on one line in every language. */
  .site-header {
    gap: .7rem;
  }
  .site-name {
    flex: 0 0 auto;
    font-size: clamp(.70rem, 2.75vw, .78rem);
  }
  .site-nav {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .site-nav__link {
    font-size: clamp(.68rem, 2.65vw, .76rem);
    letter-spacing: -.018em;
  }
  html[lang="es"] .site-nav__link[data-i18n="work"]::after {
    font-size: clamp(.68rem, 2.65vw, .76rem);
  }
  .site-nav__link + .site-nav__link::before {
    margin: 0 .44em;
  }

  .work-filters,
  .work-filters--project {
    margin-top: 5.8rem;
    padding-right: 2vw;
    font-size: clamp(.74rem, 2.9vw, .86rem);
  }
  .photo-subfilters {
    margin-left: calc(var(--edge) + .72rem);
    font-size: clamp(.76rem, 3.05vw, .88rem);
  }
  .work-content {
    padding-top: 1.8rem;
    padding-bottom: 6rem;
  }
  .photo-category {
    padding-top: 1.8rem;
    padding-bottom: 6rem;
  }
  .project {
    padding-top: 1.65rem;
    padding-bottom: 6rem;
  }
  .photo-project {
    padding-top: 1.8rem;
  }
  .about__bio {
    font-size: clamp(.86rem, 3.55vw, 1rem);
    line-height: 1.82;
  }
  .about-contact__email {
    font-size: clamp(.86rem, 3.45vw, 1rem);
  }
}

@media (max-width: 470px) {
  .site-name { font-size: .68rem; }
  .site-nav__link { font-size: .68rem; }
  html[lang="es"] .site-nav__link[data-i18n="work"]::after { font-size: .68rem; }
  .site-nav__link + .site-nav__link::before { margin: 0 .38em; }
  .work-filters,
  .work-filters--project {
    font-size: .74rem;
    gap: .28rem 0;
  }
  .photo-subfilters {
    margin-left: calc(var(--edge) + .52rem);
    font-size: .74rem;
    gap: .28rem 0;
  }
  .work-filter + .work-filter::before,
  .photo-subfilter + .photo-subfilter::before {
    margin: 0 .42em;
  }
  .language-switcher { font-size: .64rem; gap: .34rem; }
  .social-links { font-size: .72rem; gap: .34rem; }
  .copyright { font-size: .52rem; }
}

@media (max-width: 360px) {
  .site-name { font-size: .62rem; }
  .site-nav__link { font-size: .62rem; }
  html[lang="es"] .site-nav__link[data-i18n="work"]::after { font-size: .62rem; }
  .site-nav__link + .site-nav__link::before { margin: 0 .32em; }
}