/*
 * Testata "divided" (menu | logo | menu): Archicon stira le colonne a tutta altezza, ma il
 * link del logo ha un'altezza fissa (quella del logo) e restava in cima. Centrato in verticale.
 */
.qodef-header--divided #qodef-page-header .qodef-header-logo-link {
	align-self: center;
}

/*
 * Scala tipografica del sito (6/11/2026, rapporto 1,333): ogni testo prende un gradino.
 * Etichette e dati 12, menu e link 15, paragrafi 18, contatti 24, titoli secondari 32,
 * frasi 42, titolo principale 56–60. Il grigio delle etichette ha contrasto 6,4:1.
 */
:root {
	--mks-text-xs: 12px;
	--mks-text-sm: 15px;
	--mks-text-md: 18px;
	--mks-text-lg: 24px;
	--mks-text-xl: 32px;
	--mks-text-2xl: 42px;
	--mks-label-color: #5f5f5f;
}

/*
 * Testata: niente sticky (opzione di Archicon "Header Scroll Appearance" su None, 6/11/2026).
 * Il logo (116 px) è l'elemento dominante; il menu scende da 25 a 15 px, maiuscolo spaziato.
 */
#qodef-page-header .qodef-header-navigation > ul > li > a {
	font-size: var(--mks-text-sm);
	letter-spacing: .06em;
	line-height: 1;
}

/*
 * Pagina Studio, contatti (Interactive Link Showcase, layout "interactive-list", nel
 * contenitore con classe mks-studio-contacts): Archicon centra le voci e le scrive a
 * 80–100 px. Qui: allineate a sinistra, 24 px (gradino dei contatti, sotto la frase da 42),
 * una riga sottile tra una voce e l'altra (come su precht.at), numeri nel font dei testi piccoli.
 */
.mks-studio-contacts .qodef-interactive-link-showcase.qodef-layout--interactive-list .qodef-m-items {
	align-items: stretch;
	border-top: 1px solid #111;
	text-align: left;
}

.mks-studio-contacts .qodef-interactive-link-showcase.qodef-layout--interactive-list .qodef-m-item {
	border-bottom: 1px solid #111;
	display: block;
	font-size: var(--mks-text-lg);
	line-height: 1.3;
	padding: 18px 0 16px;
}

.mks-studio-contacts .qodef-interactive-link-showcase.qodef-layout--interactive-list .qodef-e-title {
	align-items: baseline;
	gap: 18px;
}

.mks-studio-contacts .qodef-interactive-link-showcase.qodef-layout--interactive-list .qodef-e-mark {
	color: var(--mks-label-color);
	flex: 0 0 auto;
	font-family: var(--mks-font-ui, inherit);
	font-size: var(--mks-text-xs);
	min-width: 28px;
}

/*
 * Ingresso "mks-reveal" (assets/js/reveal.js), come le tappe di home e progetti: dissolvenza
 * salendo di 24 px, 0,9 s, stessa curva. Solo con lo script attivo; se non parte (nessun
 * mks-reveal-ready) gli elementi compaiono comunque dopo 3 s.
 */
@media (prefers-reduced-motion: no-preference) {

	.mks-reveal-js .mks-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity .9s cubic-bezier(.165, .84, .44, 1), transform .9s cubic-bezier(.165, .84, .44, 1);
		transition-delay: var(--mks-reveal-delay, 0s);
	}

	.mks-reveal-js:not(.mks-reveal-ready) .mks-reveal {
		animation: mks-reveal-anyway .6s ease 3s forwards;
	}

	.mks-reveal-js .mks-reveal.mks-reveal--in {
		opacity: 1;
		transform: none;
	}
}

@keyframes mks-reveal-anyway {
	to {
		opacity: 1;
		transform: none;
	}
}

/*
 * Menu mobile: l'icona di big.dk (tre righe spesse) che all'apertura si trasforma in una X
 * con la stessa tecnica e gli stessi tempi: le righe si cancellano in 0,3 s, la X si
 * disegna in 0,2 s dopo 0,2 s; alla chiusura il contrario. L'SVG è nelle opzioni di
 * Archicon (Mobile Header → icona "SVG path"); Archicon aggiunge qodef--opened al pulsante.
 */
/* One icon for both states: Archicon would hide it when open, expecting a separate close icon. */
.qodef-mobile-header-opener.qodef-source--svg-path .qodef-m-icon.qodef--close {
	display: none;
}

#qodef-page-mobile-header .qodef-mobile-header-opener.qodef-source--svg-path.qodef--opened .qodef-m-icon.qodef--open {
	visibility: visible;
}

.qodef-mobile-header-opener .mks-menu-icon {
	display: block;
	height: auto;
	width: 32px;
}

.mks-menu-icon line {
	stroke-dasharray: 1 1;
}

.mks-menu-icon-lines line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .2s ease-in-out .2s;
}

.mks-menu-icon-close line {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset .2s ease-in-out;
}

.qodef--opened .mks-menu-icon-lines line {
	stroke-dashoffset: -1;
	transition: stroke-dashoffset .3s ease-in-out;
}

.qodef--opened .mks-menu-icon-close line {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset .2s ease-in-out .2s;
}

@media (prefers-reduced-motion: reduce) {

	.mks-menu-icon line {
		transition: none !important;
	}
}

/*
 * Pagina 404 come una tavola di progetto (functions.php, archicon_mks_404_content): una quota
 * "404" che si disegna sopra il titolo (Newsreader light, come i titoli dei progetti), il
 * testo, i link nello stile del menu (Hanken, maiuscolo, sottolineatura sottile) e il
 * cartiglio in basso a destra. Una griglia leggerissima, come la carta millimetrata.
 */
.error404 #qodef-page-outer {
	background-image: none;
}

/*
 * Carta millimetrata: la griglia della 404, anche sotto home, progetti e Studio (classe
 * mks-grid-paper sul body, functions.php). assets/js/grid-paper.js la allinea al layout.
 */
#qodef-404-page.mks-404,
.mks-grid-paper #qodef-page-outer {
	background-image:
		linear-gradient(to right, rgb(0 0 0 / .045) 1px, transparent 1px),
		linear-gradient(to bottom, rgb(0 0 0 / .045) 1px, transparent 1px);
	background-position: 42px 0;
	background-size: 48px 48px;
}

@media only screen and (max-width: 1024px) {

	#qodef-404-page.mks-404,
	.mks-grid-paper #qodef-page-outer {
		background-position: 20px 0;
	}
}

#qodef-404-page.mks-404 {
	align-items: flex-end;
	box-sizing: border-box;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: calc(100vh - 150px);
	padding: 72px 42px 56px;
	text-align: left;
}

.mks-404-sheet {
	max-width: 1100px;
}

/* Dimension line: ticks at both ends, the number in the middle, drawn from the left. */
.mks-404-dimension {
	align-items: center;
	display: flex;
	margin-bottom: 36px;
	max-width: 620px;
	position: relative;
}

.mks-404-dimension::before {
	background: #111;
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
	top: 50%;
	transform-origin: left;
}

.mks-404-dimension::after {
	border-left: 1px solid #111;
	border-right: 1px solid #111;
	content: "";
	height: 14px;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 7px);
}

.mks-404-dimension span {
	background: #fff;
	font-family: var(--mks-font-ui, inherit);
	font-size: 13px;
	letter-spacing: .08em;
	margin: 0 auto;
	padding: 0 12px;
	position: relative;
}

.mks-404 .mks-404-title {
	font-size: clamp(44px, 6.4vw, 112px);
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1;
	margin: 0;
}

.mks-404 .mks-404-text {
	font-size: 18px;
	line-height: 1.55;
	margin: 28px 0 0;
	max-width: 34em;
}

.mks-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 48px;
	margin-top: 44px;
}

.mks-404-links a {
	align-items: center;
	color: #000;
	display: inline-flex;
	font-family: var(--mks-font-ui, inherit);
	font-size: 25px;
	gap: 14px;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.mks-404-links a span {
	background-image: linear-gradient(to top, currentColor 1px, transparent 1px);
	background-position-x: 100%;
	background-repeat: no-repeat;
	background-size: 0 100%;
	transition: background-size .35s cubic-bezier(.16, .48, .36, 1);
}

.mks-404-links a:hover span,
.mks-404-links a:focus-visible span {
	background-position-x: 0;
	background-size: 100% 100%;
}

.mks-404-links svg {
	transition: transform .4s cubic-bezier(.33, .02, 0, .93);
}

.mks-404-links a:hover svg {
	transform: translate(3px, -3px);
}

/* Title block, as on a drawing sheet. */
.mks-404-block {
	background: #fff;
	border: 1px solid #111;
	font-family: var(--mks-font-ui, inherit);
	margin: 0;
	min-width: 300px;
}

.mks-404-block div {
	display: grid;
	gap: 16px;
	grid-template-columns: 84px 1fr;
	padding: 9px 14px;
}

.mks-404-block div + div {
	border-top: 1px solid #111;
}

.mks-404-block dt {
	color: var(--mks-label-color);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.mks-404-block dd {
	font-size: 13px;
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {

	.mks-reveal-js .mks-404-dimension::before {
		transform: scaleX(0);
		transition: transform 1.1s cubic-bezier(.165, .84, .44, 1) .2s;
	}

	.mks-reveal-js .mks-404-dimension.mks-reveal--in::before {
		transform: none;
	}
}

@media only screen and (max-width: 1024px) {

	#qodef-404-page.mks-404 {
		align-items: start;
		grid-template-columns: minmax(0, 1fr);
		min-height: calc(100vh - 96px);
		padding: 48px 20px 40px;
	}

	.mks-404-block {
		min-width: 0;
	}
}

/*
 * Footer (functions.php, archicon_mks_footer): località a sinistra, copyright a destra, nel
 * font dei testi piccoli, al gradino delle etichette. Sulle pagine dei progetti, sopra i
 * 1024 px, resta fisso in fondo alla finestra e la striscia si accorcia della sua altezza
 * (--mks-offset-bottom, strip.css del plugin).
 */
:root {
	--mks-footer-height: 48px;
}

.mks-footer {
	align-items: center;
	border-top: 1px solid #d4d4d4;
	box-sizing: border-box;
	color: var(--mks-label-color);
	display: flex;
	font-family: var(--mks-font-ui);
	font-size: var(--mks-text-xs);
	gap: 24px;
	justify-content: space-between;
	letter-spacing: .06em;
	line-height: 1.4;
	min-height: var(--mks-footer-height);
	/* On the right, room for Archicon's "back to top" (fixed, 40 px, 5 px from the edge). */
	padding: 12px 72px 12px 42px;
}

.mks-footer p {
	margin: 0;
}

.mks-footer a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

.mks-footer a:hover,
.mks-footer a:focus-visible {
	color: var(--qode-main-color, #000);
}

@media only screen and (min-width: 1025px) {

	.qodef-mks-strip-page {
		--mks-offset-bottom: var(--mks-footer-height);
	}

	/* No line: the progress line of the strip is just above. */
	.qodef-mks-strip-page .mks-footer {
		background-color: #fff;
		border-top: 0;
		bottom: 0;
		height: var(--mks-footer-height);
		left: 0;
		padding-right: 42px;
		position: fixed;
		right: 0;
		z-index: 10;
	}
}

@media only screen and (max-width: 1024px) {

	.mks-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
		padding: 20px;
	}
}