/* DJAHARA — base.
   Deriva dal blocco <helmet data-dc-atomics> condiviso dalle 41 pagine di design:
   è già un file unico là, resta un file unico qui.

   I nomi --dj-* sono alias dei preset di theme.json. I template usano gli alias,
   così sostituire un token resta un'operazione in un punto solo. */

:root {
	--dj-white: var(--wp--preset--color--surface);
	--dj-ivory: var(--wp--preset--color--surface-soft);
	--dj-ink: var(--wp--preset--color--ink);
	--dj-graphite: var(--wp--preset--color--ink-soft);
	--dj-hairline: var(--wp--preset--color--hairline);
	--dj-gold: var(--wp--preset--color--gold);
	--dj-gold-soft: var(--wp--preset--color--gold-soft);

	--dj-hairline-soft: var(--wp--custom--hairline-soft);
	--dj-error: var(--wp--custom--error);
	--dj-success: var(--wp--custom--success);
	--dj-ph: var(--wp--custom--placeholder);
	--dj-ph-ink: var(--wp--custom--placeholder-ink);

	--dj-display: var(--wp--preset--font-family--display);
	--dj-text: var(--wp--preset--font-family--text);

	--dj-max: 1440px;
	--dj-gutter: var(--wp--custom--gutter);
	--dj-radius: 0;

	--dj-motion: 180ms cubic-bezier(.2, 0, .2, 1);
	--dj-fade: 320ms cubic-bezier(.2, 0, .2, 1);
}

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

body {
	margin: 0;
	background: var(--dj-white);
	color: var(--dj-ink);
	font-family: var(--dj-text);
	font-size: 15px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--dj-display);
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
}

p {
	text-wrap: pretty;
}

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

img {
	border-radius: var(--dj-radius);
}

a {
	color: var(--dj-ink);
	text-decoration: none;
	transition: color var(--dj-motion), text-decoration-color var(--dj-motion);
}

a:hover {
	text-decoration: underline;
	text-decoration-color: var(--dj-gold);
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

button {
	font-family: inherit;
	border-radius: var(--dj-radius);
}

/* Focus. Oro su nero è 5,7:1, dentro AA. L'hairline non è mai indicatore di stato:
   1,3:1 su bianco non raggiunge la soglia 3:1 dei componenti non testuali. */
:focus-visible {
	outline: 2px solid var(--dj-gold);
	outline-offset: 2px;
}

a:focus-visible,
button:focus-visible {
	background: var(--dj-gold);
	color: var(--dj-ink);
	outline: 2px solid var(--dj-ink);
	outline-offset: 2px;
	text-decoration: none;
}

.dj-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--dj-ink);
	color: var(--dj-white);
	font-size: 11px;
	letter-spacing: .20em;
	text-transform: uppercase;
}

.dj-skip:focus {
	left: 0;
}

.dj-main {
	display: block;
}

.dj-wrap {
	max-width: var(--dj-max);
	margin: 0 auto;
	padding: 0 var(--dj-gutter);
}

.dj-wrap--narrow {
	max-width: 1180px;
}

/* Distanza fra bande di pagina: 96 desktop, 64 tablet, 48 mobile. */
.dj-section {
	padding-block: 96px;
}

@media (max-width: 1024px) {
	:root {
		--dj-gutter: 28px;
	}

	.dj-section {
		padding-block: 64px;
	}
}

@media (max-width: 600px) {
	:root {
		--dj-gutter: 20px;
	}

	.dj-section {
		padding-block: 48px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Due larghezze oltre a quella di griglia, per l'articolo.
   `--read` è la colonna di lettura: intorno alle 75 battute per riga, che è
   dove l'occhio ritrova l'inizio della riga successiva senza cercarlo.
   `--wide` è la fotografia d'apertura: più larga del testo, meno della griglia. */
.dj-wrap--read {
	max-width: 820px;
}

.dj-wrap--wide {
	max-width: 1120px;
}