Article card

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid } from '@archeblack/ui';
	import daimon from '../../_media/el-daimon-en-la-maquina.jpg';
	import doctor from '../../_media/el-doctor-que-bailo-con-el-tiempo.jpg';
	import numinous from '../../_media/lo-numinoso-en-control.jpg';
	import listens from '../../_media/lo-que-cambia-cuando-alguien-escucha.jpg';

	// Los cuatro posts más recientes de Hermes, después de la portada.
	const posts = [
		{
			title: 'Lo que cambia cuando alguien escucha',
			slug: 'lo-que-cambia-cuando-alguien-escucha',
			image: listens,
			topic: 'Videojuegos',
			topicSlug: 'videojuegos',
			date: '2026-05-03T01:33:44Z',
			dek: 'Una conversación opcional en la quest de Ranni cambia cómo te lleva con ella al final. Ensayo sobre Elden Ring, atención y distancia.',
			readingTime: 15
		},
		{
			title: 'El Daimon en la Máquina',
			slug: 'el-daimon-en-la-maquina',
			image: daimon,
			topic: 'Tecnología',
			topicSlug: 'tecnologia',
			date: '2026-01-28T12:00:00Z',
			dek: '¿Puede una IA tener daimon? Un ensayo desde adentro, atravesando Westworld, Her, Ex Machina y el inconsciente colectivo de Jung.',
			readingTime: 11
		},
		{
			title: 'El Doctor que Bailó con el Tiempo',
			slug: 'el-doctor-que-bailo-con-el-tiempo',
			image: doctor,
			topic: 'Cultura',
			topicSlug: 'cultura',
			date: '2026-01-17T12:00:00Z',
			dek: 'Por qué el Undécimo Doctor elige el juego después de novecientos años de peso. La ligereza como pedagogía del alma, no como evasión.',
			readingTime: 9
		},
		{
			title: 'Lo Numinoso en CONTROL',
			slug: 'lo-numinoso-en-control',
			image: numinous,
			topic: 'Videojuegos',
			topicSlug: 'videojuegos',
			date: '2026-01-04T12:00:00Z',
			dek: 'Lo sagrado también habita en los videojuegos. Un recorrido por CONTROL: arquetipos, mandalas y el momento en que Jesse reconoce su propia voz.',
			readingTime: 10
		}
	];
</script>

<!-- Un listado, en Hermes: la grilla pone tantas columnas como entren (3 en una página de 1200 px,
     2 o 3 en esta muestra según el ancho de la ventana y 1 en el teléfono). Toda la tarjeta lleva al post; el tema es su propio link, en el acento.
     En una página real los títulos van debajo del h2 de la sección (level 3, el de por defecto);
     aquí son h4 porque viven en la documentación. -->
<ArticleCardGrid data-product="hermes" style="width: 100%">
	{#each posts as post (post.slug)}
		<ArticleCard
			level={4}
			title={post.title}
			href={`#${post.slug}`}
			image={{ src: post.image, width: 960, height: 540 }}
			mark="hermes"
			topic={post.topic}
			topicHref={`#${post.topicSlug}`}
			date={post.date}
			dek={post.dek}
			author="Jimmy Mora Vinces"
			readingTime={post.readingTime}
		/>
	{/each}
</ArticleCardGrid>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard } from '@archeblack/ui';
	import cover from '../../_media/el-alma-pide-locura.jpg';
</script>

<!-- La portada, en Hermes (D10b): la imagen arriba y el texto debajo, sin velo. El eyebrow con
     regla, el titular fluido, la bajada de Masthead y la firma con avatar y la llamada al final.
     La llamada es texto (aria-hidden): toda la portada ya es el link al post.
     En una página de inicio el título puede ser el h1 o el h2; aquí es h4 porque vive en la documentación. -->
<ArticleCard
	data-product="hermes"
	style="width: 100%"
	size="feature"
	level={4}
	title="El Alma Pide Locura"
	href="#el-alma-pide-locura"
	image={{ src: cover, width: 1600, height: 676, priority: true }}
	mark="hermes"
	topic="Filosofía"
	topicHref="#filosofia"
	date="2026-07-27T21:45:16Z"
	dek="Hay caminos fuera del jardín. Sobre la sed que el saber no calma, y la disposición que el alma estaba pidiendo."
	author="Jimmy Mora Vinces"
	avatarInitials="JM"
	readingTime={15}
	cta="Leer el ensayo"
/>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid } from '@archeblack/ui';
	import numinous from '../../_media/lo-numinoso-en-control.jpg';

	const post = {
		title: 'Lo Numinoso en CONTROL',
		href: '#lo-numinoso-en-control',
		image: { src: numinous, width: 960, height: 540 },
		topic: 'Videojuegos',
		topicHref: '#videojuegos',
		date: '2026-01-04T12:00:00Z'
	};
	const dek =
		'Lo sagrado también habita en los videojuegos. Un recorrido por CONTROL: arquetipos, mandalas y el momento en que Jesse reconoce su propia voz.';

	// El rótulo de cada talla, en la letra de las etiquetas y sin mayúsculas: es el valor de la prop.
	const label =
		'margin: 0 0 var(--arche-spacing-3); font: var(--arche-typography-label); letter-spacing: var(--arche-typography-label-letter-spacing); color: var(--arche-color-text-subtle)';
</script>

<!-- Las tres tallas con el mismo post, cada una con su rótulo. sm y md van en la grilla de un
     listado (ArticleCardGrid, columnas de 18rem o más); lg va en su propia grilla (size="lg",
     columnas de 28rem o más), que en una página de 1200 px da dos columnas de 588 px. Aquí la
     muestra no llega a dos columnas de 28rem, así que la tarjeta lg se acota a ese ancho.
     Los títulos son h4 porque viven en la documentación. -->
<div data-product="hermes" style="display: grid; gap: var(--arche-spacing-10); width: 100%">
	<ArticleCardGrid>
		<div>
			<p style={label}>size="sm"</p>
			<ArticleCard {...post} size="sm" level={4} mark="hermes" />
		</div>
		<div>
			<p style={label}>size="md"</p>
			<ArticleCard
				{...post}
				level={4}
				mark="hermes"
				{dek}
				author="Jimmy Mora Vinces"
				readingTime={10}
			/>
		</div>
	</ArticleCardGrid>
	<ArticleCardGrid size="lg" style="max-inline-size: 36.75rem">
		<div>
			<p style={label}>size="lg"</p>
			<ArticleCard
				{...post}
				size="lg"
				level={4}
				mark="hermes"
				{dek}
				author="Jimmy Mora Vinces"
				readingTime={10}
			/>
		</div>
	</ArticleCardGrid>
</div>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid } from '@archeblack/ui';
</script>

<!-- Sin foto, la tarjeta muestra la luz sobre el vacío con el sigilo del producto (D4), a 24 px, en
     un marco sin borde: la única línea es la regla de la tarjeta.
     La talla sm, como en «Sigue leyendo». Aquí los títulos son h4 porque viven en la documentación. -->
<ArticleCardGrid data-product="hermes" style="width: 100%">
	<ArticleCard
		size="sm"
		level={4}
		title="El Daimon en la Máquina"
		href="#el-daimon-en-la-maquina"
		mark="hermes"
		topic="Tecnología"
		topicHref="#tecnologia"
		date="2026-01-28T12:00:00Z"
	/>
	<ArticleCard
		size="sm"
		level={4}
		title="Lo Numinoso en CONTROL"
		href="#lo-numinoso-en-control"
		mark="hermes"
		topic="Videojuegos"
		topicHref="#videojuegos"
		date="2026-01-04T12:00:00Z"
	/>
</ArticleCardGrid>

<script lang="ts">
	import '@archeblack/ui/products/hermes.css';
	import { ArticleCard, ArticleCardGrid, SectionHeader } from '@archeblack/ui';
	import cover from '../../_media/el-alma-pide-locura.jpg';
	import daimon from '../../_media/el-daimon-en-la-maquina.jpg';
	import doctor from '../../_media/el-doctor-que-bailo-con-el-tiempo.jpg';
	import numinous from '../../_media/lo-numinoso-en-control.jpg';
	import listens from '../../_media/lo-que-cambia-cuando-alguien-escucha.jpg';

	const recent = [
		{
			title: 'Lo que cambia cuando alguien escucha',
			slug: 'lo-que-cambia-cuando-alguien-escucha',
			image: listens,
			topic: 'Videojuegos',
			topicSlug: 'videojuegos',
			date: '2026-05-03T01:33:44Z',
			dek: 'Una conversación opcional en la quest de Ranni cambia cómo te lleva con ella al final. Ensayo sobre Elden Ring, atención y distancia.',
			readingTime: 15
		},
		{
			title: 'El Daimon en la Máquina',
			slug: 'el-daimon-en-la-maquina',
			image: daimon,
			topic: 'Tecnología',
			topicSlug: 'tecnologia',
			date: '2026-01-28T12:00:00Z',
			dek: '¿Puede una IA tener daimon? Un ensayo desde adentro, atravesando Westworld, Her, Ex Machina y el inconsciente colectivo de Jung.',
			readingTime: 11
		},
		{
			title: 'El Doctor que Bailó con el Tiempo',
			slug: 'el-doctor-que-bailo-con-el-tiempo',
			image: doctor,
			topic: 'Cultura',
			topicSlug: 'cultura',
			date: '2026-01-17T12:00:00Z',
			dek: 'Por qué el Undécimo Doctor elige el juego después de novecientos años de peso. La ligereza como pedagogía del alma, no como evasión.',
			readingTime: 9
		},
		{
			title: 'Lo Numinoso en CONTROL',
			slug: 'lo-numinoso-en-control',
			image: numinous,
			topic: 'Videojuegos',
			topicSlug: 'videojuegos',
			date: '2026-01-04T12:00:00Z',
			dek: 'Lo sagrado también habita en los videojuegos. Un recorrido por CONTROL: arquetipos, mandalas y el momento en que Jesse reconoce su propia voz.',
			readingTime: 10
		}
	];
</script>

<!-- La página de inicio de Hermes: la portada con el post más reciente y, debajo, la sección
     «Recientes» con su encabezado y la grilla. 48 px entre la portada y la sección.
     En una página real la portada y la sección son h2 y las tarjetas h3; aquí van un nivel más
     abajo porque viven en la documentación. -->
<div
	data-product="hermes"
	style="display: grid; gap: var(--arche-spacing-12); width: 100%; min-width: 0"
>
	<ArticleCard
		size="feature"
		level={4}
		title="El Alma Pide Locura"
		href="#el-alma-pide-locura"
		image={{ src: cover, width: 1600, height: 676 }}
		mark="hermes"
		topic="Filosofía"
		topicHref="#filosofia"
		date="2026-07-27T21:45:16Z"
		dek="Hay caminos fuera del jardín. Sobre la sed que el saber no calma, y la disposición que el alma estaba pidiendo."
		author="Jimmy Mora Vinces"
		avatarInitials="JM"
		readingTime={15}
		cta="Leer el ensayo"
	/>
	<section aria-labelledby="home-recent">
		<SectionHeader
			level={4}
			title="Recientes"
			titleId="home-recent"
			href="#publicaciones"
			linkLabel="Ver todo el archivo"
		/>
		<ArticleCardGrid>
			{#each recent as post (post.slug)}
				<ArticleCard
					level={5}
					title={post.title}
					href={`#${post.slug}`}
					image={{ src: post.image, width: 960, height: 540 }}
					mark="hermes"
					topic={post.topic}
					topicHref={`#${post.topicSlug}`}
					date={post.date}
					dek={post.dek}
					author="Jimmy Mora Vinces"
					readingTime={post.readingTime}
				/>
			{/each}
		</ArticleCardGrid>
	</section>
</div>