/* The archive design standard, shared with The Harness. Plain CSS with no framework or build
   step, so any site can link it. Pages compose these classes (components/archive holds the
   React templates); values live here and nowhere else.
   Source: docs/brand/archive-design. tools/website/sync_archive.py copies it to each site; change it there.

   Contents: tokens, type, layout, surfaces, marks, controls, site chrome. */

/* ── Fonts: self-hosted full files, so every glyph (the arrows too) is the same on every site.
   The lab font standard is Space Grotesk (display), Inter (body) and JetBrains Mono (mono),
   set by Brian on 2026-11-09. Do not change it without Brian's approval;
   website/tests/font-standard.test.mjs pins it. ── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/archive-fonts/inter-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/archive-fonts/inter-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/archive-fonts/inter-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/archive-fonts/inter-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/archive-fonts/inter-800.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/archive-fonts/jetbrains-mono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/archive-fonts/jetbrains-mono-500.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/archive-fonts/jetbrains-mono-600.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/archive-fonts/jetbrains-mono-700.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/archive-fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUUsj.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/archive-fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUUsj.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/archive-fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj42Vksj.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/archive-fonts/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj4PVksj.ttf') format('truetype');
}

/* ── Tokens ── */
:root {
	color-scheme: dark;
	--ar-bg: #09121d;
	--ar-fg: #eaf4f6;
	--ar-muted: #c3d2d9;
	--ar-accent: #69e5f3;
	--ar-pink: #f456a6;
	--ar-surface: #112332;
	--ar-line: #547383;
	--ar-bright: #5be0e9;
	--ar-scan: rgba(100, 226, 239, 0.035);

	--ar-cyan: #04d9ed;
	--ar-magenta: #ff2b9f;
	--ar-face: #17152d;
	--ar-face-hover: #24213e;
	--ar-face-text: #e7f7ff;
	--ar-face-edge: #4b6577;
	--ar-shadow-lg: 5px 5px 0 var(--ar-cyan), 10px 10px 0 var(--ar-magenta);
	--ar-shadow: 4px 4px 0 var(--ar-cyan), 8px 8px 0 var(--ar-magenta);
	--ar-shadow-sm: 3px 3px 0 var(--ar-cyan), 6px 6px 0 var(--ar-magenta);
	--ar-shadow-xs: 2px 2px 0 var(--ar-cyan), 4px 4px 0 var(--ar-magenta);
	--ar-barcode: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 3px, currentColor 3px 5px, transparent 5px 7px, currentColor 7px 8px, transparent 8px 12px);

	--ar-display: "Space Grotesk", "Inter", Arial, sans-serif;
	--ar-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ar-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

	--ar-width: 1120px;
	--ar-masthead: 112px;
}

:root[data-theme="light"],
.pearl {
	color-scheme: light;
	--ar-bg: #f1f2f5;
	--ar-fg: #20233f;
	--ar-muted: #5a647a;
	--ar-accent: #087f9c;
	--ar-pink: #bc276e;
	--ar-surface: #e5eaf0;
	--ar-line: #92a7b5;
	--ar-bright: #078fa6;
	--ar-scan: rgba(33, 102, 126, 0.04);
}

@media (max-width: 800px) {
	:root { --ar-masthead: 80px; }
}

/* ── Type ── */
.ar-h1,
.ar-h2 {
	margin: 0;
	font-family: var(--ar-display);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
}

/* Sized for Space Grotesk, about a third wider than a condensed face. */
.ar-h1 { font-size: clamp(56px, 6vw, 84px); }
.ar-h2 { font-size: clamp(32px, 3.6vw, 48px); }

.ar-h3 {
	margin: 0 0 20px;
	font: 500 clamp(22px, 2.2vw, 28px) / 1.2 var(--ar-display);
	letter-spacing: 0;
}

.ar-h4 {
	margin: 0;
	font: 500 20px / 1.25 var(--ar-display);
	letter-spacing: 0;
}

.ar-tagline {
	margin: 24px 0 0;
	font: 400 clamp(22px, 2.3vw, 32px) / 1.25 var(--ar-display);
	letter-spacing: 0;
}

.ar-tagline em { font-style: normal; color: var(--ar-accent); }

.ar-copy {
	margin: 0;
	font-size: 16px;
	line-height: 1.8;
	color: var(--ar-muted);
}

.ar-copy strong { color: var(--ar-fg); font-weight: 500; }
.ar-copy + .ar-copy { margin-top: 18px; }

.ar-meta {
	font-family: var(--ar-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--ar-muted);
}

/* ── Layout ── */
.ar-wrap {
	width: 88%;
	max-width: var(--ar-width);
	margin-inline: auto;
}

.ar-section {
	position: relative;
	padding-block: 65px 70px;
}

.ar-section-head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-bottom: 38px;
}

.ar-section-head > .ar-rail { margin-left: auto; }

.ar-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 8%;
	align-items: center;
	padding: 65px 0 110px;
	min-height: 680px;
}

.ar-hero > * { min-width: 0; }
.ar-hero,
.ar-footer { line-height: normal; }

.ar-hero-side { position: relative; }

/* A caption hangs under the figure, outside the row, so the figure centres on the copy. */
.ar-hero-caption {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	right: 0;
}

.ar-hero-note {
	max-width: 460px;
	min-height: 184px;
	margin-top: 36px;
	padding: 20px 22px 28px;
	background: var(--ar-surface);
	box-shadow: var(--ar-shadow);
}

.ar-hero-note .ar-copy { font-size: 15px; line-height: 1.7; }

.ar-hero-note-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 500;
	color: var(--ar-fg);
}

.ar-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 30px;
}

.ar-feature {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 6%;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.ar-feature--reverse { grid-template-columns: 1.2fr 0.8fr; }
.ar-feature > * { min-width: 0; }

.ar-block::before {
	content: '';
	display: block;
	width: 28px;
	height: 2px;
	margin-bottom: 22px;
	background: var(--ar-accent);
}

.ar-grid {
	display: grid;
	grid-template-columns: repeat(var(--ar-columns, 4), minmax(0, 1fr));
	gap: 25px;
}

/* Links may arrive wrapped by the page-transition element; cards still fill their row. */
.ar-grid > * > .ar-card { height: 100%; }

@media (max-width: 1100px) {
	.ar-hero { gap: 6%; padding-top: 45px; min-height: 590px; }
	.ar-h1 { font-size: 6vw; }
	.ar-screen--fill { height: 380px; }
	.ar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

@media (max-width: 800px) {
	.ar-section { padding-block: 42px 35px; }
	.ar-h1 { font-size: clamp(46px, 11vw, 68px); }
	.ar-h2 { font-size: 34px; }
	.ar-section-head { margin-bottom: 28px; }
	.ar-tagline { font-size: 26px; }
	html[lang^="zh"] .ar-tagline { font-size: min(26px, 6.4vw); }
	.ar-hero { grid-template-columns: 1fr; gap: 48px; min-height: 0; padding: 35px 0 55px; }
	.ar-hero-side > .ar-panel { margin-right: 10px; }
	.ar-screen--fill { height: auto; aspect-ratio: 1; }
	.ar-hero-note { margin-top: 28px; margin-right: 8px; min-height: 0; }
	.ar-hero-caption { position: static; margin-top: 24px; }
	.ar-feature,
	.ar-feature--reverse { grid-template-columns: 1fr; gap: 30px; }
	.ar-feature > .ar-panel { margin-right: 10px; }
}

@media (max-width: 520px) {
	.ar-grid { grid-template-columns: 1fr; gap: 30px; }
	.ar-tagline { font-size: 24px; }
	.ar-rail { display: none; }
}

/* ── Surfaces ── */
.ar-panel {
	position: relative;
	min-width: 0;
	background: var(--ar-surface);
	box-shadow: var(--ar-shadow-lg);
}

.ar-panel--md { box-shadow: var(--ar-shadow); }
.ar-panel--sm { box-shadow: var(--ar-shadow-sm); }

/* A plate: hairline, cyan register, barcode. Modules take it with `composes`. */
.ar-plate {
	position: relative;
	border: 1px solid var(--ar-line);
}

.ar-plate::before {
	content: '';
	position: absolute;
	left: -1px;
	top: -1px;
	width: 27px;
	height: 2px;
	background: var(--ar-bright);
	pointer-events: none;
}

.ar-plate::after {
	content: '';
	position: absolute;
	left: 24px;
	bottom: 7px;
	width: 40px;
	height: 5px;
	color: var(--ar-bright);
	background: var(--ar-barcode);
	pointer-events: none;
}

/* A card: cyan tick at the top left, magenta tick at the bottom right. */
.ar-card {
	position: relative;
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ar-card::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 2px;
	background: var(--ar-accent);
	z-index: 3;
}

.ar-card::after {
	content: '';
	position: absolute;
	right: 14px;
	bottom: 15px;
	width: 24px;
	height: 1px;
	background: var(--ar-magenta);
}

a.ar-card:hover {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--ar-cyan), 4px 4px 0 var(--ar-magenta);
}

.ar-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 24px 22px 35px;
}

/* A list row kept as a record: register, barcode and end tick. */
.ar-record { position: relative; border-top: 1px solid var(--ar-line); }

.ar-record::before {
	content: '';
	position: absolute;
	left: 0;
	top: -1px;
	width: 27px;
	height: 2px;
	background: var(--ar-bright);
}

.ar-record::after {
	content: '';
	position: absolute;
	right: 0;
	top: 14px;
	bottom: 10px;
	width: 64px;
	color: var(--ar-bright);
	pointer-events: none;
	background:
		var(--ar-barcode) 100% 0 / 64px 9px no-repeat,
		linear-gradient(var(--ar-magenta), var(--ar-magenta)) 100% 100% / 30px 1px no-repeat;
}

@media (max-width: 800px) {
	.ar-record::after { display: none; }
}

/* ── Marks ── */
.ar-frame {
	position: absolute;
	inset: 14px 27px 14px 14px;
	border: 1px solid var(--ar-line);
	pointer-events: none;
	z-index: 2;
}

.ar-frame-scan {
	position: absolute;
	inset: 1px;
	background: repeating-linear-gradient(0deg, transparent 0 4px, var(--ar-scan) 4px 5px);
}

.ar-frame-scan::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: var(--ar-line);
	opacity: 0.24;
}

.ar-frame-tick {
	position: absolute;
	right: 10px;
	bottom: 10px;
	width: 30px;
	height: 1px;
	background: var(--ar-magenta);
}

.ar-frame-register {
	position: absolute;
	left: -1px;
	top: -1px;
	width: 32px;
	height: 3px;
	background: var(--ar-bright);
	box-shadow: 0 0 7px #25d6e544;
}

.ar-frame-register::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 3px;
	height: 14px;
	background: var(--ar-bright);
}

.ar-barcode {
	position: absolute;
	right: 12px;
	bottom: 28px;
	width: 64px;
	height: 11px;
	color: var(--ar-bright);
	background: var(--ar-barcode);
	filter: drop-shadow(0 0 3px #25d6e533);
}

.ar-index {
	position: absolute;
	right: -19px;
	top: -1px;
	display: grid;
	gap: 7px;
}

.ar-index i {
	width: 6px;
	height: 6px;
	border: 1px solid var(--ar-line);
}

.ar-index i:nth-child(2) { background: var(--ar-bright); border-color: var(--ar-bright); }
.ar-index i:last-child { background: var(--ar-magenta); border-color: var(--ar-magenta); }

.ar-capture {
	position: absolute;
	inset: 10px;
	pointer-events: none;
	z-index: 2;
}

.ar-capture i {
	position: absolute;
	width: 16px;
	height: 16px;
	border: 0 solid var(--ar-bright);
}

.ar-capture i:nth-child(1) { top: 0; left: 0; border-width: 2px 0 0 2px; }
.ar-capture i:nth-child(2) { top: 0; right: 0; border-width: 2px 2px 0 0; }
.ar-capture i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.ar-capture i:nth-child(4) { bottom: 0; right: 0; border-width: 0 2px 2px 0; border-color: var(--ar-magenta); }

.ar-end {
	display: block;
	position: relative;
	max-width: 360px;
	height: 1px;
	margin-top: 30px;
}

.ar-end::before,
.ar-end::after {
	content: '';
	position: absolute;
	top: 0;
	height: 1px;
}

.ar-end::before { left: 0; width: 10px; background: var(--ar-line); }
.ar-end::after { right: 0; width: 30px; background: var(--ar-magenta); }

.ar-rail {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}

.ar-rail::before {
	content: '';
	width: 90px;
	height: 1px;
	margin-right: 6px;
	background: var(--ar-line);
}

.ar-rail i {
	width: 7px;
	height: 7px;
	border: 1px solid var(--ar-line);
}

.ar-rail i.on { background: var(--ar-bright); border-color: var(--ar-bright); }
.ar-rail i:last-child:not(.on) { border-color: var(--ar-magenta); }

/* A screen: a picture or video with capture marks. The page's glass is its only filter. */
.ar-screen {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--ar-bg);
}

.ar-screen--fill { aspect-ratio: auto; height: 480px; }

.ar-screen-media {
	position: absolute;
	inset: 0;
}

.ar-screen-media > * { width: 100%; height: 100%; min-height: 0; }
.ar-screen-media img { object-fit: cover; }

.ar-screen .ar-barcode { right: 32px; bottom: 12px; width: 48px; height: 9px; z-index: 2; }

.ar-page-crt i {
	position: absolute;
	left: 0;
	right: 0;
	top: -30%;
	height: 30%;
	background: linear-gradient(180deg, transparent, rgba(105, 229, 243, 0.08), transparent);
	animation: ar-crt-roll 7s linear infinite;
}

@keyframes ar-crt-roll {
	to { transform: translateY(460%); }
}

/* The glass over a whole page: fine scanlines, a vignette and the rolling band. */
.ar-page-crt {
	position: fixed;
	inset: 0;
	z-index: 150;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, transparent 58%, rgba(3, 8, 16, 0.34) 100%),
		repeating-linear-gradient(0deg, rgba(3, 8, 16, 0.16) 0 1px, transparent 1px 3px);
}

:root[data-theme="light"] .ar-page-crt {
	background:
		radial-gradient(ellipse at center, transparent 62%, rgba(20, 40, 70, 0.08) 100%),
		repeating-linear-gradient(0deg, rgba(20, 40, 70, 0.04) 0 1px, transparent 1px 3px);
}

@media (max-width: 800px) {
	.ar-frame { inset: 12px 23px 12px 12px; }
	.ar-index { right: -16px; }
	.ar-barcode { width: 48px; height: 9px; }
}

/* ── Controls ── */
.ar-btn {
	position: relative;
	border: 1px solid var(--ar-face-edge);
	border-radius: 0;
	background: var(--ar-face);
	color: var(--ar-face-text);
	box-shadow: var(--ar-shadow);
	text-decoration: none;
	transition: transform 150ms ease, box-shadow 150ms ease;
}

.ar-btn::before {
	content: '';
	position: absolute;
	left: -1px;
	top: -1px;
	width: min(20px, 50%);
	height: 2px;
	background: #5be0e9;
	pointer-events: none;
}

.ar-btn:hover {
	background: var(--ar-face-hover);
	color: #fff;
	filter: none;
}

@media (hover: hover) {
	.ar-btn:hover {
		transform: translate(2px, 2px);
		box-shadow: 2px 2px 0 var(--ar-cyan), 6px 6px 0 var(--ar-magenta);
	}
}

.ar-btn:active {
	transform: translate(4px, 4px);
	box-shadow: 0 0 0 var(--ar-cyan), 4px 4px 0 var(--ar-magenta);
}

.ar-btn:focus-visible {
	outline: 2px solid var(--ar-cyan);
	outline-offset: -5px;
}

.ar-btn--hero {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 38px;
	min-width: 180px;
	padding: 19px 25px;
	font-size: 14px;
	font-weight: 500;
}

.ar-btn--header {
	display: flex;
	align-items: center;
	gap: 25px;
	padding: 15px 21px;
	font-size: 14px;
	white-space: nowrap;
}

.ar-link {
	display: inline-flex;
	align-items: center;
	gap: 30px;
	padding: 15px 0;
	border: 0;
	background: transparent;
	color: var(--ar-fg);
	font-size: 14px;
	text-decoration: none;
}

.ar-link > span { color: var(--ar-accent); }
.ar-link:hover,
.ar-link--accent { color: var(--ar-accent); }

.ar-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 32px;
}

.ar-tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 0;
	background: var(--ar-surface);
	color: var(--ar-muted);
	padding: 17px 26px;
	font: 500 15px var(--ar-body);
	text-align: left;
	cursor: pointer;
}

.ar-tab[aria-selected="true"] {
	color: var(--ar-accent);
	box-shadow: var(--ar-shadow-sm);
}

.ar-tab[aria-selected="true"]::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 2px;
	background: var(--ar-accent);
}

.ar-tag {
	display: inline-block;
	padding: 6px 10px;
	border: 1px solid var(--ar-line);
	background: var(--ar-bg);
	color: var(--ar-muted);
	font: 500 12px var(--ar-mono);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Site chrome: the same banner and footer on every site ── */
.ar-masthead { position: relative; z-index: 100; font-family: var(--ar-body); line-height: normal; }

.ar-masthead-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	height: var(--ar-masthead);
}

.ar-masthead-left,
.ar-masthead-right {
	display: flex;
	align-items: center;
}

.ar-masthead-left { gap: 48px; }
.ar-masthead-right { gap: 26px; margin-left: auto; font-size: 14px; }

/* The lockup is 132.5 by 43.5 inside the animated logo's 132 by 44 box, 2px down. */
.ar-logo {
	--ar-logo-width: 158;
	--ar-logo-scale: calc(var(--ar-logo-width) / 132.5);
	display: block;
	flex-shrink: 0;
	width: calc(var(--ar-logo-width) * 1px);
	height: calc(var(--ar-logo-width) * 43.5px / 132.5);
}

.ar-logo > * {
	transform: translate(calc(var(--ar-logo-scale) * 0.5px), calc(var(--ar-logo-scale) * -2px)) scale(var(--ar-logo-scale));
	transform-origin: 0 0;
}

.ar-logo > img {
	width: 100%;
	height: auto;
	transform: none;
}

.ar-nav { display: flex; align-items: center; gap: 10px; font-size: 15px; }

.ar-nav-link,
.ar-footer-links a {
	color: var(--ar-fg);
	text-decoration: none;
	transition: background 150ms ease, color 150ms ease;
}

.ar-nav-link { padding: 12px 14px; }
.ar-nav-link.is-active { color: var(--ar-accent); }

.ar-nav-link:hover,
.ar-nav-link:focus-visible,
.ar-footer-links a:hover {
	background: var(--ar-surface);
	color: var(--ar-accent);
	box-shadow: var(--ar-shadow-xs);
	outline: 1px solid var(--ar-line);
	outline-offset: -1px;
}

.ar-masthead-link {
	color: var(--ar-fg);
	text-decoration: none;
	white-space: nowrap;
}

.ar-masthead-link:hover { color: var(--ar-accent); }

.ar-theme {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 10px;
	border: 0;
	background: transparent;
	color: var(--ar-fg);
	cursor: pointer;
}

.ar-theme svg { flex: none; }
.ar-theme:hover { color: var(--ar-accent); }
.ar-theme:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 6px; }
.ar-theme-sun { display: block; }
.ar-theme-moon { display: none; }
:root[data-theme="light"] .ar-theme-moon { display: block; }
:root[data-theme="light"] .ar-theme-sun { display: none; }

.ar-social { display: flex; align-items: center; gap: 2px; }

.ar-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--ar-fg);
}

.ar-social a:hover { color: var(--ar-accent); }
.ar-social a:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }

.ar-menu-toggle { display: none; }
.ar-menu { display: none; }
.ar-menu[hidden] { display: none !important; }

.ar-account { display: flex; align-items: center; gap: 26px; }
[data-ar-user]:empty { display: none; }
[data-ar-user]:not(:empty) ~ [data-ar-account],
[data-ar-menu-user]:not(:empty) ~ [data-ar-menu-account] { display: none; }

/* The signed-in account on the lab's other sites (account() in archive-banner.js): the lab
   site's account tile, an ink face whose offset shadow slides out on hover. */
.ar-user {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -2px;
}

.ar-user-face {
	--echo: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	overflow: hidden;
	background: var(--ar-face);
	color: var(--ar-accent);
	box-shadow:
		inset 0 0 0 1px var(--ar-face-edge),
		var(--echo) var(--echo) 0 0 var(--ar-cyan),
		calc(var(--echo) * 2) calc(var(--echo) * 2) 0 0 var(--ar-magenta);
	transition: transform 120ms steps(3, jump-none), box-shadow 120ms steps(3, jump-none);
}

.ar-user-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ar-user-initial { font: 700 18px / 1 var(--ar-mono); text-transform: uppercase; }
.ar-user:focus-visible { outline: none; }
.ar-user:focus-visible .ar-user-face { outline: 2px solid var(--ar-accent); outline-offset: 2px; }

@media (hover: hover) {
	.ar-user:hover .ar-user-face { --echo: 1px; transform: translate(-1px, -1px); }
}

.ar-footer {
	display: flex;
	align-items: center;
	gap: 30px;
	padding: 30px 0 45px;
	font-size: 12px;
}

.ar-footer > span { color: var(--ar-muted); }
.ar-footer .ar-logo { --ar-logo-width: 140; height: auto; }

.ar-footer-links { display: flex; gap: 8px; margin-left: auto; }
.ar-footer-links a { padding: 10px 12px; }

@media (max-width: 1100px) {
	.ar-masthead-left { gap: 18px; }
	.ar-nav { gap: 0; }
	.ar-nav-link { padding: 12px 10px; }
	.ar-masthead-right { gap: 16px; }
	.ar-logo { --ar-logo-width: 135; }
	.ar-masthead-right > .ar-social { gap: 0; margin-right: -6px; }
	.ar-masthead-right > .ar-social a { width: 28px; }
}

/* Between the full banner and the menu there is no room for the icons; the footer keeps the links. */
@media (max-width: 960px) {
	.ar-masthead-right > .ar-social { display: none; }
}

@media (max-width: 800px) {
	.ar-masthead-inner { gap: 15px; }
	.ar-btn--header { margin-right: 8px; }
	.ar-masthead-left .ar-nav,
	.ar-masthead-right > .ar-desktop,
	.ar-masthead-right > [data-ar-user] { display: none; }
	.ar-logo { --ar-logo-width: 125; }

	.ar-menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0 11px;
		border: 0;
		background: var(--ar-surface);
		color: var(--ar-fg);
		cursor: pointer;
	}

	.ar-menu-toggle i {
		display: block;
		height: 2px;
		background: currentColor;
		transition: transform 0.18s, opacity 0.18s;
	}

	.ar-menu-toggle[aria-expanded="true"] {
		color: var(--ar-accent);
		box-shadow: var(--ar-shadow-sm);
	}

	.ar-menu-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.ar-menu-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
	.ar-menu-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.ar-menu {
		position: absolute;
		top: 100%;
		left: 6%;
		right: 6%;
		display: block;
		max-height: calc(100dvh - var(--ar-masthead) - 24px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 8px 0;
		background: var(--ar-surface);
		box-shadow: var(--ar-shadow);
	}

	.ar-menu-rule { border-top: 1px solid var(--ar-line); margin-top: 6px; padding-top: 18px; }
	.ar-menu-signup { color: var(--ar-accent); justify-content: space-between; }
	.ar-menu-social { gap: 8px; padding: 12px 14px 6px; }
	.ar-menu-social a { width: 44px; height: 44px; }

	.ar-menu-link {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 14px 20px;
		color: var(--ar-fg);
		font-size: 16px;
		text-decoration: none;
	}

	.ar-menu-link.is-active,
	.ar-menu-link:hover { color: var(--ar-accent); }

	.ar-footer { flex-wrap: wrap; gap: 20px; padding: 20px 0 35px; }
	.ar-footer-links { width: 100%; margin: 8px 0 0 -12px; gap: 4px; }
	.ar-footer .ar-logo { --ar-logo-width: 130; }
}

@media (max-width: 400px) {
	.ar-logo { --ar-logo-width: 106; }
	.ar-masthead-right { gap: 9px; }
}

/* ── Point-cloud background ── */
#cyberspace {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: 0.55;
}

:root[data-theme="light"] #cyberspace { opacity: 0.34; }

.ar-veil {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(9, 18, 29, 0.64) 0%, rgba(9, 18, 29, 0.5) 37%, rgba(9, 18, 29, 0.08) 68%, rgba(9, 18, 29, 0.1) 100%);
}

:root[data-theme="light"] .ar-veil {
	background: linear-gradient(90deg, rgba(241, 242, 245, 0.91) 0%, rgba(241, 242, 245, 0.8) 37%, rgba(241, 242, 245, 0.35) 70%, rgba(241, 242, 245, 0.45) 100%);
}

@media (max-width: 800px) {
	.ar-veil { background: rgba(9, 18, 29, 0.55); }
	:root[data-theme="light"] .ar-veil { background: rgba(241, 242, 245, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
	.ar-btn,
	.ar-card,
	.ar-nav-link { transition: none; }
	.ar-page-crt i { animation: none; display: none; }
}