@font-face {
   font-family: "Lausanne";
   src: url("../assets/fonts/Lausanne-300.woff2") format("woff2"), url("../assets/fonts/Lausanne-300.woff") format("woff");
   font-weight: 300;
   font-style: normal;
}

:root {
   /* Typography */
   --font-serif: "Times New Roman", Times, serif;
   --font-sans: "Lausanne", Arial, Helvetica, sans-serif;

   /* Font Sizes */
   --font-size-base: 62.5%;
   --font-size-xs: 2.05rem;
   --font-size-sm: 2.2rem;
   --font-size-md: 2.7rem;
   --font-size-lg: 2.8rem;
   --font-size-xl: 3.2rem;

   /* Line Heights */
   --line-height-none: 1.1;
   --line-height-sm: 2rem;
   --line-height-md: 3rem;
   --line-height-lg: 3.2rem;
   --line-height-xl: 1;

   /* Colors */
   --color-primary: #000;
   --color-white: #fff;
   --color-link: #0000ff;

   /* Spacing */
   --space-xs: 0.4rem;
   --space-sm: 1rem;
   --space-md: 1.5rem;
   --space-lg: 2rem;
   --space-xl: 3rem;
   --space-xxl: 4rem;
   --space-3xl: 5rem;

   /* Transitions */
   --transition-fast: 0.2s ease;
   --transition-medium: 0.3s ease;
}

html {
   font-size: var(--font-size-base);
}

body {
   margin: 0;
   padding: 0;
   background: #000;
   color: #fff;
   font-family: var(--font-serif);
   line-height: var(--line-height-none);
   -webkit-font-smoothing: auto;
   letter-spacing: normal;
   overflow: hidden;
   height: 100vh;
}
a {
   text-decoration: underline;
   color: var(--color-link);
}
.noselect {
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.sans {
   font-family: var(--font-sans);
   font-size: var(--font-size-md);
}

p,
h1,
h2 {
   padding: 0;
   margin: 0;
}
h1 {
   font-size: var(--font-size-xl);
   line-height: var(--line-height-xl);
   font-weight: 300;
}

.container {
   display: flex;
   height: 100vh;
}

.thumbnails {
   width: 160px;
   background: #1a1a1a;
   overflow-y: auto;
   flex-shrink: 0;
   -webkit-overflow-scrolling: touch;
}

.thumbnail {
   width: 100%;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   transition: opacity 0.2s;
   overflow: hidden;
   position: relative;
}

.thumbnail img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.thumbnail:hover {
   opacity: 0.75;
   border-color: #fff;
}

.main-content {
   flex: 1;
   overflow-y: auto;
   scroll-behavior: smooth;
}

.bio-section {
   min-height: 50vh;
   display: flex;
   align-items: flex-start;
   background: white;
   color: var(--color-primary);
   /* position: sticky;
   top: 0;
   z-index: -1; */
}

.bio-section > div p:not(:first-of-type) {
   text-indent: var(--space-3xl);
}

.bio-text {
   /* max-width: 48rem; */
   font-size: var(--font-size-lg);
   line-height: var(--line-height-lg);
   font-weight: 300;
}

.gallery {
   display: flex;
   flex-direction: column;
}

.photo-container {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #000;
}

.photo-container.horizontal-container {
   background: transparent;
}

.photo {
   max-height: 100vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   font-weight: 300;
}

.photo img {
   object-fit: contain;
}

/* Imágenes verticales: ajustar al alto disponible */
.photo img.vertical {
   height: 100vh;
   width: auto;
   max-width: 100%;
}

/* Imágenes horizontales: ajustar al ancho disponible */
.photo img.horizontal {
   width: 100%;
   height: 100vh;
   object-fit: cover;
}

/* Safari específico - soporte para aspect-ratio */
@supports not (aspect-ratio: 1) {
   .thumbnail {
      height: 107px; /* Fallback height para aspect ratio ~1.5 */
   }
}

/* Webkit específico para Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
   .thumbnails {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
   }

   .thumbnail {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
   }
}

@media (max-width: 768px) {
   .container {
      flex-direction: column;
   }

   .thumbnails {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 80px;
      overflow-x: auto;
      overflow-y: hidden;
      order: 2;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 100;
      background: #1a1a1a;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
   }

   .thumbnails::-webkit-scrollbar {
      display: none;
   }

   .thumbnail {
      flex-shrink: 0;
      width: auto;
      height: 80px;
      margin-bottom: 0;
      /* min-width: 60px; */
   }

   .thumbnail img {
      width: auto;
      height: 100%;
      max-width: none;
      object-fit: cover;
   }

   /* Safari mobile específico */
   @supports not (aspect-ratio: 1) {
      .thumbnail {
         width: 120px; /* Fixed width para Safari móvil */
      }
   }

   .main-content {
      order: 1;
      margin-bottom: 80px;
   }

   .bio-text {
      font-size: var(--font-size-sm);
      line-height: var(--line-height-xl);
   }

   .sans {
      font-size: var(--font-size-xs);
   }

   /* En móvil, las imágenes mantienen sus proporciones naturales */
   .photo img.vertical,
   .photo img.horizontal {
      width: 100%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
   }

   .photo-container {
      height: auto;
   }

   .photo {
      width: 100%;
      height: auto !important;
      max-height: none;
   }
}