/* Tokens, fuentes, reset y tipografía. Paleta sacada de las fotos del álbum:
   noche azulada (siluetas), hueso (baobab y roca), ámbar (atardecer), bruma (niebla). */

@font-face {
    font-family: "Gloock";
    src: url("../fonts/gloock-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Hanken Grotesk";
    src: url("../fonts/hanken-grotesk-var.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Fallbacks con métricas ajustadas para evitar saltos al cargar la fuente */
@font-face {
    font-family: "Gloock Fallback";
    src: local("Times New Roman"), local("Times");
    size-adjust: 94%;
    ascent-override: 98%;
    descent-override: 26%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Hanken Fallback";
    src: local("Arial"), local("Helvetica");
    size-adjust: 101%;
    ascent-override: 93%;
    descent-override: 25%;
    line-gap-override: 0%;
}

:root {
    --tinta: #111519;
    --tinta-2: #181e24;
    --tinta-3: #232b33;
    --linea: rgb(238 230 216 / 0.16);
    --linea-fuerte: rgb(238 230 216 / 0.34);
    --hueso: #eee6d8;
    --hueso-2: #b9b3a8;
    --ambar: #e5a66b;
    --ambar-2: #f2c593;
    --bruma: #8fa0be;
    --arcilla: #a8693f;

    --f-display: "Gloock", "Gloock Fallback", Georgia, "Times New Roman", serif;
    --f-text: "Hanken Grotesk", "Hanken Fallback", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --gutter: clamp(1rem, 4vw, 3rem);
    --wrap: 84rem;
    --nav-h: 4rem;
    --ease: cubic-bezier(0.2, 0.7, 0.1, 1);

    --t-label: 0.75rem;
    --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --t-lede: clamp(1.05rem, 0.98rem + 0.4vw, 1.3rem);
    --t-h3: clamp(1.45rem, 1.2rem + 0.9vw, 2rem);
    --t-h2: clamp(2.2rem, 1.1rem + 4.2vw, 4.6rem);
    --t-h2-xl: clamp(2.8rem, 0.9rem + 7vw, 7.5rem);

    color-scheme: dark;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--tinta);
    color: var(--hueso);
    font-family: var(--f-text);
    font-size: 100%;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 0.5rem);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--tinta);
    font-size: var(--t-body);
    font-variant-numeric: lining-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style: none;
}

img,
picture,
canvas {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration-color: var(--ambar);
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

a:hover {
    color: var(--ambar-2);
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

::selection {
    background: var(--ambar);
    color: var(--tinta);
}

:focus-visible {
    outline: 2px solid var(--ambar);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.6rem 1rem;
    background: var(--ambar);
    color: var(--tinta);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.skip:focus {
    transform: none;
    color: var(--tinta);
}

/* Tipografía editorial */
.h2 {
    font-family: var(--f-display);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.h2--xl {
    font-size: var(--t-h2-xl);
    line-height: 0.96;
}

.lede {
    font-size: var(--t-lede);
    line-height: 1.5;
    color: var(--hueso-2);
    max-width: 38em;
    text-wrap: pretty;
}

.label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ambar);
}

.label::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: currentColor;
}

.eyebrow {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hueso-2);
}

.num {
    font-variant-numeric: tabular-nums lining-nums;
}

.wrap {
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.noscript {
    padding: 6rem var(--gutter) 2rem;
    color: var(--hueso-2);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
    }
}