/*
	Sito: www.anthonycandiello.it
	Pagine dei progetti (si aggiunge a screen.css)
*/

.post-head .byline{
	margin:-8px 0 14px;
	font:600 0.95rem/1.4 "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
	letter-spacing:0.03em;
	color:var(--stone-700);
}

.keywords{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 1.4rem;
	padding:0;
	list-style:none;
}

.keywords li{
	margin:0;
	padding:0.35rem 0.8rem;
	border-radius:999px;
	background:var(--sand-50);
	border:1px solid rgba(126, 79, 38, 0.16);
	font:600 0.82rem/1.2 "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
	letter-spacing:0.04em;
	color:var(--sand-700);
}

.post-head .lead{
	font-size:1.08rem;
}

.toc{
	margin-top:1.2rem;
	padding:18px 22px 8px;
	border-radius:20px;
	background:linear-gradient(180deg, rgba(251,244,234,0.78), rgba(255,255,255,0.92));
	border:1px solid rgba(126, 79, 38, 0.08);
}

.toc h4{
	margin-bottom:10px;
	color:var(--stone-700);
}

.toc ol{
	columns:2;
	column-gap:32px;
}

.toc li{
	margin-bottom:0.35rem;
	break-inside:avoid;
}

.post h3{
	margin-top:1.8rem;
}

.post p,
.post li{
	max-width:78ch;
}

.post code{
	font:0.86em/1.4 Consolas, "Cascadia Mono", "Courier New", monospace;
	padding:0.08em 0.35em;
	border-radius:6px;
	background:var(--sand-50);
	border:1px solid rgba(126, 79, 38, 0.12);
}

.post pre{
	margin:0 0 1.4rem;
	padding:18px 22px;
	border-radius:18px;
	background:var(--stone-900);
	color:var(--sand-50);
	overflow-x:auto;
	box-shadow:var(--shadow-soft);
}

.post pre code{
	padding:0;
	border:0;
	background:none;
	color:inherit;
	font-size:0.88rem;
	line-height:1.6;
}

.post pre .cm{
	color:var(--sand-300);
}

.table-wrap{
	margin:0 0 1.4rem;
	overflow-x:auto;
	border-radius:18px;
	border:1px solid rgba(126, 79, 38, 0.12);
	background:rgba(255,255,255,0.9);
}

table.data{
	width:100%;
	border-collapse:collapse;
	font-size:0.95rem;
	line-height:1.5;
}

table.data th,
table.data td{
	padding:0.6rem 0.9rem;
	text-align:left;
	vertical-align:top;
	border-bottom:1px solid rgba(126, 79, 38, 0.1);
}

table.data th{
	background:var(--sand-100);
	font:600 0.85rem/1.3 "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
	letter-spacing:0.04em;
	text-transform:uppercase;
	color:var(--stone-700);
}

table.data tr:last-child td{
	border-bottom:0;
}

table.data td.num{
	white-space:nowrap;
}

table.data tr.twice td{
	background:rgba(244,229,207,0.5);
}

.formula{
	margin:0 0 1.2rem;
	padding:8px 18px;
	border-left:3px solid var(--sand-300);
	background:rgba(251,244,234,0.6);
	border-radius:0 14px 14px 0;
	overflow-x:auto;
}

.post figure{
	margin:0.6rem 0 1.6rem;
	padding:20px 22px 14px;
	border-radius:22px;
	background:var(--white);
	border:1px solid rgba(126, 79, 38, 0.1);
	box-shadow:var(--shadow-soft);
}

.post figure .fig-title{
	margin:0 0 4px;
	font-size:1.12rem;
	font-weight:bold;
}

.post figure .fig-sub{
	margin:0 0 10px;
	font-size:0.92rem;
	color:var(--stone-500);
}

.post figure svg{
	display:block;
	width:100%;
	height:auto;
	font-family:"Palatino Linotype", "Book Antiqua", Georgia, serif;
}

.post figure figcaption{
	margin-top:8px;
	font:0.8rem/1.4 "Trebuchet MS", "Gill Sans", "Segoe UI", sans-serif;
	color:var(--stone-500);
}

.fig .ink{ fill:var(--stone-900); }
.fig .quiet{ fill:var(--stone-500); }
.fig .box{ fill:none; stroke:var(--stone-300); stroke-width:1.25; }
.fig .box.twice{ fill:var(--sand-100); stroke:var(--sand-500); stroke-width:2; }
.fig .grid{ stroke:rgba(126, 79, 38, 0.14); }
.fig .a1{ fill:none; stroke:#7e4f26; stroke-width:1.6; }
.fig .a2{ fill:none; stroke:#3f7480; stroke-width:1.6; stroke-dasharray:6 4; }
.fig .link{ fill:none; stroke:var(--stone-500); stroke-width:1.25; }
.fig .head{ fill:var(--sand-100); stroke:var(--stone-300); stroke-width:1.25; }
.fig .accent{ fill:rgba(180, 125, 68, 0.14); stroke:var(--sand-500); stroke-width:2; }
.fig .pad{ fill:none; stroke:var(--stone-300); stroke-width:1.25; stroke-dasharray:4 4; }
.fig .endrow{ fill:var(--sand-100); }
.fig .bar{ fill:var(--sand-200); }
.fig .bar.twin{ fill:var(--sand-700); }

.callout{
	margin:0 0 1.4rem;
	padding:14px 20px;
	border-radius:16px;
	background:rgba(244,229,207,0.45);
	border:1px solid rgba(126, 79, 38, 0.14);
	font-size:0.98rem;
}

.refs li{
	margin-bottom:0.7rem;
}

@media (max-width: 640px){
	.toc ol{
		columns:1;
	}

	.post figure{
		padding:14px 12px 10px;
		overflow-x:auto;
	}

	/* Sotto questa larghezza le etichette diventerebbero illeggibili: si scorre */
	.post figure svg{
		min-width:560px;
	}

	.post td code{
		overflow-wrap:anywhere;
	}
}