/*!
Theme Name: Nicole Michielin
Theme URI: https://michielinnicole.com/
Author: Nicole Michielin
Author URI: https://michielinnicole.com/
Description: Tema su misura per michielinnicole.com. Progettato secondo le WCAG 2.2 livello AA: contrasti misurati, focus sempre visibile, gerarchia dei titoli senza salti, navigazione da tastiera completa. Basato su Underscores.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nicole-michielin
Tags: accessibility-ready, custom-logo, custom-menu, featured-images, translation-ready, portfolio

Basato su Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores è distribuito secondo i termini della GNU GPL v2 o successiva.
*/

/*--------------------------------------------------------------
>>> INDICE
----------------------------------------------------------------
# Caratteri
# Variabili di progetto (token)
# Reset
# Base
# Tipografia
# Link
# Accessibilità
# Utility
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Caratteri
# Fraunces e Atkinson Hyperlegible, entrambi SIL Open Font License,
# serviti dal tema: nessuna richiesta a Google, nessun cookie di terze parti.
--------------------------------------------------------------*/

/* Fraunces — variabile 300..700, tondo */
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Fraunces — variabile 300..700, corsivo */
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/fraunces-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Fraunces";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/fraunces-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Atkinson Hyperlegible Next — disegnato per lettori ipovedenti */
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/atkinson-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/atkinson-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/atkinson-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/atkinson-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Atkinson Hyperlegible Mono — etichette, numeri, dati tecnici */
@font-face {
	font-family: "Atkinson Hyperlegible Mono";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("assets/fonts/atkinson-mono-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Atkinson Hyperlegible Mono";
	font-style: normal;
	font-weight: 400 500;
	font-display: swap;
	src: url("assets/fonts/atkinson-mono-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/*--------------------------------------------------------------
# Variabili di progetto (token)
#
# Contrasti misurati sulla coppia carta/inchiostro:
#   inchiostro su carta ....... 15,6:1
#   muted su carta ............  6,6:1
#   accento su carta ..........  5,1:1
#   carta su scuro ............ 15,6:1
#   muted-scuro su scuro ......  7,4:1
#   accento-scuro su scuro ....  7,8:1
# Tutte le coppie superano il minimo WCAG 2.2 AA di 4,5:1 per il testo normale.
--------------------------------------------------------------*/

:root {
	/* Colore — chiaro */
	--paper: #f2ede4;
	--paper-2: #e8e1d4;
	--paper-card: rgba(255, 255, 255, 0.45);
	--ink: #16151a;
	--muted: #57524a;
	--accent: #b23a14;
	--accent-wash: #f7e4dc;
	--line: rgba(22, 21, 26, 0.16);
	--line-strong: rgba(22, 21, 26, 0.32);

	/* Colore — scuro */
	--dark: #16151a;
	--dark-2: #201e26;
	--on-dark: #f2ede4;
	--muted-dark: #ada597;
	--accent-dark: #ff8a5c;
	--line-dark: rgba(242, 237, 228, 0.18);
	--line-dark-strong: rgba(242, 237, 228, 0.34);

	/* Ruoli — riassegnati dentro .section--dark */
	--bg: var(--paper);
	--bg-card: var(--paper-card);
	--fg: var(--ink);
	--fg-muted: var(--muted);
	--brand: var(--accent);
	--rule: var(--line);
	--rule-strong: var(--line-strong);

	/* Caratteri */
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/* Scala tipografica fluida */
	--fs-display: clamp(2.875rem, 1.6rem + 6.4vw, 7rem);
	--fs-h1: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem);
	--fs-h2: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
	--fs-h3: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
	--fs-h4: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
	--fs-lead: clamp(1.125rem, 1.03rem + 0.5vw, 1.4375rem);
	--fs-body: clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
	--fs-small: 0.9375rem;
	--fs-label: 0.8125rem;

	/* Ritmo verticale */
	--lh-tight: 1;
	--lh-title: 1.08;
	--lh-body: 1.6;

	/* Spazio */
	--sp-2xs: 0.25rem;
	--sp-xs: 0.5rem;
	--sp-s: 0.75rem;
	--sp-m: 1.25rem;
	--sp-l: 2rem;
	--sp-xl: 3rem;
	/* Le sezioni della home si susseguono: il passo verticale è quello che
	   separa due blocchi, non quello attorno a un blocco isolato. Con padding
	   sopra e sotto, due sezioni contigue distano il doppio di questo valore. */
	--sp-2xl: clamp(2.5rem, 4vw, 3.5rem);
	--sp-3xl: clamp(3rem, 4.5vw, 4.5rem);

	/* Misure */
	--measure: 68ch;
	--measure-narrow: 46ch;
	--container: 76rem;
	--container-wide: 88rem;
	--gutter: clamp(1.25rem, 5vw, 4rem);

	/* Forma */
	--radius-s: 6px;
	--radius: 12px;
	--radius-l: 20px;
	--radius-pill: 999px;

	/* Profondità */
	--shadow-card: 0 16px 40px -28px rgba(22, 21, 26, 0.45);
	--shadow-float: 0 40px 90px -45px rgba(22, 21, 26, 0.55);

	/* Movimento */
	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--speed: 180ms;
}

/* Sezioni su fondo scuro: si riassegnano i ruoli, non i componenti. */
.section--dark {
	--bg: var(--dark);
	--bg-card: rgba(242, 237, 228, 0.06);
	--fg: var(--on-dark);
	--fg-muted: var(--muted-dark);
	--brand: var(--accent-dark);
	--rule: var(--line-dark);
	--rule-strong: var(--line-dark-strong);

	background-color: var(--bg);
	color: var(--fg);
}

/*--------------------------------------------------------------
# Reset
--------------------------------------------------------------*/

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
	margin: 0;
	padding: 0;
}

ul[class],
ol[class] {
	list-style: none;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Rispetta chi ha chiesto meno animazioni al sistema operativo. WCAG 2.3.3 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Lo scroll si ferma sotto l'intestazione fissa, non dietro. */
	scroll-padding-top: calc(var(--header-h, 4.5rem) + 1.5rem);
}

body {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-underline-offset: 0.18em;
	min-height: 100vh;
	overflow-x: hidden;
}

/* Trama di carta appena percettibile, coerente col portfolio stampato. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60rem 40rem at 82% -10%, var(--paper-2), transparent 70%),
		radial-gradient(48rem 36rem at 0% 8%, rgba(178, 58, 20, 0.05), transparent 65%);
}

/*--------------------------------------------------------------
# Tipografia
--------------------------------------------------------------*/

/* Fraunces è variabile: opsz, SOFT e WONK danno ai titoli il taglio del portfolio. */
h1,
h2,
h3,
.u-serif {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "opsz" 120, "SOFT" 40, "WONK" 1;
	letter-spacing: -0.015em;
	line-height: var(--lh-title);
	text-wrap: balance;
	color: var(--fg, var(--ink));
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
}

h4,
h5,
h6 {
	font-family: var(--sans);
	font-weight: 600;
	font-size: var(--fs-h4);
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--fg, var(--ink));
}

/* Il corsivo di Fraunces marca la parola che porta il senso della frase. */
h1 em,
h2 em,
h3 em,
.u-serif em {
	font-style: italic;
	color: var(--brand, var(--accent));
}

p {
	max-width: var(--measure);
	text-wrap: pretty;
}

p + p {
	margin-top: var(--sp-m);
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--fs-small);
}

code,
kbd,
samp,
pre {
	font-family: var(--mono);
	font-size: 0.9em;
}

blockquote {
	border-left: 3px solid var(--brand, var(--accent));
	padding-left: var(--sp-m);
	font-size: var(--fs-lead);
}

hr {
	border: 0;
	border-top: 1px solid var(--rule, var(--line));
	margin: var(--sp-xl) 0;
}

/* Etichette in mono maiuscolo: l'accento tipografico ricorrente del progetto. */
.u-label {
	display: block;
	font-family: var(--mono);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--brand, var(--accent));
}

.u-label span {
	color: var(--fg-muted, var(--muted));
}

.u-lead {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--fg, var(--ink));
}

.u-muted {
	color: var(--fg-muted, var(--muted));
}

.u-display {
	font-family: var(--serif);
	font-weight: 400;
	font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
	font-size: var(--fs-display);
	line-height: 0.92;
	letter-spacing: -0.03em;
}

/*--------------------------------------------------------------
# Link
--------------------------------------------------------------*/

a {
	color: var(--brand, var(--accent));
	text-decoration-thickness: 1px;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Nel testo corrente il link resta sottolineato: il colore non è mai l'unico
   segnale che distingue un link dal testo intorno. WCAG 1.4.1 */
.entry-content a:not([class]),
.u-prose a:not([class]) {
	color: var(--accent);
	text-decoration: underline;
}

.section--dark .entry-content a:not([class]),
.section--dark .u-prose a:not([class]) {
	color: var(--accent-dark);
}

/*--------------------------------------------------------------
# Accessibilità
--------------------------------------------------------------*/

/* Il focus è il motivo grafico del progetto, non un ripiego: lo stesso
   anello che nel portfolio inquadra le schermate. Mai rimosso. WCAG 2.4.7, 2.4.11 */
:focus-visible {
	outline: 3px solid var(--brand, var(--accent));
	outline-offset: 3px;
	border-radius: 2px;
}

.section--dark :focus-visible {
	outline-color: var(--accent-dark);
}

/* Su fondo chiaro l'anello arancio ha 5,1:1 contro la carta; su elementi
   pieni si aggiunge un alone chiaro perché resti visibile su qualsiasi fondo. */
.btn:focus-visible,
.chip:focus-visible {
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--paper);
}

/* Solo per screen reader. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* Il link "Salta al contenuto" diventa visibile appena riceve il focus. */
.skip-link {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -120%);
	z-index: 1000;
	display: inline-block;
	padding: 0.875rem 1.5rem;
	background-color: var(--ink);
	color: var(--paper);
	font-family: var(--mono);
	font-size: var(--fs-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 0 0 var(--radius) var(--radius);
	transition: transform var(--speed) var(--ease);
}

.skip-link:focus {
	transform: translate(-50%, 0);
	outline: 3px solid var(--accent);
	outline-offset: -6px;
}

/* Nasconde agli screen reader ciò che è solo decorativo. */
[aria-hidden="true"] {
	pointer-events: none;
}

/*--------------------------------------------------------------
# Utility
--------------------------------------------------------------*/

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--wide {
	max-width: var(--container-wide);
}

.container--narrow {
	max-width: 46rem;
}

.section {
	padding-block: var(--sp-3xl);
}

.section--tight {
	padding-block: var(--sp-2xl);
}

.u-stack > * + * {
	margin-top: var(--flow, var(--sp-m));
}

.u-measure {
	max-width: var(--measure);
}

.u-measure-narrow {
	max-width: var(--measure-narrow);
}

.u-center {
	text-align: center;
	margin-inline: auto;
}

.u-nowrap {
	white-space: nowrap;
}

/* Tabelle e blocchi larghi scorrono nel proprio contenitore,
   così il corpo della pagina non scorre mai in orizzontale. */
.u-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}