/*
 * typography.css — elementos sueltos y página (capa base).
 * La tipografía de castillo: títulos en serif fina (Unna) con un punto dorado de
 * remate en los títulos de sección; texto e interfaz en sans (Montserrat). Cinzel
 * (--font-institutional) solo en el menú y los títulos del footer.
 * .is-institutional marca lo que nombra la institución (secciones, salas, épocas,
 * bandas): va en Unna, como los títulos.
 */
@layer base {
	html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
	body {
		background: var(--color-bg);
		color: var(--color-fg);
		font-family: var(--font-body);
		font-size: var(--step-0);
		line-height: var(--leading-body);
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		/* footer al pie de la ventana en las páginas cortas */
		display: flex;
		flex-direction: column;
		min-block-size: 100dvh;
	}
	body > #pageArea { flex: 1 0 auto; }

	/* contenido: ancho máximo y márgenes fluidos; las bandas a todo el ancho
	   se hacen con .u-bleed o con un fondo en el propio componente */
	#pageArea {
		inline-size: min(100% - 2 * var(--gutter), var(--page-max));
		margin-inline: auto;
		padding-block: var(--space-l) var(--space-2xl);
	}

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-heading);
		font-weight: 400;
		line-height: var(--leading-tight);
		color: var(--color-strong);
		text-wrap: balance;
	}
	h1 { font-size: var(--step-5); }
	/* lo que nombra la institución, en la serif de los títulos */
	.is-institutional { font-family: var(--font-heading); font-weight: 400; font-style: normal; }
	h2 { font-size: var(--step-3); }
	h3 { font-size: var(--step-2); }
	h4 { font-size: var(--step-1); }
	h5, h6 { font-size: var(--step-0); }

	p, li, dd { text-wrap: pretty; }
	p { max-inline-size: var(--measure); }

	a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
	a:hover { text-decoration-color: var(--color-accent); }
	:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

	::selection { background: var(--color-band); color: var(--color-fg); }

	img { max-inline-size: 100%; block-size: auto; }

	/* formularios */
	input, select, textarea, button { font: inherit; color: inherit; }
	.c-form__control, input[type="search"], input[type="text"], select {
		min-block-size: 2.75rem;
		padding: 0.4em 0.9em;
		border: var(--border-w) solid var(--color-border);
		border-block-end-color: var(--color-strong);
		border-radius: 0;
		background: var(--color-surface);
	}

	/* remate de los títulos de sección: un punto dorado */
	.u-title-mark::after,
	.c-page-title::after,
	.c-rail__title::after,
	.c-metadata-group__title::after,
	.c-section-title::after {
		content: "";
		display: inline-block;
		inline-size: 0.28em;
		block-size: 0.28em;
		margin-inline-start: 0.22em;
		border-radius: 50%;
		background: var(--color-accent);
		vertical-align: 0.65em;
	}
	h1.c-page-title::after { inline-size: 0.16em; block-size: 0.16em; margin-inline-start: 0.12em; vertical-align: baseline; }

	/* fondo a todo el ancho de la ventana para un bloque dentro del contenedor,
	   sin tocar el layout (100vw desborda cuando hay barra de scroll) */
	.u-bleed {
		background: var(--bleed-bg, var(--color-band));
		box-shadow: 0 0 0 100vmax var(--bleed-bg, var(--color-band));
		clip-path: inset(0 -100vmax);
	}
}