/*
 * NO·RU velvety skin — Pagine interne
 * Si carica sopra nr-landing.css: variabili, barra, menu, pulsanti e piede arrivano da lì.
 *
 * Indice
 *  1. Pagina corrente nei menu
 *  2. Apertura
 *  3. Galleria del prima e dopo
 *  4. Storia
 *  5. Chiusa
 *  6. Pagina 404
 *  7. Schermi stretti
 *  8. Movimento ridotto
 */

/* ==========================================================================
   1. PAGINA CORRENTE NEI MENU
   ========================================================================== */

/* La voce della pagina aperta resta sottolineata, come la sezione corrente nella landing. */
#nr-site .nr-topbar__nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

#nr-site .nr-menu__lista a[aria-current="page"] .nr-menu__n { color: var(--nr-rame); }

#nr-site .nr-menu__lista a[aria-current="page"]::after {
	content: "";
	flex: none;
	align-self: center;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--nr-rame);
}

/* ==========================================================================
   2. APERTURA
   ========================================================================== */

/* Non c'è il barattolo a tutto schermo: si parte subito sotto la barra. */
#nr-site.nr-pagina .nr-main > .nr-sezione:first-child {
	padding-top: calc(var(--nr-top-h) + var(--nr-sec) * .6);
}

#nr-site .nr-pagina__titolo,
#nr-site .nr-galleria__titolo {
	font-size: var(--nr-fs-h1);
	font-weight: 780;
	font-stretch: 78%;
	line-height: .94;
	letter-spacing: -.03em;
}

/* ==========================================================================
   3. GALLERIA DEL PRIMA E DOPO
   ========================================================================== */

/* ---- 3.1 Testa e conteggio ---- */

#nr-site .nr-galleria__conta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
	padding: 8px 16px;
	border: 1.5px solid var(--nr-linea);
	border-radius: 999px;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .1em;
	text-transform: uppercase;
}

#nr-site .nr-galleria__conta::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--nr-rame);
}

/* ---- 3.2 Griglia ----
   Riusa .nr-pd__palco della landing, ma lì sopra i 1000px il palco va nella colonna
   di destra: qui si azzera tutto. Le colonne sono a soglie fisse perché lo sfalsamento
   delle card dipende da quante ce ne sono per riga. */

#nr-site .nr-galleria .nr-galleria__griglia {
	grid-column: auto;
	grid-row: auto;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: clamp(40px, 5vw, 64px) clamp(20px, 3vw, 40px);
	margin-top: clamp(48px, 7vw, 88px);
}

#nr-site .nr-galleria .nr-pd__nota { grid-column: auto; grid-row: auto; margin-top: clamp(40px, 6vw, 72px); }

@media (min-width: 640px) {
	#nr-site .nr-galleria .nr-galleria__griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 56px; }
	#nr-site .nr-galleria__voce { width: 100%; }
	#nr-site .nr-galleria__voce:nth-child(even) { translate: 0 56px; }
}

@media (min-width: 1100px) {
	#nr-site .nr-galleria .nr-galleria__griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-bottom: 72px; }
	#nr-site .nr-galleria__voce:nth-child(even) { translate: none; }
	#nr-site .nr-galleria__voce:nth-child(3n + 2) { translate: 0 72px; }
}

/* Con una sola coppia la griglia non ha senso: confronto grande e centrato. */
#nr-site .nr-galleria .nr-galleria__griglia:has(> .nr-galleria__voce:only-child) { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
#nr-site .nr-galleria__voce:only-child { width: min(100%, 560px); translate: none; }

/* ---- 3.3 Didascalia ----
   Numero in rame, una riga sottile e la nota, se c'è. */

#nr-site .nr-galleria__didascalia {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .08em;
	text-transform: uppercase;
}

#nr-site .nr-galleria__n { flex: none; color: var(--nr-rame-scuro); font-weight: 600; }

#nr-site .nr-galleria__didascalia::after {
	content: "";
	order: 1;
	flex: 1;
	height: 1.5px;
	background: var(--nr-linea);
}

#nr-site .nr-galleria__didascalia > span:not(.nr-galleria__n) { order: 2; text-align: right; }

/* ---- 3.4 Senza foto ---- */

#nr-site .nr-galleria__griglia--vuota { padding-bottom: 0; }

/* ==========================================================================
   4. STORIA
   ========================================================================== */

/* ---- 4.1 Apertura col fico d'india ---- */

#nr-site .nr-storia {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	align-items: center;
	gap: clamp(40px, 6vw, 120px);
}

#nr-site .nr-storia__fico { width: min(100%, 500px); }

/* ---- 4.2 Capitoli ----
   Il filo è il ::before dell'elenco; la parte in rame (::after) si allunga scorrendo
   dove c'è animation-timeline, altrimenti è già intera. Ogni capitolo ha il suo nodo. */

#nr-site .nr-storia__corpo { padding-top: calc(var(--nr-sec) * .4); }

#nr-site .nr-storia__capitoli {
	--nr-filo: clamp(36px, 6vw, 96px);
	position: relative;
	display: grid;
	gap: clamp(64px, 9vw, 128px);
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 0 0 var(--nr-filo);
	list-style: none;
}

#nr-site .nr-storia__capitoli::before,
#nr-site .nr-storia__capitoli::after {
	content: "";
	position: absolute;
	top: 26px;
	bottom: 0;
	left: 7px;
	width: 2px;
	border-radius: 2px;
}

#nr-site .nr-storia__capitoli::before { background: var(--nr-linea); }

#nr-site .nr-storia__capitoli::after {
	background: linear-gradient(180deg, var(--nr-rame-chiaro), var(--nr-rame) 45%, var(--nr-rame-scuro));
	transform-origin: top;
}

@supports (animation-timeline: view()) {
	#nr-site.nr-motion .nr-storia__capitoli::after {
		animation: nr-filo linear both;
		animation-timeline: view();
		animation-range: entry 30% cover 75%;
	}
}

@keyframes nr-filo {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

#nr-site .nr-capitolo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	align-items: start;
	gap: 16px clamp(24px, 5vw, 80px);
}

/* Nodo sul filo: vuoto finché il capitolo non entra, poi si riempie di rame. */
#nr-site .nr-capitolo::before {
	content: "";
	position: absolute;
	top: 18px;
	left: calc(var(--nr-filo) * -1);
	z-index: 1;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 2px solid var(--nr-rame);
	border-radius: 50%;
	background: var(--nr-bg);
	transition: background-color .6s var(--nr-ease) .3s, scale .6s var(--nr-back) .3s;
}

#nr-site .nr-capitolo.is-in::before,
#nr-site:not(.nr-motion) .nr-capitolo::before { background-color: var(--nr-rame); scale: 1.15; }

#nr-site .nr-capitolo__segno { display: grid; gap: 10px; }

#nr-site .nr-capitolo__n {
	font-family: var(--nr-serif);
	font-size: clamp(64px, 8vw, 120px);
	font-style: italic;
	line-height: .82;
	letter-spacing: -.02em;
}

#nr-site .nr-capitolo__quando {
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nr-rame-scuro);
}

#nr-site .nr-capitolo__titolo {
	font-size: var(--nr-fs-h3);
	font-weight: 740;
	font-stretch: 84%;
	line-height: 1.06;
	letter-spacing: -.01em;
	text-wrap: balance;
}

#nr-site .nr-capitolo__corpo p {
	margin-top: 18px;
	max-width: 54ch;
	font-size: calc(var(--nr-u) * 1.125);
	opacity: .9;
}

/* ---- 4.3 Testo dall'editor ----
   Colonna di lettura per chi scrive la storia da WordPress. */

#nr-site .nr-storia__racconto {
	max-width: 68ch;
	margin: 0 auto;
	font-size: calc(var(--nr-u) * 1.125);
}

#nr-site .nr-storia__racconto > * + * { margin-top: 1.1em; }

#nr-site .nr-storia__racconto h2,
#nr-site .nr-storia__racconto h3 {
	margin-top: 1.8em;
	font-weight: 740;
	font-stretch: 84%;
	line-height: 1.08;
	text-wrap: balance;
}

#nr-site .nr-storia__racconto h2 { font-size: var(--nr-fs-h3); }
#nr-site .nr-storia__racconto h3 { font-size: calc(var(--nr-u) * 1.5); }
#nr-site .nr-storia__racconto > :first-child { margin-top: 0; }

#nr-site .nr-storia__racconto a { color: inherit; text-decoration-color: var(--nr-rame); text-underline-offset: .2em; }

#nr-site .nr-storia__racconto blockquote {
	padding-left: 24px;
	border-left: 2px solid var(--nr-rame);
	font-family: var(--nr-serif);
	font-size: calc(var(--nr-u) * 1.75);
	font-style: italic;
	line-height: 1.2;
}

#nr-site .nr-storia__racconto img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--nr-r);
}

#nr-site .nr-storia__racconto ul,
#nr-site .nr-storia__racconto ol { padding-left: 1.2em; }

/* ---- 4.4 Citazione ---- */

#nr-site .nr-citazione { display: grid; justify-items: center; text-align: center; }

#nr-site .nr-citazione__figura { margin: 0; max-width: 1000px; }

/* Virgolette grandi in rame chiaro sopra il testo. */
#nr-site .nr-citazione__figura::before {
	content: "\201C";
	display: block;
	height: .42em;
	font-family: var(--nr-serif);
	font-size: clamp(120px, 16vw, 220px);
	line-height: .8;
	color: var(--nr-rame-chiaro);
}

#nr-site .nr-citazione__testo {
	margin: 0;
	font-family: var(--nr-serif);
	font-size: clamp(calc(var(--nr-u) * 2.2), calc(var(--nr-u) * .6 + 4.6vw), calc(var(--nr-u) * 5.6));
	line-height: 1.02;
	letter-spacing: -.01em;
	text-wrap: balance;
}

/* Stesso riflesso del corsivo nei titoli. */
#nr-site .nr-citazione__testo em {
	padding-right: .06em;
	background: var(--nr-rame-g);
	background-size: 250% 100%;
	background-position: calc(var(--nr-luce, .5) * 100%) 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: nr-luce 7s var(--nr-ease-io) infinite alternate;
}

#nr-site .nr-citazione__firma {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin-top: 36px;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .12em;
	text-transform: uppercase;
}

#nr-site .nr-citazione__firma::before,
#nr-site .nr-citazione__firma::after {
	content: "";
	width: 32px;
	height: 1.5px;
	background: currentColor;
	opacity: .6;
}

/* ==========================================================================
   5. CHIUSA
   ========================================================================== */

#nr-site .nr-chiusa {
	display: grid;
	justify-items: center;
	text-align: center;
}

#nr-site .nr-chiusa .nr-titolo { margin-top: 0; }
#nr-site .nr-chiusa .nr-testo { margin-inline: auto; }

#nr-site .nr-chiusa__azioni {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
}

/* ==========================================================================
   6. PAGINA 404
   ========================================================================== */

/* ---- 6.1 Impianto ----
   Testo a sinistra e numero a destra, come l'apertura della storia; sotto, le strade. */

#nr-site .nr-404 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-template-areas:
		"testo numero"
		"altro altro";
	align-items: center;
	gap: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 120px);
}

#nr-site .nr-404__testo { grid-area: testo; }
#nr-site .nr-404 .nr-pagina__titolo { font-size: var(--nr-fs-h2); }
#nr-site .nr-404__azioni { justify-content: flex-start; }

/* ---- 6.2 Numero ----
   Due 4 in rame e il barattolo al posto dello zero, col coperchio socchiuso
   e la spirale già disegnata sulla crema. */

#nr-site .nr-404__numero {
	grid-area: numero;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .04em;
	font-family: var(--nr-serif);
	font-size: clamp(120px, 17vw, 290px);
	line-height: 1;
	letter-spacing: -.02em;
	user-select: none;
}

#nr-site .nr-404__cifra { padding: 0 .02em; }

#nr-site .nr-404__zero {
	--nr-apri: .22;
	flex: none;
	width: .82em;
	margin: -.12em 0 0;
}

#nr-site .nr-404 .nr-jar__vortice { stroke-dashoffset: 0; }

/* Il barattolo galleggia come nell'apertura della landing, e ogni tanto il coperchio sbircia fuori. */
#nr-site.nr-motion .nr-404__zero .nr-jar { animation: nr-galleggia 7s ease-in-out infinite alternate; }
#nr-site.nr-motion .nr-404__zero .nr-jar__ombra { animation: nr-ombra 7s ease-in-out infinite alternate; }
#nr-site.nr-motion .nr-404__zero .nr-jar__coperchio { animation: nr-sbircia 5.5s var(--nr-ease-io) 1.2s infinite; }

@keyframes nr-sbircia {
	0%, 52%, 100% { translate: 0 0; rotate: 0deg; }
	64% { translate: 0 -46px; rotate: -7deg; }
	74% { translate: 0 -38px; rotate: -5deg; }
	86% { translate: 0 0; rotate: 0deg; }
}

/* ---- 6.3 Strade ----
   Le sezioni della landing come pillole, sopra una riga sottile. */

#nr-site .nr-404__altro {
	grid-area: altro;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 28px;
	padding-top: 32px;
	border-top: 1.5px solid var(--nr-linea);
}

#nr-site .nr-404__strade-titolo {
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nr-rame-scuro);
}

#nr-site .nr-404__strade ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nr-site .nr-404__strade a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--nr-linea);
	border-radius: 999px;
	font-family: var(--nr-mono);
	font-size: var(--nr-fs-mini);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
	transition: border-color .3s, background-color .3s, color .3s, transform .4s var(--nr-ease);
}

#nr-site .nr-404__strade a:focus-visible { border-color: var(--nr-rame); }

@media (hover: hover) {
	#nr-site .nr-404__strade a:hover {
		border-color: var(--nr-rame);
		background: var(--nr-rame);
		color: var(--nr-scuro);
		transform: translateY(-2px);
	}
}

/* ==========================================================================
   7. SCHERMI STRETTI
   ========================================================================== */

@media (max-width: 899px) {
	#nr-site .nr-storia { grid-template-columns: minmax(0, 1fr); }
	#nr-site .nr-storia__fico { width: min(100%, 420px); }

	#nr-site .nr-capitolo { grid-template-columns: minmax(0, 1fr); }
	#nr-site .nr-capitolo__segno { display: flex; align-items: baseline; gap: 16px; }
	#nr-site .nr-capitolo::before { top: 10px; }

	/* La 404 si impila e si centra: prima il numero, poi il testo. */
	#nr-site .nr-404 {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"numero"
			"testo"
			"altro";
		justify-items: center;
		text-align: center;
	}

	#nr-site .nr-404__numero { font-size: clamp(110px, 30vw, 240px); }
	#nr-site .nr-404__testo { display: grid; justify-items: center; }
	#nr-site .nr-404 .nr-testo { margin-inline: auto; }
	#nr-site .nr-404__azioni { justify-content: center; }
	#nr-site .nr-404__altro { flex-direction: column; justify-content: center; width: 100%; }
	#nr-site .nr-404__strade ul { justify-content: center; }
}

@media (max-width: 599px) {
	#nr-site .nr-chiusa__azioni { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ==========================================================================
   8. MOVIMENTO RIDOTTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	#nr-site .nr-galleria__voce { translate: none !important; }
}

#nr-site.nr-reduce .nr-galleria__voce { translate: none !important; }