/* =========================================================
   Julio Rébora — portfolio
   Todo el sitio usa un solo tamaño (15px; 14px en pantallas chicas), un
   solo peso (TeX Gyre Heros regular) e interlineado ajustado. La
   jerarquía sale del color (negro / gris), los subrayados y el espacio
   en blanco. Header, footer y texto comparten el mismo tipo.
   ========================================================= */

@font-face {
    font-family: 'TeX Gyre Heros';
    src: url('../fonts/texgyreheros-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --m: 13px;         /* margen único: arriba, abajo, izquierda y derecha */
    --margin: 13px;    /* espacio interno chico (entre imágenes, etc.) */
    --fs: 15px;
    --lh: 1.15;        /* texto corrido */
    --lh-ui: 1.3;      /* captions, header, footer */

    /* Alturas de header/footer: el margen --m se mide desde el borde de la
       pantalla hasta la tinta de las letras (no hasta la caja de la línea),
       y el mismo --m separa las letras del strip. 0.729 = altura de
       mayúscula de TeX Gyre Heros, en em. */
    --header-h: calc(var(--m) * 2 + var(--fs) * 0.729);
    --footer-h: calc(var(--m) * 2 + var(--fs) * 0.729);

    --grey: #999;
    --gap: 4px;        /* espacio entre items del strip */
    --strip-h: calc(100vh - var(--header-h) - var(--footer-h));
}

@supports (height: 100svh) {
    :root { --strip-h: calc(100svh - var(--header-h) - var(--footer-h)); }
}

@media (max-width: 600px) {
    :root { --fs: 14px; }
}

@media (max-width: 700px) {
    :root { --strip-h: 70vh; }
    @supports (height: 100svh) {
        :root { --strip-h: 70svh; }
    }
}


/* ---------- reset ---------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font: inherit;           /* nada de negritas/cursivas por defecto */
}

[hidden] { display: none !important; }

html {
    background: #fff;
    color: #000;
    font-family: 'TeX Gyre Heros', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--fs);
    font-weight: normal;
    line-height: var(--lh);
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    background: #fff;
    color: #000;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* enlaces "de contenido": subrayados de entrada, el hover los quita */
.u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.u:hover {
    text-decoration: none;
}

button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

img, video {
    display: block;
}

:focus-visible {
    outline: 1px solid #000;
    outline-offset: 2px;
}

.grey { color: var(--grey); }


/* ---------- header / footer fijos (en todas las páginas) ---------- */

.site-header,
.site-footer {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    gap: 26px;
    padding-left: var(--m);
    padding-right: var(--m);
    background: #fff;
    line-height: var(--lh-ui);
}

.site-header {
    top: 0;
    height: var(--header-h);
    /* 0.346em = distancia de la parte alta de la línea a la parte alta de
       las mayúsculas (regular, line-height 1.3) */
    padding-top: calc(var(--m) - var(--fs) * 0.346);
    align-items: baseline;
}

.site-footer {
    bottom: 0;
    height: var(--footer-h);
    /* 0.25em = distancia de la línea base al borde inferior de la línea
       (regular, line-height 1.3) */
    padding-bottom: calc(var(--m) - var(--fs) * 0.25);
    align-items: flex-end;
}

.site-header nav,
.site-footer nav {
    display: flex;
    gap: 1.2em;
}

/* en las páginas de texto el contenido pasa por debajo: un pequeño
   degradé blanco evita que se pise con el header/footer, sin caja */
body:not(.page-strip) .site-header::after,
body:not(.page-strip) .site-footer::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 14px;
    pointer-events: none;
}

body:not(.page-strip) .site-header::after {
    top: 100%;
    background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}

body:not(.page-strip) .site-footer::before {
    bottom: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
}


/* =========================================================
   HOME — strip horizontal
   ========================================================= */

body.page-strip {
    overflow: hidden;
    height: 100vh;
}

.strip-wrap {
    position: fixed;
    top: var(--header-h);
    bottom: var(--footer-h);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
}

.strip {
    display: flex;
    gap: var(--gap);
    width: 100%;
    height: var(--strip-h);
    max-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

/* cada item: alto completo del strip, ancho = alto × proporción de
   la imagen actual (--ratio). Al cambiar de imagen el ancho se anima */
.strip-item {
    position: relative;
    flex: none;
    display: flex;
    align-items: flex-end;
    height: var(--strip-h);
    max-height: 100%;
    width: calc(var(--strip-h) * var(--ratio, 1.5));
    transition: width 0.3s ease;
}

.strip-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background: #f4f4f4;
}

button.strip-media { cursor: pointer; }

.strip-media img,
.strip-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* caption: caja blanca abajo a la izquierda, pegada al borde visible
   del strip (sticky) para que no se pierda al scrollear */
.caption {
    position: sticky;
    left: 6px;
    z-index: 2;
    flex: 0 1 auto;
    margin: 0 0 6px 6px;
    padding: 8px 10px;
    max-width: min(calc(100% - 12px), calc(100vw - 24px));
    max-height: calc(100% - 12px);
    overflow-y: auto;
    background: #fff;
    line-height: var(--lh-ui);
    scrollbar-width: thin;
}

.caption-line {
    display: block;
}

.caption .count { color: var(--grey); }

.caption .info-btn,
.caption .view-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.caption .info-btn:hover,
.caption .view-link:hover {
    text-decoration: none;
}

.caption .close-btn {
    margin-left: 0.4em;
}

.caption .close-btn:hover {
    text-decoration: underline;
}

.info-table {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
    margin-top: 8px;
}

.info-table dt { color: var(--grey); }
.info-table dd { color: #000; }


/* =========================================================
   PÁGINAS DE TEXTO (proyecto + about)
   Cuatro columnas del 25% cada una (0 · 25% · 50% · 75%):
     1 meta · 2 título + descripción · 3 notas/créditos · 4 enlace a la derecha
   ========================================================= */

.page-text {
    padding: max(9vh, calc(var(--header-h) + 40px)) 0 calc(var(--footer-h) + 40px);
}

.text-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}

.col-meta {
    padding-left: var(--m);
    padding-right: calc(var(--m) * 2);
}

.col-text,
.col-extra {
    padding-right: calc(var(--m) * 2);
}

.col-back {
    grid-column: 4;
    justify-self: end;
    text-align: right;
    padding-right: var(--m);
    line-height: var(--lh);
}

.col-meta p + p,
.col-meta ul + p {
    margin-top: 1.15em;
}

.col-meta li { list-style: none; }

.col-extra .credits,
.col-text .body {
    white-space: pre-line;      /* respeta saltos de línea y líneas en blanco */
}

.col-text .keywords {
    margin-top: 1.15em;
    color: var(--grey);
}

.col-text .title {
    padding-left: 3em;
}

.col-text p + p {
    margin-top: 1.15em;
}

/* la descripción va pegada al título, sin espacio entre ambos */
.col-text .title + p {
    margin-top: 0;
}

/* columna de medios del proyecto: separada del texto por ~4 líneas */
.project-media {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--margin);
    margin-top: 4.4em;
    padding: 0 var(--m);
}

.project-media img,
.project-media video {
    width: 60vw;
    max-width: 100%;
    height: auto;
}

.pager {
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
    padding: 0 var(--m);
}

.not-found {
    grid-column: 1 / -1;
    padding-left: var(--m);
}


/* ---------- about: lista CV etiqueta gris / valor negro ---------- */

.col-meta .contact-line { display: block; }

.cv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 50%;
    margin-top: 6em;
}

.cv .label {
    color: var(--grey);
    padding-left: var(--m);
    padding-right: calc(var(--m) * 2);
}

.cv .value {
    margin-bottom: 1.15em;
    padding-right: calc(var(--m) * 2);
}

.cv .group {
    margin-top: 1.15em;
}

.cv .group-first { margin-top: 0; }

.cv .value.group { margin-bottom: 0; }

.cv .head { margin-bottom: 1.15em; }


/* ---------- blur-up de placeholders ---------- */

img.is-pixel {
    image-rendering: pixelated;
    filter: blur(1px);
}

img.is-sharp {
    image-rendering: auto;
    filter: none;
}

.strip-media img,
.project-media img {
    transition: filter 0.5s ease;
}


/* ---------- cursor de hoja ---------- */

body.custom-cursor-active,
body.custom-cursor-active * {
    cursor: none;
}

#leaf-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    pointer-events: none;
    z-index: 9999;
    /* se invierte sobre fotos oscuras: negro sobre blanco, blanco sobre negro */
    mix-blend-mode: difference;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 800px) {
    .page-text {
        padding-top: calc(var(--header-h) + 8vh);
    }

    /* en pantallas angostas las columnas se apilan: meta, texto, notas, enlace */
    .text-row {
        grid-template-columns: 1fr;
        row-gap: 1.15em;
    }

    .col-meta,
    .col-text,
    .col-extra,
    .col-back {
        grid-column: auto;
        justify-self: start;
        text-align: left;
        padding-left: var(--m);
        padding-right: var(--m);
    }

    .col-extra:empty { display: none; }

    .project-media img,
    .project-media video {
        width: 100%;
    }

    .cv {
        grid-template-columns: calc(8.5em + var(--m)) minmax(0, 1fr);
        width: 100%;
        margin-top: 3em;
    }

    .cv .label,
    .cv .value {
        padding-right: var(--m);
    }
}

@media (max-width: 700px) {
    .strip-wrap {
        align-items: center;
    }

    .caption {
        max-height: calc(var(--strip-h) - 12px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .strip-item { transition: none; }
}