/*
Theme Name: Squagliasole Solleone
Theme URI: https://www.squagliasole.it/
Author: ATG
Author URI: https://www.squagliasole.it/
Description: Tema a blocchi per SQUAGLIASOLE, blog letterario. Giallo pieno, inchiostro nero, blu elettrico per il cinema e per la frase in grande; articoli numerati in una lista sola; filetti da 4px; le immagini mai ritagliate ne ingrandite oltre la risoluzione reale.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.0
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: squagliasole
Tags: blog, one-column, block-patterns, full-site-editing, editor-style, translation-ready
*/

/*
 * Questo file contiene solo l'intestazione, che WordPress esige qui, e le
 * poche variabili globali.
 *
 * Il resto sta in assets/css/, un file per argomento, caricato da
 * inc/assets.php nell'ordine dichiarato dalle dipendenze:
 *
 *   casella.css    la casella delle immagini
 *   testata.css    la barra nera, il marchio, la griglia delle sezioni
 *   lista.css      la lista numerata (prima pagina, categorie, ricerca, cinema)
 *   articolo.css   l'articolo
 *
 * Palette, tipografia e spaziature non sono qui: stanno in theme.json, che e'
 * il posto giusto perche' cosi' valgono anche dentro l'editor.
 */

/*
 * Il carattere di riserva del display, con le stesse proporzioni.
 *
 * Misurato: "SQUAGLIASOLE" a corpo 100 e' larga 633px in Bricolage Grotesque
 * 800 e 837px in Arial - il 32 per cento in piu'. Finche' il font vero non e'
 * arrivato il marchio veniva quindi tagliato a destra, e siccome sta in un
 * riquadro con overflow:hidden il taglio non lo vedeva nessun controllo: si
 * vede solo guardando la pagina nell'istante giusto.
 *
 * size-adjust riporta la riserva alla larghezza del font vero, quindi nei
 * decimi di secondo prima dello scambio il titolo occupa lo stesso spazio e
 * non salta. Vale per tutti i titoli, non solo per il marchio.
 *
 * 83 e non 84: il valore esatto sarebbe 84,1, ma un filo PIU' STRETTO della
 * riserva non puo' mai tagliare, un filo piu' largo si. Misurato dopo: 625
 * contro 633, cioe' l'1,3 per cento in meno.
 */
@font-face {
	font-family: "Bricolage riserva";
	src: local("Arial Bold"), local("Arial"), local("Helvetica Bold"), local("Helvetica");
	font-weight: 400 900;
	font-display: swap;
	size-adjust: 83%;
}

:root {
	/* Il filetto: e' lui a disegnare la pagina. Ovunque lo stesso. */
	--sq-filo: 4px;

	/* Il margine laterale delle righe di testo, dentro le celle. */
	--sq-bordo: clamp(1rem, 2.2vw, 1.75rem);

	/*
	 * L'altezza massima della foto dell'articolo. Le altre immagini stanno in
	 * una casella con un rapporto; questa e' libera e serve un tetto, sempre
	 * composto in min() con la dimensione nativa: mai ingrandita.
	 */
	--sq-hero-media: 28rem;
}

@media (min-width: 48rem) {
	:root {
		--sq-hero-media: 34rem;
	}
}

@media (min-width: 62rem) {
	:root {
		--sq-hero-media: 42rem;
	}
}

@media (min-width: 90rem) {
	:root {
		--sq-hero-media: 48rem;
	}
}