/* ============================================================
   02 · BASE — reset ligero, tipografía, foco, landmarks
   ============================================================ */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* clip (no hidden): evita el scroll horizontal sin romper position:sticky */
	overflow-x: clip;
}

body.yk-body {
	margin: 0;
	overflow-x: clip;
	background: var(--yk-night);
	color: var(--yk-paper);
	font-family: var(--yk-f-text);
	font-size: var(--yk-type-body);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--yk-f-display);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 var(--yk-s4);
	text-wrap: balance;
}
h1 { font-size: var(--yk-type-h1); }
h2 { font-size: var(--yk-type-h2); }
h3 { font-size: var(--yk-type-h3); font-weight: 700; }

p { margin: 0 0 var(--yk-s4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--yk-paper); text-decoration: none; transition: color var(--yk-t) var(--yk-ease); }
a:hover { color: var(--yk-neon); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* El navegador aplica un margen propio a <figure> (1em 40px) que nadie
   había anulado. En columnas estrechas de móvil, ese margen deja la
   imagen más pequeña que su contenedor y cualquier recorte asimétrico
   de la foto real se ve empujado hacia un lado en vez de centrado. */
figure { margin: 0; }

/* Reserva de espacio: cualquier imagen con width/height evita CLS.
   :where() fuerza especificidad CERO a propósito: es una regla de
   higiene general y NUNCA debe poder ganarle a una clase de
   componente (.yk-logo__img, .yk-card img, etc). Sin :where() esta
   regla vale (0,2,0) y le gana a una sola clase (0,1,0) -- así se
   coló el bug del logo a tamaño completo. */
img:where([width][height]) { height: auto; }

::selection { background: var(--yk-neon); color: #000; }

/* Scrollbar de marca */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #222; border: 3px solid #000; }
::-webkit-scrollbar-thumb:hover { background: var(--yk-neon); }

:focus-visible {
	outline: 3px solid var(--yk-neon);
	outline-offset: 3px;
	border-radius: var(--yk-r-0);
}

/* Landmark principal */
.yk-main { display: block; min-height: 40vh; }

/* Salto al contenido */
.yk-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--yk-neon);
	color: var(--yk-paper);
	padding: var(--yk-s3) var(--yk-s5);
	font-weight: 700;
}
.yk-skip:focus { left: var(--yk-s4); top: var(--yk-s4); }

.yk-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Iconos inline */
.yk-ico { width: 20px; height: 20px; fill: currentColor; flex: none; }


/* ============================================================
   ÁTOMOS TIPOGRÁFICOS DE MARCA
   Clases, no etiquetas: el mismo <h2> puede ser .yk-h1 o .yk-h3
   según el peso que le toque en la jerarquía de la página.
   ============================================================ */

.yk-mono { font-family: var(--yk-f-mono); }
.yk-neon-text { color: var(--yk-neon); }

.yk-label {
	font-family: var(--yk-f-mono); font-size: 11px; letter-spacing: .18em;
	text-transform: uppercase; color: var(--yk-mute);
}

.yk-display {
	font-family: var(--yk-f-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(48px, 8vw, 96px); line-height: 1.02; letter-spacing: -.04em;
}
.yk-h1 {
	font-family: var(--yk-f-display); font-weight: 700;
	font-size: clamp(36px, 5.5vw, 64px); line-height: 1; letter-spacing: -.02em;
}
.yk-h2 {
	font-family: var(--yk-f-display); font-weight: 600;
	font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.01em;
}
.yk-h3 {
	font-family: var(--yk-f-display); font-weight: 500;
	font-size: clamp(19px, 2vw, 24px); line-height: 1.2;
}
.yk-body-text { font-size: 16px; line-height: 1.62; max-width: 62ch; }
.yk-lede {
	font-weight: 300; font-size: clamp(17px, 1.7vw, 22px);
	line-height: 1.55; color: rgba(255, 255, 255, .78); max-width: 62ch;
}