/*
 * Tables, drawing sheet & utility-page set-pieces — Paganini Congressi
 * Owner: pages (Info Tecniche + Contatti). Carta Tecnica §3.5/§3.8/§3.9/§3.11
 * and §4.7/§4.8.
 *
 * Owns the DISJOINT slice of the drawing-sheet vocabulary used only by the two
 * utility pages, so it never collides with home (cards.css/hero.css) or inner
 * (page.css). Every component here is self-contained: it leans only on the
 * base.css :root token ramp (--pc-*), the theme.json presets, and the shared
 * core utilities (.pc-eyebrow / .pc-accent / .pc-folio / .pc-mono) so the pages
 * render to the boards regardless of sibling-agent timing.
 *
 * Namespacing:
 *   .pc-it-*     info-tecniche-local pieces (hero, note grid)
 *   .pc-ct-*     contatti-local pieces (hero dim col, transport)
 *   .pc-sheet*   the shared drawing sheet (TAV header + frame + scale bar)
 *   .pc-dl*      the PDF download rows (TAV.03)
 *   .pc-spec-grid  the capienze data grid (TAV.04)
 *   .pc-legend   the A/B/C/D legend list
 *   .pc-leadrow  dotted-leader spec rows (NOTE TECNICHE)
 *   .pc-map-plate the schematic localisation plate
 *   .pc-utilcta  the shared ink "scheda su misura" CTA band
 *
 * Brand hex appears only inside the enumerated chip/scrim rgba() strings the
 * brief sanctions; everything else reads tokens by name. CSS uses tabs.
 */

/* ===========================================================================
 * Drawing-sheet section header (TAV rule header — §3.5)
 * A top hairline rule, a meta row (tick eyebrow left / mono meta right) and a
 * serif title row with an italic accent word. Used above every set-piece on
 * the two pages. The eyebrow itself is the core .pc-eyebrow; this wraps it.
 * ========================================================================== */
.pc-sheet-title {
	margin: 0;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--ink);
}

.pc-sheet-title__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--40);
}

/* The right-hand meta note rides the mono ramp (mute on light). */
.pc-sheet-title__note {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--pc-mute);
}

/* Title row: serif at the section-H2 register, baseline-aligned with its accent.
   The TAV tag (mono, primary-strong) leads the serif name on the board. */
.pc-sheet-title__h {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
	flex-wrap: wrap;
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

.pc-sheet-title__tav {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-strong);
	align-self: center;
}

/* ===========================================================================
 * Hero (shared between the two pages, §4.7/§4.8 top block)
 * § eyebrow row + serif H2 + italic accent on the left; a small intro / dim
 * coordinate column on the right. The eyebrow + accent come from base.css.
 * ========================================================================== */
.pc-uhero__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--40);
}

.pc-uhero__kick {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono-wide);
	text-transform: uppercase;
	color: var(--pc-mute);
}

.pc-uhero__body {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: end;
}

.pc-uhero__h {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.75rem, 6vw, 4rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink);
}

.pc-uhero__lead {
	margin: 0;
	max-width: 32rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.55;
}

/* Right-hand dim coordinate column (LAT/LON/ALT) — mono, baseline grid. */
.pc-dimcol {
	display: grid;
	gap: 0.35rem;
	justify-content: end;
	text-align: right;
}

.pc-dimcol__row {
	display: grid;
	grid-template-columns: auto auto;
	gap: 0.75rem;
	align-items: baseline;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	font-variant-numeric: tabular-nums;
}

.pc-dimcol__k {
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	color: var(--pc-mute);
}

.pc-dimcol__v {
	color: var(--wp--preset--color--ink-soft);
}

@media (max-width: 781px) {
	.pc-uhero__body {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.pc-dimcol {
		justify-content: start;
		text-align: left;
	}
}

/* ===========================================================================
 * Plate caption (wide hero photo, §3.6)
 * A hairline-framed photo with a flat ink caption strip (NOT a gradient — the
 * only "scrim" left is the 80% ink bar). No grain, no duotone.
 * ========================================================================== */
.pc-plate {
	position: relative;
	border: 1px solid var(--pc-hairline);
	background: var(--wp--preset--color--base);
	overflow: hidden;
}

.pc-plate__fig {
	margin: 0;
}

.pc-plate__fig img {
	display: block;
	width: 100%;
	height: clamp(220px, 34vw, 460px);
	object-fit: cover;
}

/* Overlaid top tags (PLATE / scale chip) — flat ink chips, mono caps. */
.pc-plate__tags {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.75rem;
	pointer-events: none;
}

.pc-plate__tag {
	padding: 0.3rem 0.55rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.pc-plate__tag--plate {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--primary);
}

.pc-plate__tag--scale {
	background: var(--pc-ink-80);
	color: var(--wp--preset--color--base);
}

/* Flat 80%-ink caption strip across the foot of the plate. */
.pc-plate__cap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.pc-plate__cap-l {
	color: var(--pc-mute-light);
}

.pc-plate__cap-r {
	color: var(--wp--preset--color--primary);
}

/* ===========================================================================
 * Folio bar (DWG strip — §3.9)
 * Thin ink label bar over plates/sheets. Left tag + descriptor, right scale.
 * ========================================================================== */
.pc-folio-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.pc-folio-bar__l {
	display: inline-flex;
	gap: 0.875rem;
	flex-wrap: wrap;
}

.pc-folio-bar__tag {
	color: var(--wp--preset--color--primary);
}

.pc-folio-bar__desc {
	color: var(--wp--preset--color--base);
}

.pc-folio-bar__r {
	color: var(--pc-mute);
}

/* ===========================================================================
 * Drawing sheet (§3.9 — surface frame + ink title bar + plan + scale bar)
 * The axonometric pianta-complesso lives here. Plan image is .pc-plan:
 * filter:none, no hover zoom, crisp 1:1, never above 750px wide (do-not-break).
 * ========================================================================== */
.pc-sheet {
	border: 1px solid var(--pc-hairline);
	background: var(--wp--preset--color--surface);
}

/* The ink title bar across the top of the frame. */
.pc-sheet__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.pc-sheet__bar-l {
	color: var(--wp--preset--color--base);
}

.pc-sheet__bar-l b {
	font-weight: 400;
	color: var(--wp--preset--color--primary);
	margin-right: 0.875rem;
}

.pc-sheet__bar-r {
	color: var(--pc-mute-light);
}

/* The plan body: surface ground, generous padding, plan centred + contained. */
.pc-sheet__body {
	display: flex;
	justify-content: center;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

/* Plan / scheda image rule (do-not-break §6): crisp, no filter, no hover zoom,
   never above 750px wide. */
.pc-sheet__body .pc-plan,
.pc-sheet__body .pc-plan img,
.pc-plan,
.pc-plan img {
	filter: none !important;
	transition: none !important;
	transform: none !important;
	image-rendering: auto;
}

.pc-sheet__body .pc-plan {
	margin: 0;
	width: 100%;
	max-width: 750px;
}

.pc-sheet__body .pc-plan img {
	display: block;
	width: 100%;
	height: auto;
}

@media (hover: hover) {
	.pc-sheet__body .pc-plan:hover img,
	.pc-plan:hover img {
		transform: none !important;
		filter: none !important;
	}
}

/* Scale bar footer: ticks left (0 20 40 60 m), file caption right. */
.pc-sheet__scale {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--pc-hairline);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	font-variant-numeric: tabular-nums;
	color: var(--pc-mute);
}

.pc-sheet__scale-ticks {
	display: inline-flex;
	gap: 2.5rem;
}

.pc-sheet__scale-file {
	text-transform: none;
	letter-spacing: 0;
}

/* ===========================================================================
 * Legend list (A/B/C/D — §3.11, info-tecniche vertical variant)
 * Ink letter chip (code in primary) + serif name + body subtitle + mono tag.
 * ========================================================================== */
.pc-legend {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-legend__hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.875rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono-wide);
	text-transform: uppercase;
}

.pc-legend__hdr-l {
	color: var(--wp--preset--color--ink);
}

.pc-legend__hdr-r {
	color: var(--pc-mute);
	font-variant-numeric: tabular-nums;
}

.pc-legend__item {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	gap: 0 1rem;
	align-items: center;
	padding: 0.875rem 0;
	border-top: 1px solid var(--pc-hairline);
}

.pc-legend__code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--pc-fs-mono-xs);
}

.pc-legend__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 1.15;
	color: var(--wp--preset--color--ink);
}

.pc-legend__sub {
	grid-column: 2;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--pc-mute);
}

.pc-legend__tag {
	grid-row: 1 / span 2;
	grid-column: 3;
	align-self: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	color: var(--pc-mute);
	white-space: nowrap;
}

/* ===========================================================================
 * Download rows (TAV.03 — §3.9/§4.7)
 * Header row + each: index, serif name, mono filename·size, PDF badge, ink
 * SCARICA button. The button reuses the square ink button language.
 * ========================================================================== */
.pc-dl {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-dl__row {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
	gap: 1rem;
	align-items: center;
	padding: 1.25rem 0;
	border-top: 1px solid var(--pc-hairline);
}

.pc-dl__idx {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	font-variant-numeric: tabular-nums;
	color: var(--pc-mute);
}

.pc-dl__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.4vw, 1.5rem);
	line-height: 1.05;
	color: var(--wp--preset--color--ink);
}

.pc-dl__file {
	display: block;
	margin-top: 0.35rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	font-variant-numeric: tabular-nums;
	color: var(--pc-mute);
}

.pc-dl__badge {
	padding: 0.3rem 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	color: var(--pc-mute);
	border: 1px solid var(--pc-hairline);
	background: var(--wp--preset--color--surface);
}

/* Square ink download button with trailing arrow-down affordance. */
.pc-dl__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: var(--pc-fs-mono-md);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 0;
	transition: background-color var(--pc-dur-fast) var(--pc-ease);
}

.pc-dl__btn::after {
	content: "\2193"; /* arrow down */
	color: var(--wp--preset--color--primary);
	transition: transform var(--pc-dur-fast) var(--pc-ease);
}

@media (hover: hover) {
	.pc-dl__btn:hover {
		background: #2a2622;
	}

	.pc-dl__btn:hover::after {
		transform: translateY(2px);
	}
}

.pc-dl__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-strong);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.pc-dl__row {
		grid-template-columns: 2rem minmax(0, 1fr);
		row-gap: 0.75rem;
	}

	.pc-dl__badge {
		grid-column: 2;
		justify-self: start;
	}

	.pc-dl__btn {
		grid-column: 1 / -1;
		justify-content: center;
	}
}

/* ===========================================================================
 * Capienze grid (TAV.04 — §3.8)
 * A row-marker data table: A/B/C/D letter, serif name + subtitle, then four
 * right-aligned mono value columns. Em-dash for N/D. Built as a grid so the
 * row marker + serif name layout reads cleanly.
 * ========================================================================== */
.pc-spec-grid {
	margin: 0;
}

.pc-spec-grid__row {
	display: grid;
	grid-template-columns: 1.6rem minmax(0, 2fr) repeat(4, minmax(0, 1fr));
	gap: 0 1rem;
	align-items: center;
	padding: 1.1rem 0;
	border-top: 1px solid var(--pc-hairline);
}

/* Header row: mono mute column labels; right-aligned for the data columns. */
.pc-spec-grid__row--head {
	padding: 0 0 0.75rem;
	border-top: 0;
}

.pc-spec-grid__h {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	color: var(--pc-mute);
}

.pc-spec-grid__h--num,
.pc-spec-grid__v {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pc-spec-grid__code {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--pc-fs-mono-xs);
	color: var(--wp--preset--color--primary-strong);
}

.pc-spec-grid__name {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 1.1;
	color: var(--wp--preset--color--ink);
}

.pc-spec-grid__sub {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--pc-mute);
}

.pc-spec-grid__v {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--pc-fs-mono-md);
	color: var(--wp--preset--color--ink);
}

/* N/D dash reads quieter than a real value. */
.pc-spec-grid__v--nd {
	font-weight: 400;
	color: var(--pc-mute);
}

@media (max-width: 781px) {
	.pc-spec-grid__row {
		grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 0.5rem;
	}

	.pc-spec-grid__row--head {
		display: none;
	}

	.pc-spec-grid__name {
		grid-column: 2 / -1;
	}

	.pc-spec-grid__sub {
		grid-column: 2 / -1;
	}

	/* Each value carries its own mono label so the table reads without headers. */
	.pc-spec-grid__v {
		text-align: left;
	}

	.pc-spec-grid__v::before {
		content: attr(data-label) "  ";
		color: var(--pc-mute);
		font-weight: 400;
	}
}

/* ===========================================================================
 * Dotted-leader spec rows (NOTE TECNICHE right column — §3.7)
 * Label, a flex leader filled with a dotted rule, then a value. The leader is
 * a real element so it reflows; preferred over a literal "· · ·" string.
 * ========================================================================== */
.pc-leadrow {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--pc-hairline);
}

.pc-leadrow__k {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	color: var(--pc-mute);
	white-space: nowrap;
}

.pc-leadrow__dots {
	flex: 1 1 auto;
	align-self: stretch;
	border-bottom: 1px dotted var(--pc-hairline);
	transform: translateY(-0.3em);
	min-width: 1.5rem;
}

.pc-leadrow__v {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 600;
	font-size: var(--pc-fs-mono-md);
	letter-spacing: var(--pc-ls-mono);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--ink);
	white-space: nowrap;
}

/* ===========================================================================
 * Schematic map plate (contatti — §4.8, replaces the OSM iframe)
 * A surface grid with an N marker, an orange crosshair + ink tooltip, a scale
 * bar and a foot row. No fake map imagery, no third-party tiles.
 * ========================================================================== */
.pc-map-plate {
	margin: 0;
}

.pc-map-plate__hdr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	color: var(--pc-mute);
}

/* The grid field: surface ground ruled with hairline grid lines. */
.pc-map-plate__field {
	position: relative;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--pc-hairline);
	background-color: var(--wp--preset--color--surface);
	background-image:
		linear-gradient(var(--pc-hairline) 1px, transparent 1px),
		linear-gradient(90deg, var(--pc-hairline) 1px, transparent 1px);
	background-size: 9.09% 11.11%;
	background-position: 0 0;
	overflow: hidden;
}

.pc-map-plate__n {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	color: var(--pc-mute);
}

/* Orange crosshair: a full-height vertical rule at x=62% with a full-width
   horizontal rule crossing it at the field's vertical centre (the site point).
   Both rules are field-relative so they always meet at (62%, 50%). */
.pc-map-plate__cross {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 62%;
	width: 1px;
	transform: translateX(-0.5px);
	background: var(--wp--preset--color--primary);
}

.pc-map-plate__cross::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -1000px;
	right: -1000px;
	height: 1px;
	transform: translateY(-0.5px);
	background: var(--wp--preset--color--primary);
}

/* The site ring sits where the crosshair crosses (field x=62%, y=50%). */
.pc-map-plate__dot {
	position: absolute;
	top: 50%;
	left: 62%;
	width: 14px;
	height: 14px;
	transform: translate(-50%, -50%);
	border: 2px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: transparent;
}

/* Ink tooltip to the right of the dot. */
.pc-map-plate__tip {
	position: absolute;
	top: 50%;
	left: calc(62% + 0.75rem);
	transform: translateY(-50%);
	padding: 0.4rem 0.6rem;
	background: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	line-height: 1.4;
}

.pc-map-plate__tip b {
	display: block;
	font-weight: 400;
	color: var(--wp--preset--color--base);
}

.pc-map-plate__tip span {
	color: var(--wp--preset--color--primary);
}

/* Scale bar inside the field foot. */
.pc-map-plate__scale {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-xs);
	letter-spacing: var(--pc-ls-mono);
	font-variant-numeric: tabular-nums;
	color: var(--pc-mute);
}

.pc-map-plate__scale-bar {
	width: 4.5rem;
	height: 2px;
	background: var(--wp--preset--color--ink);
}

.pc-map-plate__scale-ticks {
	display: inline-flex;
	gap: 1.75rem;
}

.pc-map-plate__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin-top: 0.875rem;
}

.pc-map-plate__foot-note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.pc-map-plate__foot-link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--primary-strong);
}

.pc-map-plate__foot-link::after {
	content: "\2192"; /* arrow right */
	transition: transform var(--pc-dur-fast) var(--pc-ease);
}

@media (hover: hover) {
	.pc-map-plate__foot-link:hover::after {
		transform: translateX(0.25rem);
	}
}

/* ===========================================================================
 * Transport columns (contatti "A pochi passi dal centro" — §4.8)
 * Three columns, each with a left orange tick rule, mono index + label, serif
 * value and a body description.
 * ========================================================================== */
.pc-transport {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--ink);
}

.pc-transport__col {
	position: relative;
	padding-left: 1.25rem;
}

.pc-transport__col::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--primary);
}

.pc-transport__kick {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.pc-transport__idx {
	color: var(--wp--preset--color--primary-strong);
}

.pc-transport__label {
	color: var(--wp--preset--color--ink);
}

.pc-transport__v {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--wp--preset--color--ink);
}

.pc-transport__desc {
	margin: 0;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}

@media (max-width: 781px) {
	.pc-transport {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

/* ===========================================================================
 * Utility-page ink CTA band ("Serve una scheda su misura?" — §4.7)
 * Shared between the two pages where the board shows the ink CTA. Eyebrow tick
 * + serif H2 with italic accent + body on the left; a ghost (bordered) button
 * + contact line on the right.
 * ========================================================================== */
.pc-utilcta__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

.pc-utilcta__h {
	margin: 0 0 var(--wp--preset--spacing--40);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 3.375rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--base);
}

.pc-utilcta__body {
	margin: 0;
	max-width: 34rem;
	color: var(--pc-mute-light);
	line-height: 1.55;
}

.pc-utilcta__aside {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: end;
	text-align: right;
}

/* Ghost button on ink: white border + white mono label + arrow. */
.pc-utilcta__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.875rem 1.4rem;
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-size: var(--pc-fs-mono-md);
	letter-spacing: var(--pc-ls-mono);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base);
	border-radius: 0;
	transition: background-color var(--pc-dur-fast) var(--pc-ease),
		color var(--pc-dur-fast) var(--pc-ease);
}

.pc-utilcta__btn::after {
	content: "\2192"; /* arrow right */
	color: var(--wp--preset--color--primary);
	transition: transform var(--pc-dur-fast) var(--pc-ease);
}

@media (hover: hover) {
	.pc-utilcta__btn:hover {
		background: var(--wp--preset--color--base);
		color: var(--wp--preset--color--ink);
	}

	.pc-utilcta__btn:hover::after {
		transform: translateX(0.25rem);
	}
}

.pc-utilcta__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.pc-utilcta__contact {
	margin: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-md);
	letter-spacing: var(--pc-ls-mono);
	color: var(--pc-mute-light);
}

.pc-utilcta__contact a {
	color: var(--pc-mute-light);
	text-decoration: none;
}

.pc-utilcta__contact a:hover,
.pc-utilcta__contact a:focus-visible {
	color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {
	.pc-utilcta__grid {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}

	.pc-utilcta__aside {
		justify-items: start;
		text-align: left;
	}
}

/* ===========================================================================
 * NOTE TECNICHE two-column (info-tecniche §4.7)
 * Left mono label + body note; right the dotted-leader spec rows.
 * ========================================================================== */
.pc-it-note {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.pc-it-note__label {
	margin: 0 0 0.875rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--pc-fs-mono-sm);
	letter-spacing: var(--pc-ls-mono-wide);
	text-transform: uppercase;
	color: var(--pc-mute);
}

.pc-it-note__body {
	margin: 0;
	max-width: 34rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

@media (max-width: 781px) {
	.pc-it-note {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--40);
	}
}

/* ===========================================================================
 * info-tecniche pianta two-column (drawing sheet left, legend right)
 * ========================================================================== */
.pc-it-pianta {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

@media (max-width: 1024px) {
	.pc-it-pianta {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

/* Section reveal stagger helper for rows (motion contract; no-op without JS). */
.pc-dl__row,
.pc-spec-grid__row:not(.pc-spec-grid__row--head),
.pc-legend__item,
.pc-transport__col {
	--pc-i: 0;
}

.pc-dl__row:nth-child(2) { --pc-i: 1; }
.pc-dl__row:nth-child(3) { --pc-i: 2; }
.pc-transport__col:nth-child(2) { --pc-i: 1; }
.pc-transport__col:nth-child(3) { --pc-i: 2; }