/* ── Concyerge · un solo mondo visivo, dipinto per intero ──────────────────
   Il sito non segue il tema del browser: un marchio si presenta uguale a
   tutti. Ogni colore e' quindi dichiarato, mai ereditato dall'ospite. */
:root {
	--noce: #332B25;          /* il fondo scuro: l'atrio */
	--bruno: #473C33;         /* il marrone del marchio: pannelli */
	--bruno-chiaro: #574A3F;  /* bordi sullo scuro */
	--ottone: #FEC868;        /* il giallo del marchio: l'unico accento */
	--oliva: #ABC270;         /* verde pieno: riempimenti, mai testo */
	--foglia: #55702D;        /* oliva scuro: testo e link sulla carta */
	--carta: #EFEDE3;         /* carta calda, virata all'oliva */
	--carta-cupa: #E3E0D2;    /* pannelli e bordi sulla carta */
	--inchiostro: #2B241E;
	--inchiostro-tenue: #665C50;
	--crema: #EAE4D8;
	--crema-tenue: #AFA396;

	--misura: 34rem;          /* ~65 caratteri di testo corrente */
	--respiro: clamp(3.5rem, 8vw, 7rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
	margin: 0;
	background: var(--carta);
	color: var(--inchiostro);
	font-family: 'Instrument Sans', ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
	font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
	line-height: 1.65;
	overflow-x: hidden;
}

h1, h2, h3 {
	font-family: Fraunces, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	line-height: 1.08;
	text-wrap: balance;
	margin: 0;
	font-variation-settings: 'SOFT' 20, 'WONK' 1;
	letter-spacing: -.012em;
}

p { margin: 0; }
a { color: inherit; }

:focus-visible {
	outline: 2px solid var(--ottone);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ── impalcatura ──────────────────────────────────────────────────────── */
.dentro {
	width: min(100% - 2.5rem, 68rem);
	margin-inline: auto;
}
.fascia { padding-block: var(--respiro); }
.fascia--scura { background: var(--noce); color: var(--crema); }
.fascia--bruna { background: var(--bruno); color: var(--crema); }

/* l'occhiello: dice di che sezione si tratta, non decora */
.occhiello {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--foglia);
	margin: 0 0 1.1rem;
}
.fascia--scura .occhiello, .fascia--bruna .occhiello { color: var(--ottone); }

.titolo-fascia { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); }
.sommario {
	max-width: var(--misura);
	margin-top: 1.15rem;
	color: var(--inchiostro-tenue);
	font-size: 1.06em;
}
.fascia--scura .sommario, .fascia--bruna .sommario { color: var(--crema-tenue); }

/* ── l'atrio: il portone ──────────────────────────────────────────────── */
.atrio {
	background: var(--noce);
	color: var(--crema);
	padding-block: clamp(2rem, 5vw, 3rem) var(--respiro);
	position: relative;
	overflow: hidden;
}
/* la luce sopra il portone */
.atrio::before {
	content: "";
	position: absolute;
	inset: -35% -10% auto;
	height: 80vh;
	background: radial-gradient(52% 46% at 46% 0%, rgba(254, 200, 104, .13), transparent 76%);
	pointer-events: none;
}
.atrio > * { position: relative; }

.targa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem .8rem;
	margin-bottom: clamp(3rem, 9vw, 5.5rem);
}
.targa svg { width: 2.6rem; height: auto; color: var(--ottone); display: block; }
.targa b {
	font-family: Fraunces, Georgia, serif;
	font-weight: 600;
	font-size: 1.35rem;
	letter-spacing: -.01em;
}

/* la portineria: in un palazzo, le domande si fanno li'. Un bottone solo, in alto a destra, uguale
   sulla home e sulle pagine generate (che caricano questo stesso foglio): la seconda copia di uno
   stile nasce identica e diverge al primo ritocco. Sulla pagina delle domande e' la pagina
   corrente, e si accende come al passaggio del mouse. */
.portineria {
	margin-left: auto;
	padding: .45rem .95rem;
	border: 1px solid var(--bruno-chiaro);
	border-radius: 3px;
	color: var(--crema);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .18s ease, color .18s ease;
}
.portineria:hover, .portineria:focus-visible, .portineria[aria-current="page"] {
	border-color: var(--ottone);
	color: var(--ottone);
}

.atrio h1 {
	font-size: clamp(2.05rem, .9rem + 5.4vw, 5.1rem);
	max-width: 17ch;
	font-weight: 700;
}
.atrio h1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--ottone);
}
.occhiante {
	max-width: 40rem;
	margin-top: 1.7rem;
	font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem);
	color: var(--crema-tenue);
}

/* i due campanelli: la pagina si divide come si divide il palazzo */
.campanelli {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1rem;
	margin-top: clamp(2.5rem, 6vw, 4rem);
	max-width: 46rem;
}
.campanello {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.4rem 1.5rem;
	background: var(--bruno);
	border: 1px solid var(--bruno-chiaro);
	border-radius: 3px;
	text-decoration: none;
	color: var(--crema);
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.campanello:hover, .campanello:focus-visible {
	background: #50443A;
	border-color: var(--ottone);
	transform: translateY(-2px);
}
.campanello span {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ottone);
	font-weight: 600;
}
.campanello strong {
	font-family: Fraunces, Georgia, serif;
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -.01em;
}
.campanello em {
	font-style: normal;
	color: var(--crema-tenue);
	font-size: .93rem;
	line-height: 1.5;
}

/* ── cos'e': tre voci in fila ─────────────────────────────────────────── */
.definizione {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2.5rem 3rem;
	margin-top: 3rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--carta-cupa);
}
.definizione h3 { font-size: 1.22rem; margin-bottom: .5rem; }
.definizione p { color: var(--inchiostro-tenue); font-size: .98rem; }

/* ── le voci di una sezione ───────────────────────────────────────────── */
.voci {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
	gap: 2.2rem 2.8rem;
	margin-top: clamp(2.5rem, 6vw, 3.5rem);
	list-style: none;
	padding: 0;
}
.voci li { display: flex; flex-direction: column; gap: .55rem; }
.voci h3 { font-size: 1.2rem; }
.voci p { font-size: .97rem; color: var(--inchiostro-tenue); }
.fascia--bruna .voci p { color: var(--crema-tenue); }

/* il filo che apre ogni voce: oliva sulla carta, ottone sullo scuro */
.voci li::before {
	content: "";
	width: 2rem;
	height: 3px;
	background: var(--oliva);
	border-radius: 2px;
}
.fascia--bruna .voci li::before { background: var(--ottone); }

/* la coda della sezione di chi amministra: il pannello ha un gemello in tasca */
.mobilita {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr);
	gap: 2.2rem 3.5rem;
	align-items: center;
	margin-top: clamp(3rem, 7vw, 4.5rem);
	padding-top: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--bruno-chiaro);
}
@media (max-width: 46rem) { .mobilita { grid-template-columns: minmax(0, 1fr); } }
.mobilita .figura { max-width: 16rem; }
.mobilita h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); margin-bottom: .8rem; }
.mobilita p { color: var(--crema-tenue); max-width: var(--misura); }

/* ── come si entra: qui il numero e' vero, e' una sequenza ────────────── */
.scala { counter-reset: passo; list-style: none; padding: 0; margin: 3rem 0 0; }
.scala li {
	counter-increment: passo;
	display: grid;
	grid-template-columns: 3.2rem 1fr;
	gap: 0 1.4rem;
	padding: 1.6rem 0;
	border-top: 1px solid var(--carta-cupa);
	align-items: baseline;
}
.scala li::before {
	content: counter(passo, decimal-leading-zero);
	font-family: Fraunces, Georgia, serif;
	font-size: 1.5rem;
	color: var(--foglia);
	font-variant-numeric: tabular-nums;
}
.scala h3 { font-size: 1.2rem; }
.scala p { grid-column: 2; color: var(--inchiostro-tenue); font-size: .97rem; margin-top: .4rem; max-width: var(--misura); }

.chiave {
	margin-top: 2.6rem;
	padding: 1.5rem 1.7rem;
	background: var(--carta-cupa);
	border-left: 3px solid var(--foglia);
	border-radius: 0 3px 3px 0;
	max-width: 44rem;
}
.chiave strong { font-weight: 600; }

/* ── le regole della casa: citazioni brevi ────────────────────────────── */
.regole {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 2.4rem 3.5rem;
	max-width: 56rem;
	margin-top: 3rem;
	list-style: none;
	padding: 0;
}
.regole li { border-top: 1px solid var(--bruno-chiaro); padding-top: 1.2rem; }
.regole h3 {
	font-size: 1.3rem;
	font-style: italic;
	font-weight: 400;
	color: var(--ottone);
	margin-bottom: .6rem;
}
.regole p { color: var(--crema-tenue); font-size: .96rem; }

/* ── in arrivo ────────────────────────────────────────────────────────── */
.arrivo { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.8rem 2.6rem; margin-top: 2.6rem; list-style: none; padding: 0; }
.arrivo li { display: flex; flex-direction: column; gap: .4rem; }
.arrivo h3 { font-size: 1.08rem; }
.arrivo p { font-size: .94rem; color: var(--inchiostro-tenue); }

/* ── piede ────────────────────────────────────────────────────────────── */
.piede { background: var(--noce); color: var(--crema); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.piede-riga {
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem 4rem;
	align-items: start;
	justify-content: space-between;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid var(--bruno-chiaro);
}
.piede h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); max-width: 22ch; flex: 1 1 20rem; }
.piede-recapito { display: flex; flex-direction: column; gap: .5rem; }
.piede a { color: var(--ottone); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.piede small { display: block; color: var(--crema-tenue); font-size: .88rem; }
.legale {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
	margin-top: 1.8rem;
	font-size: .9rem;
}
.legale a { color: var(--ottone); text-underline-offset: 3px; }

.coda {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2rem;
	justify-content: space-between;
	margin-top: 2rem;
	font-size: .85rem;
	color: var(--crema-tenue);
}
.coda p { max-width: 46ch; }

/* ── le due figure ────────────────────────────────────────────────────
   Sono schermate vere del prodotto, non simulazioni: quello che si vede
   qui e' quello che si trova entrando. */
.figura { margin: 0; }
.figura img { display: block; width: 100%; height: auto; }
.figura figcaption {
	margin-top: .9rem;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--inchiostro-tenue);
	max-width: 34rem;
}
.fascia--bruna .figura figcaption { color: var(--crema-tenue); }

/* il pannello: uno schermo chiaro acceso sul fondo scuro */
.figura--pannello { margin-top: clamp(2.5rem, 6vw, 3.5rem); }
.schermo {
	border: 1px solid var(--bruno-chiaro);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 26px 64px -22px rgba(0, 0, 0, .6);
	background: #EEF1F8;
}

/* l'apertura della sezione residente: testo e telefono accanto */
.apertura {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 18.5rem;
	gap: 2.5rem 3.5rem;
	align-items: center;
}
@media (max-width: 54rem) { .apertura { grid-template-columns: minmax(0, 1fr); } }

/* il telefono sfuma in fondo: la schermata continua, non e' tagliata */
.telefono { position: relative; --sfumatura: var(--carta); }
.fascia--bruna .telefono { --sfumatura: var(--bruno); }
.fascia--bruna .telefono img { border-color: var(--bruno-chiaro); }
.telefono img {
	border-radius: 16px;
	border: 1px solid var(--carta-cupa);
	box-shadow: 0 20px 44px -22px rgba(43, 36, 30, .45);
}
.telefono::after {
	content: "";
	position: absolute;
	inset: auto 1px 1px;
	height: 5.5rem;
	border-radius: 0 0 15px 15px;
	background: linear-gradient(to bottom, transparent, var(--sfumatura) 88%);
	pointer-events: none;
}