/* =========================================================================
   Studio Variant — About / Studio Development page

   Page-scoped layer, class-prefixed .ab-*, loaded after sv.css and the
   shared page chrome in scanning.css. It cannot reach the landing page,
   the five approved capability chapters, the Commercial page or the
   Creators page.

   The capability pages are about process. Commercial is about business
   outcomes. Creators is about the distance between a rough input and a
   finished object. This page is about the idea behind all of them, so
   the visual language here is version numbers, expanding boundaries and
   links that run in more than one direction.

   The page has two halves and they are deliberately different:

   - Everything before the transition band describes the studio that
     exists. Solid hairlines, titanium accents, ordinary section rules.
   - Everything after it is direction, not product. Those sections carry
     .ab-future: a dashed top rule, a sunken field, a wider grid, and a
     status chip. Nothing in the second half is allowed to look live.
   ========================================================================= */

/* ------------------------------- 1. Hero ------------------------------- */

.ab-hero {
	position: relative;
	overflow: hidden;
	padding: var(--sv-10) 0 var(--sv-8);
	background: radial-gradient(110% 80% at 14% 10%, rgba(140, 155, 163, 0.08) 0%, transparent 60%),
		radial-gradient(90% 70% at 92% 86%, rgba(195, 160, 106, 0.05) 0%, transparent 62%),
		var(--sv-bg);
}

.ab-hero-inner {
	position: relative;
	display: grid;
	gap: var(--sv-7);
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	align-items: center;
}

.ab-hero-text {
	max-width: 54ch;
}

.ab-hero h1 {
	margin: var(--sv-5) 0 0;
	font-family: var(--sv-font-display);
	/* Four short lines, so the type is set to the longest of them rather
	   than to the full display scale — nothing here should wrap. */
	font-size: clamp(2.5rem, 4.5vw, 4.25rem);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: -0.03em;
	color: var(--sv-text);
}

.ab-hero h1 span {
	display: block;
}

.ab-hero h1 span:nth-child(2) {
	color: var(--sv-mist-200);
}

.ab-hero h1 span:nth-child(3),
.ab-hero h1 span:nth-child(4) {
	color: var(--sv-mist-300);
}

.ab-hero-lede {
	margin: var(--sv-6) 0 0;
	max-width: 52ch;
	color: var(--sv-text-secondary);
}

/* The founding principle, set as a statement rather than a paragraph. */
.ab-principle {
	margin: var(--sv-5) 0 0;
	padding-left: var(--sv-4);
	border-left: 1px solid var(--sv-brass-line);
	display: grid;
	gap: 2px;
}

.ab-principle b {
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.018em;
	color: var(--sv-text);
}

.ab-principle b + b {
	color: var(--sv-mist-200);
}

.ab-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
	margin-top: var(--sv-7);
}

.ab-hero-art {
	position: relative;
}

/* --------------------------- 2. Plate hosts ---------------------------- */

/* Drawings keep their annotation size and pan sideways rather than
   shrinking to an unreadable width. Narrow compositions are drawn by
   about.js, so most plates never need to pan on a phone. */
.ab-env {
	position: relative;
	margin-top: var(--sv-6);
	overflow-x: auto;
	overflow-y: hidden;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
	-webkit-overflow-scrolling: touch;
}

.ab-env.is-future {
	border-style: dashed;
	border-color: var(--sv-titanium-line);
}

.ab-env.is-flush {
	margin-top: 0;
}

.ab-svg {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------- 3. Hero motion ---------------------------- */

.ab-hero-svg.is-armed .ab-h-s {
	opacity: 0;
}

.ab-hero-svg.is-armed.is-running .ab-h-s {
	animation: ab-in 0.8s var(--sv-ease-precision) forwards;
	animation-delay: calc(var(--i) * 0.34s);
}

@keyframes ab-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.ab-hero-svg.is-running .ab-h-flow path {
	animation: ab-dash 2.6s linear infinite;
}

@keyframes ab-dash {
	to {
		stroke-dashoffset: -32;
	}
}

/* The version rail lifts one cell at a time so V01 → V04 reads as a
   sequence rather than four static drawings. */
[data-ab="variant"].is-running .ab-v-cell {
	animation: ab-pulse 7.2s var(--sv-ease-precision) infinite;
	animation-delay: calc(var(--i) * 1.8s);
}

@keyframes ab-pulse {
	0%,
	72%,
	100% {
		opacity: 0.68;
	}
	12%,
	26% {
		opacity: 1;
	}
}

[data-ab="connected"].is-running .ab-c-loop path {
	animation: ab-dash 3.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.ab-hero-svg .ab-h-s,
	.ab-map-svg .ab-m-s,
	.ab-v-cell {
		opacity: 1 !important;
		animation: none !important;
	}
	.ab-h-flow path,
	.ab-c-loop path {
		animation: none !important;
	}
}

/* --------------------------- 4. Section heads -------------------------- */

.ab-head {
	display: grid;
	gap: var(--sv-4);
	max-width: 62ch;
}

.ab-head > * {
	margin: 0;
}

.ab-head h2 span {
	display: block;
}

.ab-head .sv-body-l {
	max-width: 66ch;
	color: var(--sv-text-secondary);
}

/* A statement that stands on its own, with a rule above it. */
.ab-line {
	margin: var(--sv-8) 0 0;
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.022em;
	color: var(--sv-text);
}

.ab-line span {
	display: block;
}

.ab-line span + span {
	color: var(--sv-mist-300);
}

.ab-line.is-brass {
	border-top-color: var(--sv-brass-line);
}

/* Stacked display lines, the last one brightest. Used where the brief
   asks for a three-line statement. */
.ab-stack {
	display: grid;
	gap: 2px;
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.024em;
	color: var(--sv-mist-400);
}

.ab-stack span:last-child {
	color: var(--sv-text);
}

/* ----------------------------- 5. Chips -------------------------------- */

.ab-pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
}

.ab-pills li {
	padding: 7px var(--sv-3);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-pill);
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.ab-pills.is-quiet li {
	border-style: dashed;
	background: none;
	color: var(--sv-text-muted);
}

/* Possible starting points. Every one is an equal way in, so they are
   drawn as a plain field of equals rather than a ranked list. */
.ab-starts {
	display: grid;
	gap: var(--sv-3);
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
}

.ab-starts li {
	display: flex;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-left: 1px solid var(--sv-titanium-line);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	font-size: var(--sv-body-s);
	color: var(--sv-mist-200);
}

.ab-starts b {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-weight: 500;
	color: var(--sv-text-faint);
}

/* ------------------------- 6. The name section ------------------------- */

.ab-name {
	background: radial-gradient(90% 80% at 76% 20%, rgba(195, 160, 106, 0.08) 0%, transparent 64%),
		var(--sv-bg-sunken);
}

.ab-name-top {
	display: grid;
	gap: var(--sv-7);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	align-items: end;
}

.ab-name h2 {
	margin: var(--sv-4) 0 0;
	font-family: var(--sv-font-display);
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.04em;
	color: var(--sv-text);
}

.ab-name h2 span {
	display: block;
}

.ab-name h2 span + span {
	color: var(--sv-brass);
}

/* A dictionary entry, set as one. */
.ab-def {
	padding: var(--sv-6);
	border: 1px solid var(--sv-border-strong);
	border-top: 1px solid var(--sv-brass-line);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface-raised);
}

.ab-def dt {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sv-3);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	letter-spacing: -0.012em;
	color: var(--sv-text);
}

.ab-def dt i {
	font-family: var(--sv-font-body);
	font-style: italic;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}

.ab-def dt em {
	font-family: var(--sv-font-mono);
	font-style: normal;
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

.ab-def dd {
	margin: var(--sv-4) 0 0;
	padding-top: var(--sv-4);
	border-top: 1px solid var(--sv-border-hairline);
	font-size: var(--sv-body-l);
	line-height: 1.5;
	color: var(--sv-mist-100);
}

.ab-def p {
	margin: var(--sv-4) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}

/* The studio's own reading of the word: input on the left, variant on
   the right, with the transition drawn between them. */
.ab-interp {
	display: grid;
	gap: 0;
	margin: var(--sv-8) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sv-border);
}

.ab-interp li {
	display: grid;
	gap: var(--sv-3);
	grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
	align-items: center;
	padding: var(--sv-4) 0;
	border-bottom: 1px solid var(--sv-border-hairline);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ab-interp b {
	font-weight: 400;
	color: var(--sv-text-muted);
}

.ab-interp i {
	font-style: normal;
	text-align: center;
	color: var(--sv-brass);
}

.ab-place {
	display: grid;
	gap: var(--sv-6);
	margin-top: var(--sv-8);
}

.ab-place-head {
	display: grid;
	gap: var(--sv-5) var(--sv-8);
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: end;
}

.ab-map-svg.is-armed .ab-m-s {
	opacity: 0;
}

.ab-map-svg.is-armed.is-running .ab-m-s {
	animation: ab-in 0.9s var(--sv-ease-precision) forwards;
	animation-delay: calc(var(--i) * 0.55s);
}

.ab-vsteps {
	display: grid;
	gap: 0 var(--sv-6);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--sv-border);
}
.ab-vsteps li {
	padding: var(--sv-4) 0 0;
	font-size: var(--sv-body-s);
	line-height: 1.5;
	color: var(--sv-text-secondary);
}
.ab-vsteps b {
	display: block;
	margin-bottom: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	font-weight: 400;
	letter-spacing: 0.12em;
	color: var(--sv-text-muted);
}
.ab-vsteps li:last-child b {
	color: var(--sv-brass);
}
.ab-vnote {
	margin: var(--sv-5) 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ab-interp u {
	text-decoration: none;
	color: var(--sv-text);
}

/* --------------------------- 7. Capability rail ------------------------ */

.ab-caps {
	display: grid;
	gap: var(--sv-2);
	margin: var(--sv-6) 0 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ab-caps a {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	transition: border-color var(--sv-base) var(--sv-ease-precision),
		color var(--sv-base) var(--sv-ease-precision);
}

.ab-caps a:hover {
	border-color: var(--sv-titanium-line);
	color: var(--sv-text);
}

.ab-caps b {
	font-weight: 500;
	color: var(--sv-text-faint);
}

.ab-caps span {
	margin-left: auto;
	color: var(--sv-text-faint);
}

/* ---------------------- 8. Two routes into the studio ------------------ */

.ab-routes {
	display: grid;
	gap: var(--sv-4);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: var(--sv-7);
}

.ab-route {
	display: grid;
	gap: var(--sv-4);
	align-content: start;
	padding: var(--sv-6);
	border: 1px solid var(--sv-border);
	border-top: 1px solid var(--sv-titanium-line);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
}

.ab-route.is-creator {
	border-top-color: var(--sv-brass-line);
}

.ab-route h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	color: var(--sv-text);
}

.ab-route p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
}

/* ------------------------- 9. The transition band ---------------------- */

/* The hinge of the page. Everything above it exists; everything below it
   is direction. It is the only section that gets full-bleed treatment. */
.ab-transition {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sv-9), 12vw, 160px) 0;
	border-top: 1px solid var(--sv-border-strong);
	border-bottom: 1px solid var(--sv-border-strong);
	background: linear-gradient(180deg, var(--sv-bg) 0%, #08090a 46%, var(--sv-bg) 100%);
}

/* The grid widens as the page pulls back. */
.ab-transition::before {
	content: "";
	position: absolute;
	inset: -10% -5%;
	pointer-events: none;
	background-image: linear-gradient(to right, rgba(185, 192, 196, 0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(185, 192, 196, 0.06) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 72% 90% at 50% 50%, #000 0%, transparent 76%);
	-webkit-mask-image: radial-gradient(ellipse 72% 90% at 50% 50%, #000 0%, transparent 76%);
}

.ab-transition-inner {
	position: relative;
	display: grid;
	gap: var(--sv-6);
	justify-items: center;
	text-align: center;
}

.ab-transition h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(2.4rem, 6vw, 4.75rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.032em;
	color: var(--sv-text);
}

.ab-transition h2 span {
	display: block;
}

.ab-transition h2 span:last-child {
	color: var(--sv-brass);
}

.ab-transition p {
	margin: 0;
	max-width: 62ch;
	color: var(--sv-text-secondary);
}

.ab-gaps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sv-2) var(--sv-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}

.ab-gaps li + li::before {
	content: "·";
	margin-right: var(--sv-4);
	color: var(--sv-brass);
}

/* --------------------------- 10. Status language ----------------------- */

.ab-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	padding: 5px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-surface);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	white-space: nowrap;
}

.ab-tag::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: currentColor;
}

.ab-tag.is-live {
	border-color: var(--sv-titanium-line);
	color: var(--sv-mist-100);
}

.ab-tag.is-dev {
	border-color: var(--sv-border-strong);
	color: var(--sv-mist-300);
}

.ab-tag.is-future {
	border-style: dashed;
	border-color: var(--sv-brass-line);
	color: var(--sv-brass);
}

.ab-legend {
	display: grid;
	gap: var(--sv-4);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: var(--sv-7) 0 0;
}

.ab-legend div {
	display: grid;
	gap: var(--sv-3);
	align-content: start;
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
}

.ab-legend .ab-tag {
	justify-self: start;
}

.ab-legend p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
}

/* ------------------------- 11. The future sections --------------------- */

/* Every section past the transition carries this, so the second half of
   the page never visually competes with the studio that exists. */
.ab-future {
	border-top: 1px dashed var(--sv-border);
	background: rgba(8, 9, 10, 0.4);
}

.ab-future-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3);
	margin-bottom: var(--sv-5);
}

.ab-future-head .sv-section-mark {
	margin: 0;
}

.ab-note {
	margin: var(--sv-6) 0 0;
	padding: var(--sv-4) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-left: 2px solid var(--sv-brass-line);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-bg-sunken);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	line-height: 1.7;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}

.ab-note.is-plain {
	border-left-color: var(--sv-titanium-line);
	font-family: var(--sv-font-body);
	font-size: var(--sv-body-s);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.6;
}

.ab-note a {
	color: var(--sv-mist-100);
}

/* ------------------------- 12. Generic content grids ------------------- */

.ab-two {
	display: grid;
	gap: var(--sv-7);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	margin-top: var(--sv-7);
}

.ab-two.is-lead {
	grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.ab-block {
	display: grid;
	gap: var(--sv-4);
	align-content: start;
}

.ab-block > * {
	margin: 0;
}

.ab-block .sv-body-l {
	max-width: 62ch;
	color: var(--sv-text-secondary);
}

.ab-list {
	display: grid;
	gap: var(--sv-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-list li {
	display: flex;
	gap: var(--sv-3);
	padding-bottom: var(--sv-2);
	border-bottom: 1px solid var(--sv-border-hairline);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.ab-list li::before {
	content: "—";
	color: var(--sv-text-faint);
}

/* The three example journeys through the ecosystem. */
.ab-paths {
	display: grid;
	gap: var(--sv-4);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	margin: var(--sv-7) 0 0;
	padding: 0;
	list-style: none;
	counter-reset: abpath;
}

.ab-paths li {
	display: grid;
	gap: var(--sv-3);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-surface);
}

.ab-paths li::before {
	counter-increment: abpath;
	content: "PATH 0" counter(abpath);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.2em;
	color: var(--sv-brass);
}

.ab-paths p {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	line-height: 1.9;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
}

.ab-paths em {
	font-style: normal;
	color: var(--sv-text-faint);
}

/* --------------------------- 13. Human element ------------------------- */

.ab-studio-voice {
	display: grid;
	gap: var(--sv-5);
	margin-top: var(--sv-7);
	padding: var(--sv-6);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-surface);
}

.ab-studio-voice p {
	margin: 0;
	max-width: 68ch;
	color: var(--sv-text-secondary);
}

.ab-studio-voice .sv-label {
	color: var(--sv-text-faint);
}

.ab-origin {
	display: grid;
	gap: var(--sv-7) var(--sv-8);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
	margin-top: var(--sv-8);
	padding-top: var(--sv-7);
	border-top: 1px solid var(--sv-border);
}

.ab-origin-copy {
	display: grid;
	gap: var(--sv-5);
	max-width: 56ch;
}

.ab-origin-copy > * {
	margin: 0;
}

.ab-origin-head {
	display: grid;
	gap: 2px;
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.026em;
	color: var(--sv-text);
}

.ab-pull {
	position: relative;
	padding: var(--sv-4) 0 var(--sv-4) var(--sv-5);
	border-left: 1px solid var(--sv-brass);
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: -0.014em;
	color: var(--sv-text);
}

.ab-origin-then {
	display: grid;
	gap: var(--sv-4);
	margin-top: var(--sv-7);
	padding-top: var(--sv-6);
	border-top: 1px solid var(--sv-border-hairline);
}

.ab-origin-then-line {
	display: grid;
	gap: 2px;
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: var(--sv-text-muted);
}

.ab-origin-then-line span:last-child {
	color: var(--sv-text);
}

.ab-origin-then .ab-pills {
	margin-top: var(--sv-2);
}

/* ------------------------------ 14. Close ------------------------------ */

.ab-final {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sv-9), 10vw, 150px) 0 var(--sv-9);
	border-top: 1px solid var(--sv-border-strong);
	background: radial-gradient(100% 80% at 50% 0%, rgba(195, 160, 106, 0.08) 0%, transparent 62%),
		var(--sv-bg);
}

.ab-final-inner {
	display: grid;
	gap: var(--sv-6);
	justify-items: center;
	text-align: center;
}

.ab-final h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(2.4rem, 6.4vw, 5rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.034em;
	color: var(--sv-text);
}

.ab-final h2 span {
	display: block;
}

.ab-final h2 span:last-child {
	color: var(--sv-mist-300);
}

.ab-final p {
	margin: 0;
	max-width: 62ch;
	color: var(--sv-text-secondary);
}

.ab-final-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sv-3);
	margin-top: var(--sv-2);
}

.ab-pair {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sv-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ab-pair a {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	/* 24px touch target; the negative margin keeps the row rhythm */
	padding: 3px 0;
	margin: -3px 0;
	transition: color var(--sv-base) var(--sv-ease-precision);
}

.ab-pair a:hover {
	color: var(--sv-text);
}

.ab-pair b {
	font-weight: 400;
	color: var(--sv-text-faint);
}

.ab-signoff {
	display: grid;
	gap: 2px;
	margin-top: var(--sv-8);
	padding-top: var(--sv-7);
	border-top: 1px solid var(--sv-border);
	width: 100%;
	text-align: center;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.04;
	letter-spacing: -0.026em;
	color: var(--sv-text);
}

.ab-signoff span:last-child {
	color: var(--sv-brass);
}

/* --------------------------- 15. Responsive ---------------------------- */

@media (max-width: 1080px) {
	.ab-origin {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-origin > [data-ab="origin"] {
		max-width: 660px;
	}

	.ab-place-head {
		grid-template-columns: minmax(0, 1fr);
		align-items: start;
	}

	.ab-vsteps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ab-hero-inner,
	.ab-name-top,
	.ab-two,
	.ab-two.is-lead {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-hero-art {
		order: 2;
	}
}

@media (max-width: 760px) {
	.ab-vsteps {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.ab-vsteps li {
		padding: var(--sv-3) 0;
		border-bottom: 1px solid var(--sv-border-hairline);
	}

	.ab-hero {
		padding: var(--sv-8) 0 var(--sv-7);
	}

	.ab-hero h1 {
		font-size: clamp(2.4rem, 11vw, 3.2rem);
	}

	.ab-principle b {
		font-size: var(--sv-h4);
	}

	.ab-hero-actions .sv-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.ab-name h2 {
		font-size: clamp(2.75rem, 17vw, 4rem);
	}

	/* The word and its variant stack, so neither annotation shrinks. */
	.ab-interp li {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-1);
		padding: var(--sv-4) 0;
	}

	.ab-interp i {
		text-align: left;
	}

	.ab-line,
	.ab-stack,
	.ab-signoff {
		font-size: var(--sv-h3);
	}

	.ab-transition {
		padding: var(--sv-8) 0;
	}

	.ab-gaps {
		justify-content: flex-start;
		text-align: left;
	}

	.ab-transition-inner,
	.ab-final-inner {
		justify-items: start;
		text-align: left;
	}

	.ab-final-actions,
	.ab-pair {
		justify-content: flex-start;
	}

	.ab-final-actions .sv-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.ab-signoff {
		text-align: left;
	}

	.ab-def {
		padding: var(--sv-5);
	}

	.ab-starts {
		grid-template-columns: minmax(0, 1fr);
	}

	.ab-caps a,
	.ab-legend div,
	.ab-paths li {
		padding: var(--sv-4);
	}
}