/* ============================================================
   The Rusk Disconnect — brand stylesheet
   Ported from the Claude Design handoff, under
   rusk-disconnect/project/_ds/the-rusk-disconnect-design-system-...
   Token values are lifted verbatim; nothing here is invented.
   ============================================================ */

/* ------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------ */

:root {
	/* Ink scale (near-black slate) */
	--ink-900: #030406;
	--ink-800: #070a0e;
	--ink-700: #0d1218;
	--ink-600: #141b23;
	--ink-500: #1d2731;

	/* Cream / paper text scale */
	--cream-050: #faf8f2;
	--cream-100: #f3f0e8;
	--cream-200: #e6e0d3;
	--muted-400: #a7b1bd;
	--muted-500: #7c8794;
	--muted-600: #5a636e;

	/* Gold — the record */
	--gold-300: #ecd39b;
	--gold-400: #d8b76a;
	--gold-500: #c39f4f;
	--gold-600: #9a7c38;

	/* Blue — author / hydrosphere */
	--blue-300: #9cc4e8;
	--blue-400: #6fa9d9;
	--blue-500: #2d689f;

	/* Green — biosphere */
	--green-400: #4f9a72;
	--green-600: #31714d;

	/* Hairline alphas */
	--line-gold: rgba(216, 183, 106, 0.42);
	--line-gold-soft: rgba(216, 183, 106, 0.22);
	--line-cream: rgba(243, 240, 232, 0.14);

	/* Glass fills */
	--glass-top: rgba(255, 255, 255, 0.055);
	--glass-bottom: rgba(255, 255, 255, 0.015);
	--fill-glass: linear-gradient(135deg, var(--glass-top), var(--glass-bottom));

	/* Semantic aliases */
	--bg: var(--ink-900);
	--surface: var(--ink-700);
	--text: var(--cream-100);
	--text-strong: var(--cream-050);
	--text-body: var(--muted-400);
	--text-muted: var(--muted-500);
	--text-faint: var(--muted-600);
	--accent: var(--gold-400);
	--accent-hover: var(--gold-300);
	--accent-press: var(--gold-500);
	--accent-ink: var(--ink-900);
	--link: var(--blue-400);
	--author: var(--blue-400);
	--border: var(--line-gold-soft);
	--border-strong: var(--line-gold);
	--divider: var(--line-cream);

	/* Sphere accents */
	--sphere-atmosphere: var(--gold-400);
	--sphere-hydrosphere: var(--blue-400);
	--sphere-biosphere: var(--green-400);
	--sphere-lithosphere: var(--gold-300);

	/* Type */
	--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--lh-display: 0.92;
	--lh-body: 1.65;
	--lh-tight: 1.3;
	--text-kicker: 0.78rem;
	--tracking-kicker: 0.24em;
	--tracking-wordmark: 0.34em;
	--tracking-label: 0.18em;

	/* Spacing & layout */
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 28px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--pad-panel: clamp(28px, 6vw, 72px);
	--measure: 680px;
	--container: 880px;
	--container-wide: 1120px;

	/* Effects */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 28px;
	--radius-pill: 999px;
	--shadow-panel: 0 24px 80px rgba(0, 0, 0, 0.45);
	--shadow-lift: 0 30px 90px rgba(0, 0, 0, 0.55);
	--shadow-gold: 0 0 16px rgba(216, 183, 106, 0.45);
	--shadow-orb: 0 0 90px rgba(111, 169, 217, 0.35);
	--blur-glass: 4px;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-fast: 140ms;
	--dur-med: 240ms;
}

/* ------------------------------------------------------------
   2. Ground
   ------------------------------------------------------------ */

html {
	background: var(--bg);
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	line-height: var(--lh-body);
	overflow-x: hidden;
}

body p {
	color: var(--text-body);
	max-width: var(--measure);
}

body h1,
body h2,
body h3,
body h4 {
	font-family: var(--font-display);
	font-weight: 400;
	color: var(--text);
	letter-spacing: 0.01em;
}

/* The celestial orb — a marine planet fixed upper-left, bleeding off-frame.
   Injected once per page by rusk_render_orb(); never interactive. */
.rusk-orb {
	position: fixed;
	left: -34vmin;
	top: 8vh;
	width: 70vmin;
	height: 70vmin;
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
	background:
		radial-gradient(circle at 70% 42%, rgba(255, 255, 255, 0.92) 0 2%, transparent 3%),
		radial-gradient(circle at 65% 45%, rgba(104, 168, 217, 0.95) 0 0.4%, transparent 0.7%),
		radial-gradient(circle at 56% 38%, rgba(45, 104, 159, 0.9) 0 17%, rgba(24, 68, 112, 0.7) 32%, rgba(6, 22, 42, 0.35) 60%, transparent 70%),
		radial-gradient(circle at 62% 44%, rgba(255, 255, 255, 0.35) 0 9%, transparent 10%),
		radial-gradient(circle at 55% 52%, rgba(49, 113, 77, 0.45) 0 8%, transparent 9%);
	box-shadow: var(--shadow-orb), inset -45px 0 70px rgba(0, 0, 0, 0.8);
}

/* Content floats above the orb. */
.wp-site-blocks {
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------
   3. Chrome — header, footer, navigation
   ------------------------------------------------------------ */

.rusk-topbar {
	position: relative;
	border-bottom: 1px solid var(--divider);
	background: transparent;
}

/* The glass blur sits on a pseudo-element rather than on .rusk-topbar itself.
   backdrop-filter makes an element the containing block for its fixed-position
   descendants, which pinned the navigation block's full-screen mobile overlay
   inside the 60px-tall header — the bar went white and the links were clipped. */
.rusk-topbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(3, 4, 6, 0.55);
	backdrop-filter: blur(var(--blur-glass));
	-webkit-backdrop-filter: blur(var(--blur-glass));
	pointer-events: none;
}

.rusk-topbar > .wp-block-group {
	position: relative;
	z-index: 1;
}

.rusk-brandmark {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: var(--tracking-wordmark);
	font-size: 0.95rem;
	color: var(--text);
	text-decoration: none;
	line-height: 1.2;
}

.rusk-topbar .wp-block-navigation {
	font-family: var(--font-body);
	font-size: var(--text-kicker);
	text-transform: uppercase;
	letter-spacing: var(--tracking-label);
}

.rusk-topbar .wp-block-navigation a {
	color: var(--text-body);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.rusk-topbar .wp-block-navigation a:hover,
.rusk-topbar .wp-block-navigation .current-menu-item a {
	color: var(--accent);
}

/* Mobile overlay. Core paints an unstyled open menu as a white sheet with black
   text (.wp-block-navigation:not(.has-background) rules), so the brand ink and
   cream are restored here along with the toggle and close glyphs. */
.rusk-topbar .wp-block-navigation__responsive-container-open,
.rusk-topbar .wp-block-navigation__responsive-container-close {
	color: var(--text);
}

.rusk-topbar .wp-block-navigation__responsive-container-open:hover,
.rusk-topbar .wp-block-navigation__responsive-container-close:hover {
	color: var(--accent);
}

/* Selector mirrors core's own :not(.has-background) rule so it outranks the
   white default; core's overlay padding is left alone. */
.rusk-topbar .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(3, 4, 6, 0.97);
	color: var(--text);
}

/* Core sizes the overlay padding with clamp(1rem, var(--wp--style--root--padding-*), 20rem).
   That is stated explicitly here so the sheet never sits flush against the
   screen edge if those root-padding variables are missing or malformed. */
.rusk-topbar .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: var(--space-7) var(--space-6);
}

/* The desktop bar justifies right, and core feeds that same setting to the
   overlay column. A full-screen sheet reads better flush left. */
.rusk-topbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	width: 100%;
}

.rusk-topbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--space-6);
	align-items: flex-start;
}

.rusk-topbar .wp-block-navigation__responsive-container.is-menu-open a {
	color: var(--text);
	font-size: 1rem;
}

.rusk-topbar .wp-block-navigation__responsive-container.is-menu-open a:hover,
.rusk-topbar .wp-block-navigation__responsive-container.is-menu-open .current-menu-item a {
	color: var(--accent);
}

.rusk-footer {
	border-top: 1px solid var(--divider);
	color: var(--text-faint);
	font-size: 0.82rem;
}

.rusk-footer p {
	color: var(--text-faint);
}

.rusk-footer a {
	color: var(--text-muted);
	text-decoration: none;
}

.rusk-footer a:hover {
	color: var(--accent);
}

/* ------------------------------------------------------------
   4. Type components
   ------------------------------------------------------------ */

.rusk-kicker {
	color: var(--accent);
	font-family: var(--font-body);
	font-size: var(--text-kicker);
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	line-height: 1.4;
	margin-bottom: var(--space-4);
	max-width: none;
}

.rusk-kicker--author {
	color: var(--author);
}

.rusk-kicker--muted {
	color: var(--text-muted);
}

.rusk-hero-title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.01em;
	font-size: clamp(2.8rem, 8vw, 6rem);
	line-height: var(--lh-display);
	margin: 0 0 var(--space-6);
	color: var(--text);
}

.rusk-lede {
	color: var(--text-body);
	font-size: clamp(1.04rem, 2vw, 1.28rem);
	line-height: var(--lh-body);
	max-width: var(--measure);
}

.rusk-meta {
	color: var(--text-muted);
	font-size: 0.9rem;
}

.rusk-hairline {
	border: 0;
	border-top: 1px solid var(--border-strong);
	height: 0;
	opacity: 1;
	width: 100%;
	max-width: none;
	margin-block: var(--space-8);
}

.rusk-hairline--quiet {
	border-top-color: var(--divider);
}

/* The "THE / RUSK DISCONNECT / Maren Brascom" title lockup. */
.rusk-wordmark {
	text-align: center;
}

.rusk-wordmark .rusk-wordmark__the {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: var(--tracking-wordmark);
	text-transform: uppercase;
	color: var(--text-body);
	margin: 0 0 var(--space-3);
	max-width: none;
}

.rusk-wordmark .rusk-wordmark__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 6vw, 3.4rem);
	letter-spacing: var(--tracking-wordmark);
	text-transform: uppercase;
	line-height: 1.05;
	margin: 0;
}

.rusk-wordmark .rusk-wordmark__author {
	font-family: var(--font-body);
	font-size: 0.78rem;
	letter-spacing: var(--tracking-wordmark);
	text-transform: uppercase;
	color: var(--author);
	margin: var(--space-4) 0 0;
	max-width: none;
}

/* ------------------------------------------------------------
   5. Glass panel
   ------------------------------------------------------------ */

.rusk-panel {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--pad-panel);
	background: var(--fill-glass);
	box-shadow: var(--shadow-panel);
	backdrop-filter: blur(var(--blur-glass));
	-webkit-backdrop-filter: blur(var(--blur-glass));
	position: relative;
}

.rusk-panel--strong {
	border-color: var(--border-strong);
}

.rusk-panel--tight {
	padding: clamp(20px, 4vw, 40px);
}

/* Card grid used by the archive index and the book page. */
.rusk-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space-7);
}

.rusk-card {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: clamp(20px, 3vw, 32px);
	background: var(--fill-glass);
	box-shadow: var(--shadow-panel);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.rusk-card:hover {
	transform: translateY(-1px);
	border-color: var(--border-strong);
}

.rusk-card h3,
.rusk-card h2 {
	font-size: 1.35rem;
	line-height: var(--lh-tight);
	margin: 0;
}

.rusk-card p {
	margin: 0;
	font-size: 0.95rem;
}

.rusk-card a {
	color: var(--accent);
	text-decoration: none;
	font-size: var(--text-kicker);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	margin-top: auto;
}

/* ------------------------------------------------------------
   6. Buttons
   ------------------------------------------------------------ */

.rusk-cta,
.rusk-cta:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--accent-ink);
	background: var(--accent);
	text-decoration: none;
	padding: 14px 22px;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	border: 1px solid var(--accent);
	transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}

.rusk-cta:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
	color: var(--accent-ink);
}

.rusk-cta:active {
	background: var(--accent-press);
	border-color: var(--accent-press);
	transform: none;
}

.rusk-cta:focus-visible,
.rusk-cta--ghost:focus-visible {
	outline: 2px solid var(--gold-300);
	outline-offset: 3px;
}

.rusk-cta--ghost,
.rusk-cta--ghost:visited {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--border-strong);
}

.rusk-cta--ghost:hover {
	color: var(--accent-hover);
	border-color: var(--accent-hover);
}

/* A row of CTAs that wraps cleanly on narrow screens. */
.rusk-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-block: var(--space-6);
}

/* Buttons inside a WordPress buttons block keep the pill shape. */
.wp-block-button__link {
	border-radius: var(--radius-pill);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   7. Network motif — the gold "record" constellation
   ------------------------------------------------------------ */

.rusk-network {
	position: relative;
	width: 300px;
	max-width: 100%;
	height: 230px;
	margin-left: auto;
	opacity: 0.85;
	pointer-events: none;
}

.rusk-network svg {
	width: 100%;
	height: 100%;
	display: block;
}

.rusk-network .rusk-node {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	box-shadow: var(--shadow-gold);
}

.rusk-network .rusk-node--1 { right: 210px; top: 20px; }
.rusk-network .rusk-node--2 { right: 80px;  top: 70px; }
.rusk-network .rusk-node--3 { right: 150px; top: 150px; }
.rusk-network .rusk-node--4 { right: 20px;  top: 170px; }

/* ------------------------------------------------------------
   8. The four Earth systems
   ------------------------------------------------------------ */

.rusk-spheres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--space-7);
	list-style: none;
	padding: 0;
	margin: 0;
}

.rusk-sphere {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
}

/* The icon SVGs carry their own hairline ring and per-sphere stroke colour,
   so the badge only sizes them — it must not draw a second circle. */
.rusk-sphere__badge {
	width: 84px;
	height: 84px;
	display: grid;
	place-items: center;
}

.rusk-sphere__badge svg,
.rusk-sphere__badge img {
	width: 84px;
	height: 84px;
	display: block;
}

.rusk-sphere__label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
	max-width: none;
}

.rusk-sphere--atmosphere .rusk-sphere__label { color: var(--sphere-atmosphere); }
.rusk-sphere--hydrosphere .rusk-sphere__label { color: var(--sphere-hydrosphere); }
.rusk-sphere--biosphere .rusk-sphere__label { color: var(--sphere-biosphere); }
.rusk-sphere--lithosphere .rusk-sphere__label { color: var(--sphere-lithosphere); }

/* ------------------------------------------------------------
   9. The archive document
   Archive entries are published artifacts, not landing pages: one
   panel, a masthead, a filed record, and a colophon. Everything is
   inside the single box.
   ------------------------------------------------------------ */

.rusk-doc {
	padding: clamp(28px, 5vw, 64px);
}

.rusk-doc__masthead {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	align-items: baseline;
	justify-content: space-between;
	border-bottom: 1px solid var(--border-strong);
	padding-bottom: var(--space-4);
	font-family: var(--font-body);
	font-size: 0.68rem;
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--text-muted);
}

.rusk-doc__series {
	color: var(--accent);
}

.rusk-doc__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 5vw, 3.2rem);
	line-height: 1.02;
	letter-spacing: 0.01em;
	color: var(--text);
	margin: var(--space-7) 0 0;
	max-width: 22ch;
}

.rusk-doc__standfirst {
	color: var(--cream-200);
	font-size: clamp(1rem, 1.6vw, 1.18rem);
	line-height: 1.55;
	max-width: 60ch;
	margin: var(--space-5) 0 0;
}

/* Filed record: the small metadata block a journal puts under its title. */
.rusk-doc__record {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-5) var(--space-8);
	margin: var(--space-8) 0 0;
	padding-top: var(--space-6);
	border-top: 1px solid var(--divider);
}

.rusk-doc__record div {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rusk-doc__record dt,
.rusk-doc__record .rusk-doc__key {
	font-family: var(--font-body);
	font-size: 0.62rem;
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--text-faint);
	margin: 0;
}

.rusk-doc__record dd,
.rusk-doc__record .rusk-doc__value {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--text);
	margin: 0;
	line-height: 1.5;
}

/* The record mark: a hairline broken by a single glowing node. */
.rusk-ornament {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin: var(--space-12) 0;
}

.rusk-ornament::before,
.rusk-ornament::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--divider);
}

.rusk-ornament span {
	width: 9px;
	height: 9px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	box-shadow: var(--shadow-gold);
	flex: none;
}

/* Document body: a reading measure, not a layout measure. */
.rusk-doc__body {
	max-width: 62ch;
}

.rusk-doc__body > p {
	color: var(--text-body);
	max-width: none;
}

.rusk-doc__body h2 {
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	line-height: var(--lh-tight);
	margin: var(--space-12) 0 var(--space-5);
}

.rusk-doc__body > *:first-child {
	margin-top: 0;
}

/* Numbered section label, the way a paper marks its parts. */
.rusk-doc__num {
	display: block;
	font-family: var(--font-body);
	font-size: 0.62rem;
	letter-spacing: var(--tracking-kicker);
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--space-3);
}

.rusk-doc__colophon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-6);
	justify-content: space-between;
	border-top: 1px solid var(--border-strong);
	margin-top: var(--space-12);
	padding-top: var(--space-5);
	font-family: var(--font-body);
	font-size: 0.68rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-faint);
}

/* Site chrome sits outside the artifact, deliberately quiet. */
.rusk-doc__continue {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4) var(--space-8);
	justify-content: space-between;
	margin-top: var(--space-8);
	font-family: var(--font-body);
	font-size: var(--text-kicker);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.rusk-doc__continue a {
	color: var(--text-muted);
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
}

.rusk-doc__continue a:hover {
	color: var(--accent);
}

/* ------------------------------------------------------------
   9b. Archive entry structure
   ------------------------------------------------------------ */

/* Incident report header — label rows above a hairline. */
.rusk-incident {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: clamp(18px, 3vw, 28px);
	background: rgba(255, 255, 255, 0.02);
}

.rusk-incident dl,
.rusk-incident .rusk-incident__row {
	display: grid;
	grid-template-columns: minmax(120px, 180px) 1fr;
	gap: var(--space-3) var(--space-5);
	margin: 0;
	font-size: 0.9rem;
}

.rusk-incident dt,
.rusk-incident .rusk-incident__key {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0;
}

.rusk-incident dd,
.rusk-incident .rusk-incident__value {
	margin: 0;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 0.88rem;
}

/* Recovered transcript — indented, monospaced, gold left hairline. */
.rusk-transcript {
	border-left: 1px solid var(--border-strong);
	padding-left: var(--space-6);
	font-family: var(--font-mono);
	font-size: 0.92rem;
	line-height: 1.8;
	color: var(--text-body);
}

.rusk-transcript p {
	color: var(--text-body);
	margin-block: var(--space-3);
}

.rusk-transcript .rusk-transcript__speaker {
	color: var(--text);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	font-size: 0.7rem;
}

/* Field note — a page torn from a notebook. */
.rusk-fieldnote {
	border: 1px solid var(--divider);
	border-radius: var(--radius-md);
	padding: clamp(20px, 3vw, 32px);
	background:
		repeating-linear-gradient(
			to bottom,
			transparent 0,
			transparent 31px,
			var(--line-cream) 31px,
			var(--line-cream) 32px
		);
}

.rusk-fieldnote p {
	font-family: var(--font-mono);
	font-size: 0.92rem;
	line-height: 32px;
	margin-block: 0;
	color: var(--text-body);
}

/* The long-short-long pulse. */
.rusk-pulse {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	list-style: none;
	padding: 0;
	margin: 0;
}

.rusk-pulse li {
	height: 3px;
	border-radius: var(--radius-pill);
	background: var(--accent);
	box-shadow: var(--shadow-gold);
}

.rusk-pulse .rusk-pulse--long { width: clamp(56px, 14vw, 120px); }
.rusk-pulse .rusk-pulse--short { width: clamp(20px, 5vw, 44px); }

/* Runs of short label lines — contact details, publication facts.
   These want to read as a block, not as separately spaced paragraphs. */
.rusk-lines {
	color: var(--text-body);
	line-height: 1.7;
	margin-block: 0;
}

.rusk-lines + .rusk-lines {
	margin-block-start: 2px;
}

/* ------------------------------------------------------------
   10. Placeholders — copy Maren still needs to write
   ------------------------------------------------------------ */

.rusk-todo {
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-md);
	padding: var(--space-5) var(--space-6);
	color: var(--gold-600);
	font-family: var(--font-mono);
	font-size: 0.86rem;
	line-height: 1.6;
	background: rgba(216, 183, 106, 0.03);
	max-width: none;
}

.rusk-todo::before {
	content: "PLACEHOLDER — ";
	letter-spacing: var(--tracking-label);
	color: var(--accent);
}

/* ------------------------------------------------------------
   11. Signup
   ------------------------------------------------------------ */

.rusk-signup {
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-lg);
	padding: clamp(24px, 4vw, 40px);
	background: var(--fill-glass);
	box-shadow: var(--shadow-panel);
}

.rusk-signup .rusk-kicker {
	margin-bottom: var(--space-3);
}

.rusk-signup h2 {
	font-size: clamp(1.6rem, 4vw, 2.25rem);
	margin: 0 0 var(--space-4);
}

/* The embedded widget ships light-theme defaults; pull it onto the ground.
   Its own config is recoloured too — these rules cover what it ignores. */
.rusk-signup__embed {
	margin-top: var(--space-5);
}

.rusk-signup__embed,
.rusk-signup__embed * {
	max-width: 100%;
	box-sizing: border-box;
}

.rusk-signup__embed [class*="form"],
.rusk-signup__embed form,
.rusk-signup__embed > div {
	background: transparent !important;
	color: var(--text) !important;
	border-color: var(--border-strong) !important;
}

.rusk-signup__embed label,
.rusk-signup__embed legend,
.rusk-signup__embed p,
.rusk-signup__embed span,
.rusk-signup__embed h1,
.rusk-signup__embed h2,
.rusk-signup__embed h3 {
	color: var(--text) !important;
	font-family: var(--font-body) !important;
}

.rusk-signup__embed input,
.rusk-signup__embed textarea,
.rusk-signup__embed select {
	background: rgba(255, 255, 255, 0.04) !important;
	color: var(--text) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-sm) !important;
	font-family: var(--font-body) !important;
	padding: 12px 14px !important;
}

.rusk-signup__embed input::placeholder,
.rusk-signup__embed textarea::placeholder {
	color: var(--text-faint) !important;
}

.rusk-signup__embed button,
.rusk-signup__embed input[type="submit"] {
	background: var(--accent) !important;
	color: var(--accent-ink) !important;
	border: 1px solid var(--accent) !important;
	border-radius: var(--radius-pill) !important;
	font-family: var(--font-body) !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	padding: 14px 22px !important;
	cursor: pointer;
}

.rusk-signup__embed iframe {
	width: 100%;
	border: 0;
	color-scheme: dark;
}

/* ------------------------------------------------------------
   12. Layout helpers
   ------------------------------------------------------------ */

.rusk-section {
	padding-block: clamp(48px, 8vw, 96px);
}

.rusk-section--tight {
	padding-block: clamp(32px, 5vw, 56px);
}

.rusk-container {
	max-width: var(--container);
	margin-inline: auto;
}

.rusk-media {
	border-radius: var(--radius-md);
	overflow: hidden;
	border: 1px solid var(--border);
}

.rusk-media img {
	display: block;
	width: 100%;
	height: auto;
}

.rusk-cover {
	max-width: 340px;
	margin-inline: auto;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-panel);
}

.rusk-cover img {
	display: block;
	width: 100%;
	height: auto;
}

/* ------------------------------------------------------------
   13. Responsive & motion
   ------------------------------------------------------------ */

@media (max-width: 600px) {
	.rusk-network {
		width: 240px;
		height: 185px;
		margin-inline: auto;
	}

	.rusk-incident dl,
	.rusk-incident .rusk-incident__row {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}

	.rusk-transcript {
		padding-left: var(--space-4);
	}

	.rusk-doc__masthead,
	.rusk-doc__colophon,
	.rusk-doc__continue {
		flex-direction: column;
		align-items: flex-start;
	}

	.rusk-doc__title {
		max-width: none;
	}

	.rusk-ornament {
		margin: var(--space-10) 0;
	}

	.rusk-orb {
		width: 96vmin;
		height: 96vmin;
		left: -46vmin;
		opacity: 0.7;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rusk-cta,
	.rusk-card {
		transition: none;
	}

	.rusk-cta:hover,
	.rusk-card:hover {
		transform: none;
	}
}

/* Print: drop the void, keep the words. */
@media print {
	.rusk-orb,
	.rusk-network,
	.rusk-signup {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}
}