/*
 * Framed titles, root .smh-frame-title (design A "Living Network", inner pages, 2026-10-01). A core/group that wraps
 * one heading: the identity's top + bottom brackets (never four corners) around the title. Brackets open from the
 * title's centre line and the title is revealed between them (design A's one reveal gesture for titles).
 * - .smh-frame-title          on paper: 3 px bar in the logo gradient (steel left -> petrol right, physical), arms steel / petrol.
 * - .smh-frame-title--dark    on petrol: 2 px, steel -> white.
 * - .smh-frame-title--load    opens on page load (the title band H1); otherwise assets/js/inner.js adds .is-open in view.
 * Each bracket is a pseudo-element covering half of the frame, so "from the centre line" is translateY(100%) of
 * itself: no measuring. Transform + opacity for the brackets; one clip-path pass on the title (once per title).
 * No JS: brackets and title are simply there. Failsafe: html.smh-js without html.smh-io (script missing) shows all
 * after 3 s. Reduced motion: static. Chromium 114; logical properties; tokens only.
 */

.smh-frame-title {
	--smh-ft-arm: clamp(10px, 1.1vw, 15px);
	--smh-ft-bw: 3px;
	--smh-ft-pad-b: clamp(14px, 1.7vw, 26px);
	--smh-ft-pad-i: clamp(14px, 2vw, 30px);
	--smh-ft-bar: var(--smh-grad-logo);
	--smh-ft-c1: var(--smh-steel);
	--smh-ft-c2: var(--smh-petrol);
	position: relative;
	inline-size: fit-content;
	max-inline-size: calc(100% + var(--smh-ft-pad-i));
	padding: var(--smh-ft-pad-b) var(--smh-ft-pad-i);
	margin-inline-start: calc(-1 * var(--smh-ft-pad-i));
}
.wp-block-group.smh-frame-title { margin-block-end: 0; }
.smh-frame-title--dark {
	--smh-ft-bw: 2px;
	--smh-ft-bar: linear-gradient(90deg, color-mix(in srgb, var(--smh-steel) 75%, transparent), var(--smh-white));
	--smh-ft-c1: color-mix(in srgb, var(--smh-steel) 75%, transparent);
	--smh-ft-c2: var(--smh-white);
}
.smh-frame-title > * { margin: 0; }
.smh-frame-title::before,
.smh-frame-title::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 50%;
	pointer-events: none;
}
.smh-frame-title::before {
	top: 0;
	background:
		var(--smh-ft-bar) 0 0 / 100% var(--smh-ft-bw) no-repeat,
		linear-gradient(var(--smh-ft-c1), var(--smh-ft-c1)) 0 0 / var(--smh-ft-bw) var(--smh-ft-arm) no-repeat,
		linear-gradient(var(--smh-ft-c2), var(--smh-ft-c2)) 100% 0 / var(--smh-ft-bw) var(--smh-ft-arm) no-repeat;
}
.smh-frame-title::after {
	bottom: 0;
	background:
		var(--smh-ft-bar) 0 100% / 100% var(--smh-ft-bw) no-repeat,
		linear-gradient(var(--smh-ft-c1), var(--smh-ft-c1)) 0 100% / var(--smh-ft-bw) var(--smh-ft-arm) no-repeat,
		linear-gradient(var(--smh-ft-c2), var(--smh-ft-c2)) 100% 100% / var(--smh-ft-bw) var(--smh-ft-arm) no-repeat;
}

/* Motion (only with JS, only without reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	.smh-js .smh-frame-title:not(.smh-frame-title--load)::before { opacity: 0; transform: translateY(100%) scaleX(0.06); }
	.smh-js .smh-frame-title:not(.smh-frame-title--load)::after { opacity: 0; transform: translateY(-100%) scaleX(0.06); }
	.smh-js .smh-frame-title:not(.smh-frame-title--load) > :first-child { clip-path: inset(50% -12% 50% -12%); }

	.smh-frame-title--load::before,
	.smh-js .smh-frame-title.is-open::before { animation: smh-ft-top 1.4s both; }
	.smh-frame-title--load::after,
	.smh-js .smh-frame-title.is-open::after { animation: smh-ft-bottom 1.4s both; }
	.smh-frame-title--load > :first-child,
	.smh-js .smh-frame-title.is-open > :first-child { animation: smh-ft-clip 1.4s both; }
	.smh-frame-title--load::before,
	.smh-frame-title--load::after,
	.smh-frame-title--load > :first-child { animation-delay: 0.15s; }

	/* Failsafe: the page asked for reveals (smh-js) but the script never started (no smh-io). */
	.smh-js:not(.smh-io) .smh-frame-title:not(.smh-frame-title--load)::before,
	.smh-js:not(.smh-io) .smh-frame-title:not(.smh-frame-title--load)::after { animation: smh-ft-show 0.6s 3s both; }
	.smh-js:not(.smh-io) .smh-frame-title:not(.smh-frame-title--load) > :first-child { animation: smh-ft-clip 0.6s 3s both; }
}

@keyframes smh-ft-top {
	0% { opacity: 0; transform: translateY(100%) scaleX(0.06); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
	34% { opacity: 1; transform: translateY(100%) scaleX(1); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
	100% { opacity: 1; transform: none; }
}
@keyframes smh-ft-bottom {
	0% { opacity: 0; transform: translateY(-100%) scaleX(0.06); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
	34% { opacity: 1; transform: translateY(-100%) scaleX(1); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
	100% { opacity: 1; transform: none; }
}
@keyframes smh-ft-clip {
	0%, 34% { clip-path: inset(50% -12% 50% -12%); animation-timing-function: cubic-bezier(0.7, 0, 0.15, 1); }
	100% { clip-path: inset(-30% -12% -30% -12%); }
}
@keyframes smh-ft-show { from { opacity: 0; } to { opacity: 1; transform: none; } }

/* Section titles framed on inner pages: design A's H2 scale. */
.smh-frame-title > .wp-block-heading {
	font-size: clamp(1.875rem, 3vw, 2.875rem);
	font-weight: 700;
	line-height: 1.35;
	text-wrap: balance;
}
html[lang|="en"] .smh-frame-title > .wp-block-heading { line-height: 1.2; }
.smh-frame-title:not(.smh-frame-title--dark) > .wp-block-heading { color: var(--smh-ink); }
.smh-frame-title--dark > .wp-block-heading { color: var(--smh-white); }

@media (max-width: 599px) {
	.smh-frame-title { --smh-ft-pad-i: 12px; --smh-ft-pad-b: 12px; }
}
@media print {
	.smh-frame-title::before, .smh-frame-title::after { display: none; }
	.smh-frame-title > :first-child { clip-path: none !important; }
}