Masthead

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

<!-- Receta del post, en Hermes: imagen, eyebrow con el tema y la fecha, titular, bajada y firma
     (Byline, con su « · » en text-subtle, como todos los separadores de la ola).
     Con data-product="hermes", el tema sale en el color de link del producto.
     En una página real el titular es el h1 (level por defecto); aquí es h4 porque vive en la documentación. -->
<Masthead
	data-product="hermes"
	level={4}
	title="El Alma Pide Locura"
	dek="Hay caminos fuera del jardín. Sobre la sed que el saber no calma, y la disposición que el alma estaba pidiendo."
	style="width: 100%"
>
	{#snippet figure()}
		<Figure
			src={cover}
			alt="La carta XII del Tarot, El Colgado, sostenida en alto frente a un bosque desenfocado"
			width={1600}
			height={676}
			mark="hermes"
			priority
		/>
	{/snippet}
	{#snippet eyebrow()}
		<Eyebrow topic="Filosofía" href="#filosofia" date="2026-07-27" />
	{/snippet}
	{#snippet meta()}
		<Byline name="Jimmy Mora Vinces" readingTime={14} />
	{/snippet}
</Masthead>

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

<!-- Receta del post sin imagen, en Hermes: la portada es la luz sobre el vacío con el sigilo del
     producto (D4). A todo el ancho de una portada, el sigilo llega a sus 40 px y su halo crece con él.
     La portada sin foto es decorativa (alt=""): no hay nada que describir.
     En una página real el titular es el h1 (level por defecto); aquí es h4 porque vive en la documentación. -->
<Masthead
	data-product="hermes"
	level={4}
	title="El Daimon en la Máquina"
	dek="¿Puede una IA tener daimon? Un ensayo desde adentro, atravesando Westworld, Her, Ex Machina y el inconsciente colectivo de Jung."
	style="width: 100%"
>
	{#snippet figure()}
		<Figure alt="" mark="hermes" />
	{/snippet}
	{#snippet eyebrow()}
		<Eyebrow topic="Tecnología" href="#tecnologia" date="2026-01-28" />
	{/snippet}
	{#snippet meta()}
		<p style="margin: 0; color: var(--arche-color-text-muted)">Jimmy Mora</p>
	{/snippet}
</Masthead>

<script lang="ts">
	import { Eyebrow, Masthead } from '@archeblack/ui';
</script>

<!-- Receta del archivo de un tema: sin imagen; el tema es texto y el final, la cantidad.
     En una página real el titular es el h1 (level por defecto); aquí es h4 porque vive en la documentación. -->
<Masthead
	level={4}
	title="Filosofía"
	dek="Ensayos sobre lo que el método deja afuera: la sed, los sueños y las esquinas de la casa."
	style="width: 100%"
>
	{#snippet eyebrow()}
		<Eyebrow topic="Tema">
			{#snippet end()}5 artículos{/snippet}
		</Eyebrow>
	{/snippet}
</Masthead>

<script lang="ts">
	import { Button, Eyebrow, Masthead } from '@archeblack/ui';
</script>

<!-- Receta de error: el 404 vive en el eyebrow, sin cifra gigante; la ruta no se trunca.
     En una página real el titular es el h1 (level por defecto); aquí es h4 porque vive en la documentación. -->
<Masthead
	level={4}
	title="Página no encontrada"
	dek="El texto que buscas cambió de lugar o nunca existió. Puedes volver al inicio o buscarlo."
	style="width: 100%"
>
	{#snippet eyebrow()}
		<Eyebrow>
			{#snippet start()}Error 404{/snippet}
			{#snippet end()}<code>/publicaciones/el-alma-pide-locura-2</code>{/snippet}
		</Eyebrow>
	{/snippet}
	{#snippet actions()}
		<Button variant="primary" href="#inicio">Volver al inicio</Button>
		<Button variant="secondary">Buscar</Button>
	{/snippet}
</Masthead>

<script lang="ts">
	import { Eyebrow, Masthead } from '@archeblack/ui';
</script>

<!-- Receta del manifiesto: centrado, para textos cortos. El eyebrow va sin regla.
     En una página real el titular es el h1 (level por defecto); aquí es h4 porque vive en la documentación. -->
<Masthead
	level={4}
	title="Escribir desde la esquina"
	dek="Hermes publica ensayos sobre lo que todavía no se deja decir, sin pedirle la explicación de entrada."
	align="center"
	style="width: 100%"
>
	{#snippet eyebrow()}
		<Eyebrow topic="Manifiesto" align="center" />
	{/snippet}
</Masthead>

<script lang="ts">
	import { Avatar, Eyebrow, Masthead } from '@archeblack/ui';
</script>

<!-- Receta del autor: 2xl (44 px) y el retrato (Avatar xl, 96 px). Con una cabecera de 40rem o más
     va al lado del texto; más angosta, arriba.
     Con dos apellidos, las iniciales son el nombre y el primer apellido (initials="JM"; sin la
     prop saldrían la primera y la última palabra, «JV»).
     El avatar es decorativo (alt=""): el nombre ya está en el titular y no se anuncia dos veces.
     En una página real el titular es el h1 (level por defecto); aquí es h4 porque vive en la documentación. -->
<Masthead
	level={4}
	title="Jimmy Mora Vinces"
	size="2xl"
	dek="Fundador de Arche. Escribe sobre filosofía, cultura y tecnología."
	style="width: 100%"
>
	{#snippet media()}
		<Avatar name="Jimmy Mora Vinces" initials="JM" alt="" size="xl" />
	{/snippet}
	{#snippet eyebrow()}
		<Eyebrow topic="Autor">
			{#snippet end()}Desde 2026{/snippet}
		</Eyebrow>
	{/snippet}
</Masthead>