/* © 2026 Raúl Vázquez. All rights reserved. */
:root {
  --inknut: "Inknut Antiqua", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --cream: #f2eee5;
  --cream-muted: rgba(242, 238, 229, 0.84);
  --cream-soft: rgba(242, 238, 229, 0.62);
  --bg: #0c0d0e;
  --edge: max(1.45rem, env(safe-area-inset-left));
  --edge-r: max(1.45rem, env(safe-area-inset-right));
  --edge-t: max(1.25rem, env(safe-area-inset-top));
  --edge-b: max(1.18rem, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--cream); }
body { font-family: var(--inknut); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

.site-header { position: fixed; z-index: 50; inset: var(--edge-t) var(--edge-r) auto var(--edge); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.site-name, .site-nav { pointer-events: auto; }
.site-name { font: 500 clamp(.76rem, .92vw, .9rem)/1.4 var(--inknut); letter-spacing: .01em; }
.site-nav { display: flex; gap: clamp(.8rem, 1.4vw, 1.4rem); align-items: baseline; }
.site-nav__link { font: 400 clamp(.66rem, .76vw, .77rem)/1.4 var(--inknut); color: var(--cream-muted); transition: color .16s ease; }
.site-nav__link:not(.is-active):hover { color: var(--cream); }
.site-nav__link.is-active { font-weight: 600; color: var(--cream); }

.language-switcher, .social-links, .copyright { position: fixed; z-index: 60; bottom: var(--edge-b); margin: 0; }
.language-switcher { left: var(--edge); display: flex; gap: .38em; align-items: center; }
.social-links { right: var(--edge-r); display: flex; gap: .38em; align-items: center; }
.copyright { left: 50%; transform: translateX(-50%); white-space: nowrap; font: 300 .68rem/1.2 var(--sans); letter-spacing: .015em; color: var(--cream-soft); pointer-events: none; }
.language-switcher, .social-links { font: 500 .71rem/1.2 var(--inknut); }
.language-switcher__link, .social-links a { color: var(--cream-muted); transition: color .16s ease; }
.language-switcher__link:hover, .social-links a:hover { color: var(--cream); }
.language-switcher__link.is-active { color: var(--cream); }
.language-switcher__separator, .social-links__separator { color: var(--cream-soft); }

.edge-blur { position: fixed; z-index: 40; left: 0; right: 0; pointer-events: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.edge-blur--top { top: -20px; height: 150px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.95) 13%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.3) 57%, rgba(0,0,0,.08) 74%, transparent 90%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.95) 13%, rgba(0,0,0,.72) 32%, rgba(0,0,0,.3) 57%, rgba(0,0,0,.08) 74%, transparent 90%); }
.edge-blur--bottom { bottom: -20px; height: 130px; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.14) 70%, transparent 92%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.92) 14%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.14) 70%, transparent 92%); }

/* LANDING */
.landing { min-height: 100svh; overflow: hidden; position: relative; background: #080808; }
.media-carousel, .media-slide { position: absolute; inset: 0; }
.media-slide { margin: 0; opacity: 0; transition: opacity .85s ease; }
.media-slide.is-active { opacity: 1; }
.media-slide img, .media-slide video { width: 100%; height: 100%; object-fit: cover; }
.media-slide--crop-left img, .media-slide--crop-left video { object-position: 25% center; }
.media-slide--crop-right img, .media-slide--crop-right video { object-position: 75% center; }
.scrim { position: absolute; inset: 0; pointer-events: none; background: rgba(0,0,0,.035); }
.carousel-hit { position: absolute; z-index: 10; top: 12%; bottom: 12%; width: 25%; border: 0; background: transparent; cursor: pointer; }
.carousel-hit--prev { left: 0; } .carousel-hit--next { right: 0; }

/* WORK */
.work-page, .project-page, .about-page { background: var(--bg); }
.work-shell, .project-shell, .about-shell { min-height: 100svh; }
.work-filters { position: fixed; z-index: 50; top: calc(var(--edge-t) + 2.22rem); right: var(--edge-r); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .38rem .86rem; max-width: min(80vw, 58rem); font: 300 clamp(.77rem, .86vw, .88rem)/1.4 var(--sans); }
.work-filter { color: var(--cream-muted); transition: color .16s ease; }
.work-filter:not(.is-active):hover { color: var(--cream); }
.work-filter.is-active { color: var(--cream); font-weight: 500; }
.photo-subfilters { display: none; }
.photo-subfilters.is-visible, .photo-subfilters--page { display: flex; }
.photo-subfilters { position: fixed; z-index: 50; top: calc(var(--edge-t) + 4rem); right: calc(var(--edge-r) + 1.15rem); flex-wrap: wrap; justify-content: flex-end; gap: .35rem .78rem; max-width: min(76vw, 54rem); font: 300 clamp(.76rem, .84vw, .86rem)/1.4 var(--sans); }
.photo-subfilter { color: var(--cream-muted); transition: color .16s ease; }
.photo-subfilter:hover { color: var(--cream); }
.photo-subfilter.is-active { color: var(--cream); font-weight: 500; }

.work-content { padding: clamp(9rem, 13vh, 11rem) var(--edge-r) 7rem var(--edge); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.4rem, 5vw, 5.5rem) clamp(1.1rem, 2.3vw, 2.2rem); }
.work-card { min-width: 0; }
.work-card__image { aspect-ratio: 16/9; width: 100%; object-fit: cover; background: #151719; }
.work-card__meta { display: flex; justify-content: space-between; gap: 1rem; margin-top: .74rem; font: 300 clamp(.78rem, .86vw, .88rem)/1.5 var(--sans); color: var(--cream-muted); }
.work-card__title { color: var(--cream); font-weight: 400; }

.photo-directory { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.4rem, 5vw, 5.5rem) clamp(1.1rem, 2.3vw, 2.2rem); }
.photo-directory.is-visible { display: grid; }
.photo-directory__card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.photo-directory__meta { margin-top: .74rem; font: 300 clamp(.78rem, .86vw, .88rem)/1.5 var(--sans); color: var(--cream); }

/* PHOTO CATEGORY / GALLERY */
.photo-category { padding: clamp(10.6rem, 15vh, 12.2rem) var(--edge-r) 7rem var(--edge); }
.photo-category__intro { margin-bottom: clamp(1.6rem, 3vw, 2.8rem); }
.photo-category__eyebrow { margin: 0; font: 500 clamp(.84rem, .95vw, .98rem)/1.4 var(--sans); text-transform: lowercase; }
.photo-category__note { margin: .3rem 0 0; max-width: 34rem; font: 300 clamp(.78rem, .86vw, .9rem)/1.55 var(--sans); color: var(--cream-muted); }

.photo-masonry { --cols: 12; display: grid; grid-template-columns: repeat(var(--cols), minmax(0,1fr)); grid-auto-flow: dense; grid-auto-rows: 7px; gap: clamp(.55rem, .95vw, .9rem); }
.photo-tile { margin: 0; overflow: hidden; cursor: zoom-in; position: relative; background: #151719; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; }
.photo-tile[data-ratio="portrait"] { grid-column: span 4; grid-row: span 62; }
.photo-tile[data-ratio="landscape"] { grid-column: span 6; grid-row: span 36; }
.photo-tile[data-ratio="cinema"] { grid-column: span 8; grid-row: span 29; }
.photo-gallery-page--landscape .photo-tile[data-ratio="portrait"] { grid-column: span 3; grid-row: span 61; }
.photo-gallery-page--landscape .photo-tile[data-ratio="landscape"] { grid-column: span 6; grid-row: span 34; }
.photo-gallery-page--landscape .photo-tile[data-ratio="cinema"] { grid-column: span 9; grid-row: span 32; }
.photo-gallery-page--portrait .photo-tile[data-ratio="portrait"] { grid-column: span 4; grid-row: span 66; }
.photo-gallery-page--portrait .photo-tile[data-ratio="landscape"] { grid-column: span 8; grid-row: span 39; }
.photo-gallery-page--portrait .photo-tile[data-ratio="cinema"] { grid-column: span 12; grid-row: span 35; }
.photo-masonry--project .photo-tile[data-ratio="portrait"] { grid-column: span 4; grid-row: span 63; }
.photo-masonry--project .photo-tile[data-ratio="landscape"] { grid-column: span 6; grid-row: span 36; }
.photo-masonry--project .photo-tile[data-ratio="cinema"] { grid-column: span 8; grid-row: span 29; }

/* LIGHTBOX */
.gallery-lightbox { position: fixed; z-index: 200; inset: 0; display: none; background: rgba(8,9,10,.975); color: var(--cream); }
.gallery-lightbox.is-open { display: block; }
.gallery-lightbox__stage { position: absolute; inset: clamp(3rem, 6vh, 4.5rem) clamp(3.2rem, 6vw, 6.5rem); display: grid; place-items: center; }
.gallery-lightbox__image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.gallery-lightbox__close, .gallery-lightbox__nav { position: absolute; z-index: 2; border: 0; background: transparent; color: var(--cream); cursor: pointer; font-family: var(--sans); }
.gallery-lightbox__close { top: max(1.1rem, env(safe-area-inset-top)); right: max(1.25rem, env(safe-area-inset-right)); font-size: 1.55rem; font-weight: 300; }
.gallery-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 1.4rem; padding: 1.4rem; }
.gallery-lightbox__prev { left: .35rem; } .gallery-lightbox__next { right: .35rem; }
.gallery-lightbox__counter { position: absolute; left: 50%; bottom: max(1.15rem, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; font: 300 .72rem/1.3 var(--sans); letter-spacing: .04em; color: var(--cream-muted); }
body.is-lightbox-open { overflow: hidden; }

/* PROJECT */
.work-filters--project { top: calc(var(--edge-t) + 2.22rem); }
.project { padding: clamp(9rem, 13vh, 11rem) var(--edge-r) 7.2rem var(--edge); }
.photo-project { padding-top: clamp(11.8rem, 17vh, 14rem); }
.project-intro { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2rem; align-items: end; margin-bottom: clamp(1.8rem, 3vw, 2.9rem); }
.project-kicker { margin: 0 0 .32rem; font: 300 clamp(.79rem, .88vw, .9rem)/1.5 var(--sans); color: var(--cream-muted); }
.project-title { margin: 0; font: 500 clamp(1.4rem, 2.45vw, 2.45rem)/1.35 var(--inknut); letter-spacing: -.015em; }
.project-meta { display: flex; gap: clamp(2rem, 4vw, 4rem); margin: 0; font-family: var(--sans); }
.project-meta div { min-width: 5.5rem; }
.project-meta dt { font: 300 clamp(.68rem, .76vw, .76rem)/1.4 var(--sans); color: var(--cream-soft); text-transform: lowercase; }
.project-meta dd { margin: .18rem 0 0; font: 400 clamp(.78rem, .86vw, .9rem)/1.45 var(--sans); }
.project-hero { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #151719; }
.project-hero img, .project-hero video, .project-hero iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.project-details { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(15rem,.75fr); gap: clamp(2.5rem, 6vw, 7rem); margin: clamp(2.6rem, 5vw, 5rem) 0; }
.project-details--photo { margin-top: 0; }
.project-description { margin: 0; max-width: 48rem; font: 300 clamp(.88rem, .97vw, 1rem)/1.72 var(--sans); color: var(--cream-muted); white-space: pre-line; }
.project-credits { margin: 0; display: grid; gap: .8rem; }
.project-credit { display: grid; grid-template-columns: minmax(6rem,.55fr) 1fr; gap: .8rem; font-family: var(--sans); }
.project-credit dt { color: var(--cream-soft); font: 300 clamp(.72rem, .8vw, .8rem)/1.45 var(--sans); }
.project-credit dd { margin: 0; font: 400 clamp(.78rem, .86vw, .88rem)/1.45 var(--sans); }
.project-stills { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: clamp(.65rem, 1vw, 1rem); }
.project-stills figure { margin: 0; }
.project-stills figure:first-child { grid-column: 1/-1; }
.project-stills img { width: 100%; height: auto; }
.project-pagination { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem; margin-top: clamp(4rem, 8vw, 8rem); font-family: var(--sans); }
.project-pagination__link { display: flex; flex-direction: column; gap: .2rem; color: var(--cream-muted); transition: color .16s ease; }
.project-pagination__link:hover { color: var(--cream); }
.project-pagination__link span { font: 300 .72rem/1.4 var(--sans); }
.project-pagination__link strong { font: 400 clamp(.88rem,1vw,1.05rem)/1.45 var(--sans); }
.project-pagination__link--next { text-align: right; }

/* ABOUT */
.about-shell { min-height: 100svh; }
.about { min-height: 100svh; display: grid; grid-template-columns: minmax(11.5rem, .62fr) minmax(20rem, 1.15fr); justify-content: center; align-content: center; align-items: center; gap: clamp(2rem, 5vw, 4.8rem); max-width: 61rem; margin: 0 auto; padding: clamp(5.8rem, 11vh, 7.8rem) var(--edge-r) clamp(5.2rem, 9vh, 6.5rem) var(--edge); }
.about__photo-wrap { display: flex; justify-content: flex-end; }
.about__photo { width: min(100%, 15.75rem); max-height: min(59vh, 31rem); object-fit: cover; }
.about__content { width: min(100%, 34rem); }
.about__bio { font: 300 clamp(.91rem, 1vw, 1.02rem)/1.72 var(--sans); color: var(--cream-muted); white-space: pre-line; }
.about__bio p { margin: 0 0 .78rem; }
.about__bio p:last-child { margin-bottom: 0; }
.about-contact { margin-top: 1.05rem; font-family: var(--sans); }
.about-contact__label { margin: 0 0 .28rem; color: var(--cream-soft); font: 300 .73rem/1.4 var(--sans); }
.about-contact__email { display: inline-block; font: 400 clamp(.88rem, .98vw, 1rem)/1.45 var(--sans); color: var(--cream-muted); transition: color .16s ease; }
.about-contact__email:hover { color: var(--cream); }
.about-contact__note { margin: .25rem 0 0; font: 300 clamp(.79rem, .87vw, .89rem)/1.55 var(--sans); color: var(--cream-soft); }

@media (max-width: 900px) {
  .work-grid, .photo-directory { grid-template-columns: 1fr; }
  .work-content { padding-top: 10rem; }
  .photo-masonry { --cols: 8; }
  .photo-tile[data-ratio="portrait"], .photo-gallery-page--portrait .photo-tile[data-ratio="portrait"], .photo-gallery-page--landscape .photo-tile[data-ratio="portrait"], .photo-masonry--project .photo-tile[data-ratio="portrait"] { grid-column: span 4; grid-row: span 60; }
  .photo-tile[data-ratio="landscape"], .photo-gallery-page--portrait .photo-tile[data-ratio="landscape"], .photo-gallery-page--landscape .photo-tile[data-ratio="landscape"], .photo-masonry--project .photo-tile[data-ratio="landscape"] { grid-column: span 8; grid-row: span 38; }
  .photo-tile[data-ratio="cinema"], .photo-gallery-page--portrait .photo-tile[data-ratio="cinema"], .photo-gallery-page--landscape .photo-tile[data-ratio="cinema"], .photo-masonry--project .photo-tile[data-ratio="cinema"] { grid-column: span 8; grid-row: span 31; }
  .project-details { grid-template-columns: 1fr; gap: 2.2rem; }
  .about { max-width: 50rem; grid-template-columns: minmax(10rem,.52fr) minmax(18rem,1fr); gap: clamp(1.5rem,4vw,3rem); }
  .about__photo { width: min(100%, 14rem); }
}

@media (max-width: 680px) {
  :root { --edge: max(1rem, env(safe-area-inset-left)); --edge-r: max(1rem, env(safe-area-inset-right)); --edge-t: max(.9rem, env(safe-area-inset-top)); --edge-b: max(.85rem, env(safe-area-inset-bottom)); }
  .site-header { gap: 1rem; }
  .site-nav { gap: .7rem; }
  .work-filters { top: calc(var(--edge-t) + 2rem); left: var(--edge); right: var(--edge-r); justify-content: flex-end; max-width: none; gap: .28rem .62rem; }
  .photo-subfilters { top: calc(var(--edge-t) + 4.05rem); left: calc(var(--edge) + .85rem); right: var(--edge-r); max-width: none; justify-content: flex-end; gap: .26rem .58rem; }
  .work-content { padding-top: 11rem; padding-bottom: 6rem; }
  .photo-category { padding-top: 12rem; padding-bottom: 6rem; }
  .project { padding-top: 10.8rem; padding-bottom: 6rem; }
  .photo-project { padding-top: 13rem; }
  .project-intro { grid-template-columns: 1fr; gap: 1rem; }
  .project-meta { gap: 2rem; }
  .project-stills { grid-template-columns: 1fr; }
  .project-stills figure:first-child { grid-column: auto; }
  .project-pagination { gap: 1rem; }
  .about { min-height: auto; grid-template-columns: 1fr; align-content: start; gap: 1.45rem; padding-top: 6.6rem; padding-bottom: 5.7rem; }
  .about__photo-wrap { justify-content: flex-start; }
  .about__photo { width: clamp(10.5rem, 43vw, 13.5rem); max-height: none; }
  .language-switcher, .social-links { font-size: .66rem; }
  .copyright { font-size: .62rem; }
  .gallery-lightbox__stage { inset: 3.6rem 2.5rem; }
  .gallery-lightbox__nav { padding: .9rem; }
}

@media (max-width: 470px) {
  .site-name { font-size: .68rem; }
  .site-nav__link { font-size: .6rem; }
  .work-filters { font-size: .72rem; top: calc(var(--edge-t) + 1.85rem); }
  .photo-subfilters { font-size: .7rem; top: calc(var(--edge-t) + 4.2rem); left: calc(var(--edge) + .7rem); }
  .work-content { padding-top: 12rem; }
  .photo-category { padding-top: 12.5rem; }
  .project { padding-top: 11.8rem; }
  .photo-project { padding-top: 14rem; }
  .photo-masonry { --cols: 2; grid-auto-rows: auto; gap: .48rem; }
  .photo-tile[data-ratio] { grid-column: span 2 !important; grid-row: auto !important; aspect-ratio: auto; }
  .photo-tile img { height: auto; object-fit: contain; }
  .language-switcher { gap: .22em; }
  .social-links { gap: .22em; }
  .copyright { font-size: .57rem; }
  .gallery-lightbox__stage { inset: 3.4rem 1.1rem; }
  .gallery-lightbox__prev { left: 0; } .gallery-lightbox__next { right: 0; }
}

@media (max-height: 650px) and (min-width: 681px) {
  .about { min-height: 100svh; align-content: center; padding-top: 4.8rem; padding-bottom: 4.7rem; gap: 1.8rem; }
  .about__photo { max-height: 52vh; width: min(100%, 12.8rem); }
  .about__bio { font-size: .84rem; line-height: 1.58; }
  .about-contact { margin-top: .65rem; }
}