/*
Theme Name: Alchemic Matter
Description: Minimal classic theme for alchemicmatter.com, built on the Alchemic Matter design system (Nigredo: black and white, fine lines, one spark of colour).
Version: 0.2.0
Requires at least: 6.0
Requires PHP: 7.4
Author: Alchemic Matter
License: GPL-2.0-or-later
Text Domain: alchemic-matter
*/

/* Token dal design system "Alchemic Matter" (tokens.json). Non aggiungere valori fuori scala. */
:root {
	--surface: #000000;
	--surface-raised: #0b0b0b;
	--shade: #141414;
	--line: #262626;
	--line-strong: #7a7a7a;
	--ink: #f2f2f0;
	--ink-soft: #c6c6c4;
	--ink-muted: #8e8e8c;
	--citrine: #d6b25a;
	--rubedo: #e0684f;

	--font-display: "Josefin Sans", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Jost", Futura, "Century Gothic", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
	--font-runic: "Noto Sans Runic", serif;

	--space-1: 5px;
	--space-2: 8px;
	--space-3: 13px;
	--space-4: 21px;
	--space-5: 34px;
	--space-6: 55px;
	--space-7: 89px;

	--radius-none: 0;
	--radius-sm: 3px;
	--radius-round: 999px;

	--glow: 0 0 55px rgba(245, 245, 242, .10);

	--gutter: var(--space-4);
	--measure: 38rem;
	--max: 72rem;
}
@media (min-width: 48rem) {
	:root { --gutter: var(--space-5); }
}

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

html { background: var(--surface); }

body {
	margin: 0;
	background: var(--surface);
	color: var(--ink-soft);
	font: 300 18px/30px var(--font-body);
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--line-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
}
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

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

strong, b { font-weight: 400; color: var(--ink); }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Testo: titoli in maiuscolo come un'iscrizione (Josefin Sans), corpo in Jost Light. */

h1, h2, h3, h4 { color: var(--ink); }

.entry-title, .archive-title {
	margin: 0 0 var(--space-5);
	font: 300 clamp(28px, 6vw, 40px) / 1.15 var(--font-display);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.entry-title a { color: inherit; text-decoration: none; }

.entry-content h2,
.behind-the-scenes h2 {
	margin: var(--space-6) 0 var(--space-4);
	font: 400 22px/30px var(--font-display);
	letter-spacing: .12em;
	text-transform: uppercase;
}
.entry-content h3 {
	margin: var(--space-5) 0 var(--space-2);
	font: 400 18px/30px var(--font-body);
	letter-spacing: .01em;
}
.entry-content p { margin: 0 0 var(--space-4); }
.entry-content ul,
.entry-content ol { margin: 0 0 var(--space-4); padding-left: var(--space-4); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content li::marker { color: var(--ink-muted); font-family: var(--font-mono); font-size: 14px; }
.entry-content figure { margin: 0; }

/* Tabelle come SpecGrid: righe sottili, niente riempimenti, testo mono. */
.entry-content table {
	width: 100%;
	max-width: var(--measure);
	margin: 0 0 var(--space-4);
	border-collapse: collapse;
	border: 1px solid var(--line);
	font: 400 14px/20px var(--font-mono);
	color: var(--ink-soft);
}
.entry-content th,
.entry-content td {
	padding: var(--space-3);
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.entry-content th {
	font: 400 11px/16px var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* Etichette e dati di stampa */
.am-label {
	font: 400 11px/16px var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

/* Pulsante: pillola con filo sottile */
.button-link,
.am-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 13px 21px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-round);
	background: transparent;
	color: var(--ink);
	font: 400 14px/1 var(--font-display);
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.button-link:hover,
.am-btn:hover { border-color: var(--ink); }

/* Intestazione e piè di pagina (non compaiono nella home) */

.site-header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
	padding: var(--gutter);
}
.site-logo { display: block; text-decoration: none; }
.site-logo img { width: auto; height: 20px; }
@media (min-width: 48rem) {
	.site-logo img { height: 24px; }
}

.site-nav ul {
	display: flex;
	gap: var(--space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav li { position: relative; }
.site-nav a {
	display: block;
	padding: var(--space-2) 0;
	color: var(--ink-muted);
	font: 400 11px/16px var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a,
.site-nav .current-menu-parent > a { color: var(--ink); }

/* Sottomenu: tendina con filo sottile, aperta al passaggio o al focus. */
.site-nav .sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 10;
	display: none;
	flex-direction: column;
	gap: 0;
	min-width: 16rem;
	padding: var(--space-2) var(--space-3);
	background: var(--surface);
	border: 1px solid var(--line);
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu { display: flex; }
.site-nav .sub-menu a { padding: var(--space-2) 0; }

.site-footer {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-6) var(--gutter) var(--gutter);
	color: var(--ink-muted);
	font: 400 11px/16px var(--font-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
}
.site-footer p { margin: 0; }
.site-footer svg { color: var(--ink); flex: none; }

/* Contenuti */

.site-main {
	max-width: var(--max);
	margin: 0 auto;
	padding: var(--space-5) var(--gutter) var(--space-7);
	animation: am-emerge 900ms ease-out both;
}

.entry-content { max-width: var(--measure); }
.entry-image { margin: 0 0 var(--space-6); }

.post-list article { margin-bottom: var(--space-6); }

/* Progetti: schede su nero separate da un filo */

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: var(--space-6) var(--space-5);
}
.project-card {
	border-top: 1px solid var(--line);
	padding-top: var(--space-4);
}
.project-card a { display: block; color: inherit; text-decoration: none; }
.project-card img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--surface-raised);
	margin-bottom: var(--space-4);
}
.project-card h2 {
	margin: 0 0 var(--space-2);
	font: 400 22px/30px var(--font-display);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
}
.project-card p {
	margin: 0;
	font: 400 15px/24px var(--font-body);
	color: var(--ink-soft);
}
.project-card a:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }

.behind-the-scenes {
	max-width: var(--measure);
	margin-top: var(--space-6);
	padding-top: var(--space-4);
	border-top: 1px solid var(--line);
}

.single-projects .button-link { margin-top: var(--space-5); }

.pagination { margin-top: var(--space-6); }

/* Homepage: il logo al centro del nero */

.home .site-main { max-width: none; padding: 0; animation: none; }

.home-stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	padding: var(--space-7) var(--gutter);
	overflow: hidden;
}
.home-logo { margin: 0; width: min(92vw, 66rem); }
@media (min-width: 48rem) {
	.home-logo { width: min(84vw, 66rem); }
}
.am-logo { display: block; width: 100%; height: auto; overflow: visible; }

.am-rune path {
	fill: none;
	stroke: var(--ink);
	stroke-width: 21;
	stroke-linejoin: miter;
	stroke-miterlimit: 2;
	stroke-linecap: butt;
}
.am-spell { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.am-spell__runes {
	fill: var(--ink-muted);
	stroke: none;
	font: 17px var(--font-runic);
	letter-spacing: 2px;
}
.am-spell__far { stroke: var(--line-strong); stroke-dasharray: 2 9; }
.am-spark { fill: var(--ink); stroke: none; }
.am-spark--citrine { fill: var(--citrine); }

/* Prima che parta l'animazione il logo resta nel buio; se lo script non arriva, compare comunque. */
.am-intro .am-letters,
.am-intro .am-rune { opacity: 0; animation: am-emerge 1200ms ease-out 2500ms forwards; }

@keyframes am-emerge {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.site-main { animation: none; }
	.am-intro .am-letters,
	.am-intro .am-rune { opacity: 1; animation: none; }
}