/* site/src/assets/css/page-about.css
 * Everything /about needs and no other page pays for. Order: the opening,
 * the switchboard (the page's one idea), the three rules, the flagship, the
 * honest list, the way out.
 *
 * The switchboard is the argument of the page made physical — six lines a
 * studio usually splits between six people, all cabled into one jack under
 * one name. Cables are SVG drawn from the real button positions at runtime;
 * this file owns how they look, about.js owns where they go.
 */

/* ── the opening ─────────────────────────────────────────────────────── */
.ab-open {
	background: var(--paper);
	padding: clamp(120px, 20vh, 220px) var(--gutter) clamp(60px, 10vh, 110px);
	display: grid;
	gap: clamp(18px, 3vh, 30px);
	max-width: var(--wide);
	margin: 0 auto;
	justify-items: start;
}

.ab-open__tag { color: var(--ink-soft); }

.ab-open__title {
	font: 800 clamp(52px, 12vw, 168px)/.86 var(--display);
	letter-spacing: -.05em;
	text-transform: uppercase;
	max-width: 12ch;
}
.ab-open__title em {
	font-style: normal;
	/* The second half is the load bearing half, so it gets the colour. */
	background: linear-gradient(96deg, var(--teal), var(--blue) 70%, var(--pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.ab-open__lead {
	font-size: clamp(18px, 1.7vw, 25px);
	line-height: 1.42;
	max-width: 46ch;
}

.ab-open__nots {
	list-style: none;
	display: grid;
	gap: 10px;
	max-width: 46ch;
	color: var(--ink-soft);
}
.ab-open__nots li {
	position: relative;
	padding-left: 30px;
	font: 500 clamp(14px, 1.05vw, 16px)/1.45 var(--mono);
}
/* A struck through line: these are the things that are not in the way. */
.ab-open__nots li::before {
	content: '';
	position: absolute;
	left: 0;
	top: .62em;
	width: 18px;
	height: 2px;
	background: var(--pink);
}

.ab-open__down {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 12px 0;
	color: var(--ink-soft);
	text-decoration: none;
	border-bottom: 2px solid var(--ink);
}
.ab-open__down span { animation: ab-sink 2s ease-in-out infinite; }
@keyframes ab-sink { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ── the switchboard ─────────────────────────────────────────────────── */
.ab-board {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
	scroll-margin-top: 80px; /* the fixed nav must not sit on the heading */
}

.ab-board__head {
	max-width: var(--wide);
	margin: 0 auto clamp(26px, 4vh, 48px);
	display: grid;
	gap: 10px;
}
.ab-board__head .label { color: var(--amber); }
.ab-board__head h2 {
	font: 800 clamp(34px, 5.2vw, 84px)/.95 var(--display);
	letter-spacing: -.04em;
}
.ab-board__sub { color: rgba(251, 249, 244, .7); max-width: 48ch; }

.ab-board__panel {
	position: relative;
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: clamp(28px, 5vw, 60px);
	padding: clamp(18px, 3vw, 34px);
	border-radius: 22px;
	background:
		radial-gradient(90% 70% at 80% 10%, rgba(0, 217, 184, .10), transparent 65%),
		linear-gradient(168deg, #16161f, #0b0b11);
	border: 1px solid rgba(251, 249, 244, .14);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 70px rgba(0, 0, 0, .45);
}
@media (min-width: 880px) {
	.ab-board__panel {
		grid-template-columns: minmax(300px, 1.15fr) minmax(250px, .85fr);
		align-items: center;
	}
}

/* The cable layer. Sized to the panel by about.js; never takes a click. */
.ab-board__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
}

.ab-wire {
	fill: none;
	stroke: var(--wire, var(--teal));
	stroke-width: 3.5;
	stroke-linecap: round;
	opacity: .85;
	filter: drop-shadow(0 0 7px var(--wire, var(--teal)));
	transition: stroke-dashoffset .75s cubic-bezier(.3, .8, .35, 1);
}
/* The second pass along the same curve: a short bright dash running the line,
   so a patched cable reads as carrying something. It only starts once the
   cable has finished drawing, which is what data-on marks. */
.ab-wire--pulse {
	stroke-width: 6;
	opacity: 0;
	filter: none;
	stroke-dasharray: 10 240;
	transition: opacity .3s;
}
.ab-cable[data-on] .ab-wire--pulse {
	opacity: .55;
	animation: ab-run 2.4s linear infinite;
}
@keyframes ab-run { to { stroke-dashoffset: -250; } }

/* The hue rides on the group, so both passes of a cable agree. */
.ab-cable--teal { --wire: var(--teal); }
.ab-cable--amber { --wire: var(--amber); }
.ab-cable--blue { --wire: var(--blue); }
.ab-cable--pink { --wire: var(--pink); }
.ab-cable--yellow { --wire: var(--yellow); }

/* Nothing moves while the board is off screen or the tab is in the background. */
.ab-board:not([data-live]) .ab-wire--pulse { animation-play-state: paused; }

.ab-board__sockets {
	list-style: none;
	display: grid;
	gap: 10px;
	position: relative;
	z-index: 2;
}

.ab-socket {
	--hue: var(--teal);
	width: 100%;
	min-height: 60px;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 14px;
	align-items: center;
	text-align: left;
	padding: 12px 16px;
	border: 1px solid rgba(251, 249, 244, .16);
	border-radius: 13px;
	background: rgba(251, 249, 244, .045);
	color: var(--paper);
	font-family: inherit;
	cursor: pointer;
	transition: background .2s, border-color .2s, transform .2s;
}
.ab-socket:hover { background: rgba(251, 249, 244, .09); transform: translateX(3px); }
.ab-socket[data-hue="teal"] { --hue: var(--teal); }
.ab-socket[data-hue="amber"] { --hue: var(--amber); }
.ab-socket[data-hue="blue"] { --hue: var(--blue); }
.ab-socket[data-hue="pink"] { --hue: var(--pink); }
.ab-socket[data-hue="yellow"] { --hue: var(--yellow); }

.ab-socket__name {
	font: 700 clamp(16px, 1.4vw, 21px)/1.15 var(--display);
	letter-spacing: -.02em;
}
.ab-socket__who {
	grid-column: 2;
	font: 400 clamp(12px, .95vw, 14px)/1.35 var(--mono);
	color: rgba(251, 249, 244, .56);
}

/* The hole the cable comes out of. Empty until the line is patched. */
.ab-socket__jack {
	grid-row: 1 / span 2;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #06060a;
	border: 2px solid rgba(251, 249, 244, .3);
	box-shadow: inset 0 2px 5px rgba(0, 0, 0, .9);
	position: relative;
	transition: border-color .2s;
}
.ab-socket__jack::after {
	content: '';
	position: absolute;
	inset: 5px;
	border-radius: 50%;
	background: var(--hue);
	transform: scale(0);
	transition: transform .25s cubic-bezier(.3, 1.5, .5, 1);
}

.ab-socket[aria-pressed="true"] {
	border-color: var(--hue);
	background: rgba(251, 249, 244, .1);
}
.ab-socket[aria-pressed="true"] .ab-socket__jack { border-color: var(--hue); }
.ab-socket[aria-pressed="true"] .ab-socket__jack::after { transform: scale(1); }
.ab-socket[aria-pressed="true"] .ab-socket__who { color: rgba(251, 249, 244, .8); }

/* ── the plate every line lands on ───────────────────────────────────── */
.ab-plate {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	text-align: center;
	gap: 12px;
}

.ab-plate__frame {
	position: relative;
	width: min(260px, 100%);
	aspect-ratio: 4 / 5;
	display: grid;
	place-items: center;
	border-radius: 14px;
	border: 2px dashed rgba(251, 249, 244, .26);
	background:
		radial-gradient(70% 55% at 50% 34%, rgba(0, 217, 184, .16), transparent 70%),
		linear-gradient(160deg, #101018, #07070c);
	overflow: hidden;
}
/* Framing marks, like a camera waiting for the subject to sit down. The
   emptiness has to look chosen, because it is. */
.ab-plate__frame::before,
.ab-plate__frame::after {
	content: '';
	position: absolute;
	width: 26px;
	height: 26px;
	border: 2px solid var(--teal);
	opacity: .8;
}
.ab-plate__frame::before { left: 12px; top: 12px; border-right: 0; border-bottom: 0; }
.ab-plate__frame::after { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }

.ab-plate__empty {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		122deg,
		rgba(251, 249, 244, .05) 0 2px,
		transparent 2px 11px
	);
}
.ab-plate__initials {
	font: 800 clamp(48px, 7vw, 76px)/1 var(--display);
	letter-spacing: -.04em;
	color: transparent;
	-webkit-text-stroke: 2px rgba(251, 249, 244, .34);
}

.ab-plate__pending {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	color: rgba(251, 249, 244, .55);
}

/* The one jack. Its glow is driven by how many cables are in it. */
.ab-plate__jack {
	--lines: 0;
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: radial-gradient(circle at 42% 36%, #4a4a58, #101018 70%);
	border: 3px solid rgba(251, 249, 244, .35);
	box-shadow: 0 0 calc(4px + var(--lines) * 5px) rgba(0, 217, 184, calc(.12 + var(--lines) * .13));
	transition: box-shadow .4s, border-color .4s;
}
.ab-plate__jack::after {
	content: '';
	position: absolute;
	inset: 8px;
	border-radius: 50%;
	background: #04040a;
	box-shadow: inset 0 2px 5px #000;
}
.ab-board[data-patched] .ab-plate__jack { border-color: var(--teal); }

.ab-plate__name {
	font: 700 clamp(20px, 2vw, 28px)/1.1 var(--display);
	letter-spacing: -.03em;
}
.ab-plate__role {
	font: 400 clamp(11px, .9vw, 13px)/1.6 var(--mono);
	letter-spacing: .04em;
	color: rgba(251, 249, 244, .6);
	max-width: 26ch;
}

/* ── board footer ────────────────────────────────────────────────────── */
.ab-board__foot {
	max-width: var(--wide);
	margin: clamp(20px, 3vh, 34px) auto 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 24px;
	align-items: center;
	justify-content: space-between;
}
.ab-board__count { color: var(--teal); }

.ab-board__clear {
	min-height: 44px;
	padding: 12px 20px;
	border: 1.5px solid rgba(251, 249, 244, .4);
	border-radius: 999px;
	background: transparent;
	color: var(--paper);
	font: 500 13px/1 var(--mono);
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.ab-board__clear:hover { background: var(--paper); color: var(--ink); }

/* ── the three rules ─────────────────────────────────────────────────── */
.ab-creed {
	background: var(--paper);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
}
.ab-creed__head {
	max-width: var(--wide);
	margin: 0 auto clamp(26px, 4vh, 48px);
	display: grid;
	gap: 10px;
}
.ab-creed__head .label { color: var(--ink-soft); }
.ab-creed__head h2 {
	font: 800 clamp(32px, 5vw, 76px)/.96 var(--display);
	letter-spacing: -.04em;
	max-width: 18ch;
}

.ab-creed__grid {
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}

/* Whole blocks of colour rather than accents — the house style. */
.ab-creed__card {
	--bg: var(--teal);
	background: var(--bg);
	color: var(--ink);
	border-radius: 18px;
	padding: clamp(24px, 3vw, 38px);
	display: grid;
	gap: 12px;
	align-content: start;
}
.ab-creed__card--teal { --bg: var(--teal); }
.ab-creed__card--amber { --bg: var(--amber); }
.ab-creed__card--pink { --bg: var(--pink); }

.ab-creed__no { opacity: .6; }
.ab-creed__card h3 {
	font: 800 clamp(24px, 2.6vw, 40px)/1 var(--display);
	letter-spacing: -.035em;
}
.ab-creed__card p { font-size: clamp(15px, 1.1vw, 17px); }

.ab-creed__foot {
	max-width: var(--wide);
	margin: clamp(20px, 3vh, 34px) auto 0;
	color: var(--ink-soft);
}
.ab-creed__foot a { text-underline-offset: 4px; }

/* ── the flagship ────────────────────────────────────────────────────── */
.ab-flag {
	background: var(--blue);
	color: var(--paper);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
}
.ab-flag__inner {
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: 16px;
	justify-items: start;
}
.ab-flag__inner .label { color: rgba(251, 249, 244, .75); }
.ab-flag__inner h2 {
	font: 800 clamp(34px, 6vw, 96px)/.92 var(--display);
	letter-spacing: -.045em;
	text-transform: uppercase;
}
.ab-flag__lead { font-size: clamp(17px, 1.4vw, 22px); line-height: 1.45; max-width: 52ch; }
.ab-flag__line {
	font: 600 clamp(18px, 2vw, 30px)/1.2 var(--display);
	letter-spacing: -.02em;
	color: var(--yellow);
	max-width: 24ch;
}
.ab-flag__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-top: 6px;
	padding: 13px 24px;
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink);
	font: 500 14px/1 var(--mono);
	letter-spacing: .06em;
	text-decoration: none;
	transition: transform .2s;
}
.ab-flag__link:hover { transform: translateX(4px); }

/* ── what we can show you ────────────────────────────────────────────── */
.ab-true {
	background: var(--paper);
	padding: clamp(60px, 10vh, 130px) var(--gutter);
}
.ab-true__head {
	max-width: var(--wide);
	margin: 0 auto clamp(26px, 4vh, 44px);
	display: grid;
	gap: 10px;
}
.ab-true__head .label { color: var(--ink-soft); }
.ab-true__head h2 {
	font: 800 clamp(30px, 4.6vw, 70px)/.98 var(--display);
	letter-spacing: -.04em;
}
.ab-true__sub { color: var(--ink-soft); max-width: 52ch; }

.ab-true__list {
	max-width: var(--wide);
	margin: 0 auto;
	list-style: none;
	counter-reset: proof;
	display: grid;
	gap: 0;
}
.ab-true__list li {
	counter-increment: proof;
	display: grid;
	gap: 6px;
	padding: clamp(20px, 3vh, 30px) 0 clamp(20px, 3vh, 30px) 58px;
	border-top: 1px solid var(--line);
	position: relative;
}
.ab-true__list li:last-child { border-bottom: 1px solid var(--line); }
.ab-true__list li::before {
	content: counter(proof, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: clamp(20px, 3vh, 30px);
	font: 500 13px/1.4 var(--mono);
	color: var(--teal);
	letter-spacing: .1em;
}
.ab-true__list h3 {
	font: 700 clamp(19px, 2vw, 30px)/1.1 var(--display);
	letter-spacing: -.03em;
}
.ab-true__list p { color: var(--ink-soft); max-width: 60ch; }

.ab-true__foot {
	max-width: var(--wide);
	margin: clamp(20px, 3vh, 32px) auto 0;
	color: var(--ink-soft);
}

/* ── the way out ─────────────────────────────────────────────────────── */
.ab-next {
	background: var(--ink);
	color: var(--paper);
	padding: clamp(60px, 11vh, 140px) var(--gutter);
}
.ab-next__inner {
	max-width: var(--wide);
	margin: 0 auto;
	display: grid;
	gap: 18px;
	justify-items: start;
}
.ab-next__title {
	font: 800 clamp(32px, 5.6vw, 88px)/.95 var(--display);
	letter-spacing: -.045em;
	max-width: 16ch;
}
.ab-next__line { color: rgba(251, 249, 244, .72); max-width: 50ch; font-size: clamp(16px, 1.2vw, 19px); }

.ab-next__row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }

.ab-next__cta {
	display: inline-flex;
	align-items: center;
	min-height: 52px;
	padding: 15px 28px;
	border-radius: 999px;
	background: var(--teal);
	color: var(--ink);
	font: 600 15px/1 var(--mono);
	letter-spacing: .06em;
	text-decoration: none;
	transition: transform .2s;
}
.ab-next__cta:hover { transform: scale(1.04) rotate(-1deg); }

.ab-next__alt {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-height: 52px;
	padding: 15px 24px;
	border: 1.5px solid rgba(251, 249, 244, .35);
	border-radius: 999px;
	font: 500 14px/1 var(--mono);
	text-decoration: none;
}
.ab-next__alt:hover { border-color: var(--paper); }
.ab-next__addr { color: var(--teal); }

.ab-next__small { color: rgba(251, 249, 244, .55); font-size: 15px; }
.ab-next__small a { text-underline-offset: 4px; }

/* ── motion off ──────────────────────────────────────────────────────── */
/* site.css already flattens durations; these are the decisions that need to
   change as well, not just their speed. */
@media (prefers-reduced-motion: reduce) {
	.ab-wire--pulse { display: none; }
	.ab-socket:hover { transform: none; }
	.ab-next__cta:hover, .ab-flag__link:hover { transform: none; }
}

/* ── narrow screens ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.ab-open__title { font-size: clamp(46px, 14vw, 74px); }
	.ab-socket__who { font-size: 12px; }
	.ab-board__foot { flex-direction: column; align-items: stretch; }
	.ab-board__clear { width: 100%; }
	.ab-board__count { text-align: center; }
}