/**
 * Legal pages — privacy, terms, cookies (plans/10; redesigned plans/13).
 *
 * Layout: an ink header band over a centered paper reading column, matching the
 * site's "ink header → paper body" rhythm (contact/studio/work) instead of a
 * bare left-hung text block. Everything is scoped under .legal-page (body class
 * added in inc/enqueue.php). Header and body share ONE reading measure so the
 * title sits directly above the text column. Block class names (legal-meta /
 * legal-highlight / legal-table) come from the page content itself.
 */

.legal-page {
	--legal-measure: 54rem;
}

/* Ink header band ------------------------------------------------------------ */
.legal-page .legal-hero {
	position: relative;
	overflow: hidden;
	padding-block: calc(var(--inv-header-height) + var(--inv-space-2xl)) var(--inv-space-2xl);
	background: var(--inv-ink) var(--inv-backdrop) center / cover no-repeat;
	color: var(--inv-text-inv);
}

.legal-page .legal-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--inv-space-sm);
	max-width: var(--legal-measure);
}

.legal-page .legal-hero__title {
	margin: 0;
	font-size: clamp(2.4rem, 5vw, 3.5rem);
	line-height: 1.03;
	letter-spacing: -0.02em;
}

/* Paper reading column ------------------------------------------------------- */
.legal-page .legal-body {
	background: var(--inv-paper);
	padding-block: var(--inv-sect);
}

.legal-page .legal-body__inner {
	max-width: var(--legal-measure);
}

.legal-page .entry-content {
	font-size: 1.02rem;
	line-height: 1.75;
	color: var(--inv-text);
}

.legal-page .entry-content > * + * {
	margin-top: var(--inv-space-md);
}

/* Section headings get a hairline rule above for clear, editorial rhythm. */
.legal-page .entry-content h2 {
	margin-top: var(--inv-space-2xl);
	padding-top: var(--inv-space-lg);
	border-top: 1px solid var(--inv-line);
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.legal-page .entry-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-page .entry-content p,
.legal-page .entry-content li {
	max-width: none;
}

.legal-page .entry-content ul {
	display: grid;
	gap: var(--inv-space-xs);
	margin-left: var(--inv-space-md);
	list-style: disc;
}

.legal-page .entry-content strong {
	color: var(--inv-ink);
}

/* Links are ink + underline, not gold: gold on paper is ~2.2:1 and fails WCAG AA
   for body text (Direction — gold on paper is for large numerals/dots only). The
   underline carries the affordance; gold-deep is the hover accent only. */
.legal-page .entry-content a {
	color: var(--inv-text);
	text-decoration: underline;
	text-decoration-color: var(--inv-signal-deep);
	text-underline-offset: 0.15em;
	transition: color var(--inv-duration-fast) var(--inv-ease);
}

.legal-page .entry-content a:hover,
.legal-page .entry-content a:focus-visible {
	color: var(--inv-signal-deep);
}

/* Meta line ("Last updated …") — mono small caps, sits just under the title. */
.legal-page .legal-meta {
	color: var(--inv-muted);
	font-family: var(--inv-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Lead highlight box. */
.legal-page .legal-highlight {
	padding: var(--inv-space-md) var(--inv-space-lg);
	border-left: 3px solid var(--inv-signal);
	background: var(--inv-paper-deep);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* A highlight straight after the meta line shouldn't inherit the big h2 gap. */
.legal-page .entry-content .legal-highlight {
	margin-top: var(--inv-space-lg);
}

/* Cookie table. */
.legal-page .legal-table {
	overflow-x: auto;
}

.legal-page .legal-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.legal-page .legal-table th,
.legal-page .legal-table td {
	padding: var(--inv-space-sm);
	border: 1px solid rgba(9, 9, 13, 0.14);
	text-align: left;
	vertical-align: top;
}

.legal-page .legal-table thead th {
	background: var(--inv-ink);
	color: var(--inv-text-inv);
	font-family: var(--inv-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}