/* ==========================================================================
   RickLeinecker.com
   styles.css
   --------------------------------------------------------------------------
   Contents
     01. Tokens
     02. Reset & base
     03. Utilities (wrap, eyebrow, node, buttons, arrows, reveal)
     04. Top bar & navigation
     05. Hero
     06. Section shell & headings
     07. AI-Native Learning Series
     08. Site directory tiles
     09. Recent posts
     10. Certifications
     11. Interior pages & contact form
     12. Footer
     13. Responsive
     14. Reduced motion & print
   ========================================================================== */


/* 01. Tokens ============================================================== */

:root {
	/* Surfaces — deep navy rather than pure black, so the logo art sits in it */
	--ink-900: #05080f;
	--ink-850: #070d18;
	--ink-800: #0a1120;
	--ink-700: #0f1a2c;

	/* Lines */
	--line: #1b2740;
	--line-soft: #141e33;

	/* Accents, pulled from the AI-Native artwork */
	--cyan: #3fc8f5;
	--blue: #2b7fea;
	--gold: #f5b93b;

	/* Text */
	--text: #dce6f2;
	--text-dim: #a9bacf;
	--muted: #7f93ad;

	/* Type */
	--display: "Archivo", "Helvetica Neue", Arial, sans-serif;
	--body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
	--mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

	/* Metrics */
	--wrap: 1180px;
	--gutter: clamp(1.25rem, 4vw, 3rem);
	--radius: 14px;
	--radius-sm: 8px;

	/* Motion */
	--ease: cubic-bezier(.22, .61, .36, 1);
}


/* 02. Reset & base ======================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--ink-900);
	color: var(--text);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3 {
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 112%;
	line-height: 1.05;
	letter-spacing: -0.015em;
	margin: 0;
}

p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

strong {
	color: #fff;
	font-weight: 600;
}

:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--cyan);
	color: var(--ink-900);
	padding: .65rem 1rem;
	font-family: var(--mono);
	font-size: .8rem;
}

.skip-link:focus {
	left: .75rem;
	top: .75rem;
}


/* 03. Utilities =========================================================== */

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Eyebrow: a mono label with a small node and a hairline running off to the
   right edge. This is the page's repeating structural signature. */
.eyebrow {
	display: flex;
	align-items: center;
	gap: .7rem;
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
}

.eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--line) 0%, transparent 92%);
}

.eyebrow--center {
	justify-content: center;
	max-width: 34rem;
	margin-inline: auto;
}

.eyebrow--center::after {
	display: none;
}

.node {
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--cyan);
	box-shadow: 0 0 0 3px rgba(63, 200, 245, .14);
	transform: rotate(45deg);
}

.domain,
.path {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .04em;
	color: var(--cyan);
	word-break: break-word;
}

.path {
	color: var(--muted);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.5rem;
	border-radius: 999px;
	font-family: var(--mono);
	font-size: .82rem;
	font-weight: 500;
	letter-spacing: .04em;
	border: 1px solid transparent;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease),
		background-color .2s var(--ease), border-color .2s var(--ease);
}

.btn--primary {
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	color: #04121e;
	font-weight: 600;
	box-shadow: 0 10px 30px -12px rgba(63, 200, 245, .7);
}

.btn--ghost {
	border-color: var(--line);
	color: var(--text-dim);
	background: rgba(255, 255, 255, .015);
}

.btn:hover {
	transform: translateY(-2px);
}

.btn--ghost:hover {
	border-color: var(--cyan);
	color: #fff;
}

.arrow {
	font-family: var(--mono);
	color: var(--cyan);
	transition: transform .25s var(--ease);
	display: inline-block;
}

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--cyan);
}

/* Scroll reveal — JS adds .is-in */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	transition-delay: var(--d, 0ms);
}

.reveal.is-in {
	opacity: 1;
	transform: none;
}


/* 04. Top bar & navigation ================================================ */

.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(5, 8, 15, .72);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--ease), background-color .3s var(--ease);
}

.topbar.is-stuck {
	border-bottom-color: var(--line-soft);
	background: rgba(5, 8, 15, .92);
}

.topbar__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: .85rem var(--gutter);
	display: flex;
	align-items: center;
	gap: 1rem;
}

.topbar__mark {
	display: flex;
	align-items: baseline;
	gap: .6rem;
	margin-right: auto;
}

.topbar__initials {
	font-family: var(--display);
	font-weight: 800;
	font-stretch: 118%;
	font-size: 1.05rem;
	letter-spacing: .04em;
	color: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: .2rem .45rem;
	line-height: 1;
}

.topbar__name {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .08em;
	color: var(--muted);
}

.nav {
	display: flex;
	align-items: center;
	gap: .35rem;
}

.nav__link {
	position: relative;
	padding: .45rem .7rem;
	border-radius: var(--radius-sm);
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .05em;
	color: var(--text-dim);
	transition: color .2s var(--ease), background-color .2s var(--ease);
}

.nav__link:hover {
	color: #fff;
	background: rgba(63, 200, 245, .08);
}

.nav__link--accent {
	color: var(--cyan);
	border: 1px solid rgba(63, 200, 245, .3);
}

.nav__link--accent:hover {
	background: rgba(63, 200, 245, .14);
	color: #fff;
}

/* Current page marker — a small underline node rather than a filled pill */
.nav__link[aria-current="page"] {
	color: #fff;
}

.nav__link[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: .7rem;
	right: .7rem;
	bottom: .15rem;
	height: 1.5px;
	background: var(--cyan);
}

.nav-toggle {
	display: none;
	width: 42px;
	height: 38px;
	background: none;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.nav-toggle__bar {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--text);
	transition: transform .25s var(--ease), opacity .2s var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}


/* 05. Hero ================================================================ */

.hero {
	position: relative;
	overflow: hidden;
	padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6rem);
	border-bottom: 1px solid var(--line-soft);
}

/* Circuit-plane backdrop: a fine grid, faded out toward the edges, with one
   slow cyan sweep passing through it. */
.hero__field {
	position: absolute;
	inset: -20% -10% 0;
	background-image:
		linear-gradient(rgba(63, 200, 245, .1) 1px, transparent 1px),
		linear-gradient(90deg, rgba(63, 200, 245, .1) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 32%, #000 0%, transparent 78%);
	mask-image: radial-gradient(ellipse 60% 55% at 50% 32%, #000 0%, transparent 78%);
	pointer-events: none;
}

.hero__field::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 46% 40% at 50% 24%, rgba(43, 127, 234, .22), transparent 70%);
}

.hero__sweep {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, rgba(63, 200, 245, .55), transparent);
	animation: sweep 9s var(--ease) infinite;
	opacity: 0;
}

@keyframes sweep {
	0% { transform: translateY(0); opacity: 0; }
	12% { opacity: .9; }
	70% { opacity: 0; }
	100% { transform: translateY(560px); opacity: 0; }
}

.hero__inner {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}

.hero__badge {
	width: min(100%, 570px);
	height: auto;
	filter: drop-shadow(0 18px 45px rgba(43, 127, 234, .28));
}

.hero__title {
	font-size: clamp(2.1rem, 6vw, 4rem);
	color: #fff;
	max-width: 20ch;
}

.hero__lede {
	max-width: 62ch;
	color: var(--text-dim);
	font-size: clamp(1rem, 1.6vw, 1.1rem);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: .5rem;
}


/* 06. Section shell & headings ============================================ */

.section {
	padding: clamp(3.5rem, 8vw, 6rem) 0;
	border-bottom: 1px solid var(--line-soft);
}

.section--tight {
	padding-block: clamp(2.75rem, 5vw, 4rem);
}

.section--feature {
	background:
		radial-gradient(ellipse 70% 60% at 50% 0%, rgba(43, 127, 234, .1), transparent 70%),
		var(--ink-850);
}

.sec-head {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.sec-title {
	font-size: clamp(1.6rem, 3.6vw, 2.5rem);
	color: #fff;
}

.sec-lede {
	max-width: 60ch;
	color: var(--text-dim);
}


/* 07. AI-Native Learning Series =========================================== */

.series {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
	background:
		linear-gradient(135deg, rgba(43, 127, 234, .1), rgba(245, 185, 59, .05)),
		var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease),
		box-shadow .25s var(--ease);
}

.series:hover {
	border-color: rgba(63, 200, 245, .45);
	transform: translateY(-3px);
	box-shadow: 0 24px 60px -30px rgba(63, 200, 245, .55);
}

.series:hover .arrow {
	transform: translateX(5px);
}

.series__art img {
	width: 100%;
}

.series__body {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	align-items: flex-start;
}

.series__text {
	color: var(--text-dim);
}

.courses {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.course {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	padding: 1.15rem 1.15rem 3rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .25s var(--ease), transform .25s var(--ease),
		box-shadow .25s var(--ease);
}

/* A hairline that lights up along the top edge on hover */
.course::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--cyan), var(--blue), var(--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease);
}

.course:hover {
	border-color: rgba(63, 200, 245, .4);
	transform: translateY(-4px);
	box-shadow: 0 22px 50px -28px rgba(63, 200, 245, .6);
}

.course:hover::before {
	transform: scaleX(1);
}

.course:hover .arrow {
	transform: translateX(5px);
}

.course__art {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 128px;
	padding: .35rem;
	background: radial-gradient(ellipse at center, rgba(43, 127, 234, .14), transparent 70%);
	border-radius: var(--radius-sm);
}

.course__art img {
	max-height: 118px;
	width: auto;
	object-fit: contain;
}

.course__text {
	font-size: .92rem;
	color: var(--text-dim);
}

.course .arrow {
	position: absolute;
	left: 1.15rem;
	bottom: 1.1rem;
}


/* 08. Site directory tiles ================================================ */

.tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.4rem 1.4rem 3.2rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: border-color .25s var(--ease), transform .25s var(--ease),
		background-color .25s var(--ease);
}

.tile::before {
	content: "";
	position: absolute;
	inset: auto auto 0 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, var(--cyan), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease);
}

.tile:hover {
	border-color: rgba(63, 200, 245, .35);
	background: var(--ink-700);
	transform: translateY(-4px);
}

.tile:hover::before {
	transform: scaleX(1);
}

.tile:hover .arrow {
	transform: translateX(5px);
}

.tile__title {
	font-size: 1.35rem;
	color: #fff;
}

.tile__text {
	font-size: .95rem;
	color: var(--text-dim);
}

.tile em {
	color: var(--gold);
	font-style: italic;
}

.tile .arrow {
	position: absolute;
	left: 1.4rem;
	bottom: 1.3rem;
}


/* 09. Recent posts ======================================================== */

.posts {
	border-top: 1px solid var(--line-soft);
}

.posts__item a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1rem .25rem;
	border-bottom: 1px solid var(--line-soft);
	transition: padding-left .25s var(--ease), border-color .25s var(--ease);
}

.posts__item a:hover {
	padding-left: 1rem;
	border-bottom-color: rgba(63, 200, 245, .4);
}

.posts__title {
	font-weight: 500;
	color: var(--text);
}

.posts__item a:hover .posts__title {
	color: var(--cyan);
}

.posts__src {
	flex: none;
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}


/* 10. Certifications ====================================================== */

.certs {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
}

.certs img {
	height: 46px;
	width: auto;
	border-radius: 6px;
	background: rgba(255, 255, 255, .9);
	padding: 4px;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .25s var(--ease), opacity .25s var(--ease),
		transform .25s var(--ease);
}

.certs img:hover {
	filter: none;
	opacity: 1;
	transform: translateY(-3px);
}


/* 11. Interior pages & contact form ======================================= */

/* Interior pages have no hero, so the first section carries the top spacing. */
.section--page {
	padding-top: clamp(2.5rem, 6vw, 4.5rem);
	border-bottom: none;
}

.page-head {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.page-title {
	font-size: clamp(2rem, 5vw, 3.25rem);
	color: #fff;
}

.page-lede {
	max-width: 54ch;
	color: var(--text-dim);
	font-size: 1.05rem;
}

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
}

/* --- Form --------------------------------------------------------------- */

.form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: clamp(1.35rem, 3vw, 2.25rem);
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.field {
	display: flex;
	flex-direction: column;
	gap: .45rem;
}

.field__label {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
}

.field__input {
	width: 100%;
	padding: .8rem .9rem;
	background: var(--ink-900);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font-family: var(--body);
	font-size: 1rem;
	line-height: 1.5;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.field__input::placeholder {
	color: #5b6c84;
}

.field__input:hover {
	border-color: #263551;
}

.field__input:focus {
	outline: none;
	border-color: var(--cyan);
	box-shadow: 0 0 0 3px rgba(63, 200, 245, .16);
}

.field__input.is-invalid {
	border-color: #e2596b;
}

.field__input.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(226, 89, 107, .18);
}

.field__textarea {
	resize: vertical;
	min-height: 11rem;
}

.field__error:empty {
	display: none;
}

.field__error {
	font-family: var(--mono);
	font-size: .74rem;
	line-height: 1.5;
	color: #f0899a;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: .25rem;
}

.btn[disabled] {
	opacity: .6;
	cursor: not-allowed;
	transform: none;
}

.form-status:empty {
	display: none;
}

.form-status {
	font-family: var(--mono);
	font-size: .78rem;
	line-height: 1.5;
	color: var(--text-dim);
	flex: 1 1 14rem;
}

.form-status.is-ok {
	color: #57d9a3;
}

.form-status.is-error {
	color: #f0899a;
}

/* Hidden from people, reachable by bots. Not display:none — some bots skip
   those — just pushed out of the layout and out of the tab order. */
.honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Aside -------------------------------------------------------------- */

.contact-aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.aside-card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.25rem;
	background: var(--ink-850);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius);
}

.aside-card__text {
	font-size: .95rem;
	color: var(--text-dim);
}

/* Portrait sits flush to the card edges, with the caption below it. */
.aside-card--portrait {
	padding: 0;
	gap: 0;
	overflow: hidden;
	border-color: var(--line);
}

.portrait {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	/* The photo's warm wall is much lighter than the page — cooling and
	   dimming it slightly lets the card sit in the palette. */
	filter: saturate(.85) brightness(.94) contrast(1.04);
}

.portrait__caption {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: .9rem 1.25rem 1.1rem;
	border-top: 1px solid var(--line);
	background: var(--ink-800);
}

.portrait__name {
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 112%;
	font-size: 1.1rem;
	color: #fff;
	line-height: 1.2;
}

.portrait__role {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .06em;
	color: var(--muted);
	line-height: 1.5;
}

.aside-list {
	display: flex;
	flex-direction: column;
}

.aside-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .6rem 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: .95rem;
	color: var(--text);
	transition: color .2s var(--ease);
}

.aside-list li:last-child a {
	border-bottom: none;
	padding-bottom: 0;
}

.aside-list a:hover {
	color: var(--cyan);
}

.aside-list a:hover .arrow {
	transform: translateX(4px);
}


/* --- Bio block (engineering page) --------------------------------------- */

.bio {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: start;
	padding: clamp(1.35rem, 3vw, 2.25rem);
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.bio__media {
	position: relative;
}

.bio__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: var(--radius-sm);
	filter: saturate(.85) brightness(.94) contrast(1.04);
}

/* Current employer's mark, tucked into the corner of the photo */
.bio__chip {
	position: absolute;
	right: -.6rem;
	bottom: -.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4.75rem;
	height: 4.75rem;
	padding: .55rem;
	background: rgba(255, 255, 255, .94);
	border: 1px solid var(--line);
	border-radius: 50%;
	box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .8);
}

.bio__chip img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	object-fit: contain;
}

.bio__body {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.bio__title {
	font-size: clamp(1.35rem, 2.6vw, 1.85rem);
	color: #fff;
}

.bio__text {
	color: var(--text-dim);
}


/* --- Organisation cards ------------------------------------------------- */

.orgs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.org {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.35rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.org:hover {
	border-color: rgba(245, 185, 59, .35);
	transform: translateY(-3px);
}

/* Logos come in every possible colour and transparency, so each one sits on
   its own light chip rather than directly on the dark panel. */
.org__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 3.5rem;
	margin-bottom: .35rem;
	padding: .5rem .75rem;
	background: rgba(255, 255, 255, .93);
	border-radius: var(--radius-sm);
	align-self: flex-start;
	max-width: 100%;
}

.org__logo img {
	max-height: 100%;
	width: auto;
	max-width: 12rem;
	object-fit: contain;
}

.org__name {
	font-size: 1.2rem;
	color: #fff;
}

.org__role {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.org__text {
	font-size: .93rem;
	color: var(--text-dim);
}


/* --- Callout ------------------------------------------------------------ */

.callout {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.35rem, 3vw, 2rem);
	background:
		linear-gradient(135deg, rgba(43, 127, 234, .12), rgba(245, 185, 59, .06)),
		var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.callout__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.callout__title {
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	color: #fff;
}

.callout__text {
	color: var(--text-dim);
	max-width: 46ch;
}


/* --- App rows (software page) ------------------------------------------- */

/* Apps borrow the store-listing idiom: square icon, title, category, blurb. */
.apps {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.app {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1.1rem;
	align-items: start;
	padding: 1.25rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.app:hover {
	border-color: rgba(63, 200, 245, .35);
	transform: translateY(-3px);
}

.app__icon {
	width: 4.5rem;
	height: 4.5rem;
	flex: none;
	overflow: hidden;
	border-radius: 22%;
	border: 1px solid var(--line);
	background: var(--ink-700);
}

.app__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.app__body {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 0;
}

.app__name {
	font-size: 1.15rem;
	color: #fff;
}

.app__tag,
.box__tag {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
}

.app__text,
.box__text {
	font-size: .92rem;
	color: var(--text-dim);
}


/* --- Boxed titles ------------------------------------------------------- */

.boxes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.box {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	padding: 1.25rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.box:hover {
	border-color: rgba(63, 200, 245, .35);
	transform: translateY(-3px);
}

/* Box art stands on a lit plinth rather than floating on the panel — these
   were physical objects on a shop shelf. */
.box__stage {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 12rem;
	margin-bottom: .8rem;
	padding: .75rem;
	background: radial-gradient(ellipse 62% 38% at 50% 96%, rgba(63, 200, 245, .2), transparent 72%);
	border-radius: var(--radius-sm);
}

.box__stage img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .55));
	transition: transform .25s var(--ease);
}

.box:hover .box__stage img {
	transform: translateY(-4px);
}

.box__name {
	font-size: 1.1rem;
	color: #fff;
}


/* --- Section sub-navigation --------------------------------------------- */

.subnav {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	padding: .35rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: 999px;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
}

.subnav__link {
	padding: .55rem 1.1rem;
	border-radius: 999px;
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .04em;
	color: var(--text-dim);
	transition: color .2s var(--ease), background-color .2s var(--ease);
}

.subnav__link:hover {
	color: #fff;
	background: rgba(63, 200, 245, .1);
}

.subnav__link[aria-current="page"] {
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	color: #04121e;
	font-weight: 600;
}


/* --- Novels ------------------------------------------------------------- */

.novels {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.novel {
	display: flex;
	gap: 1.35rem;
	align-items: flex-start;
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	background:
		linear-gradient(135deg, rgba(43, 127, 234, .1), rgba(245, 185, 59, .05)),
		var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.novel__art {
	flex: none;
	width: 8rem;
	display: block;
	border-radius: var(--radius-sm);
	overflow: hidden;
	cursor: zoom-in;
}

.novel__art img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .5));
	transition: transform .25s var(--ease);
}

.novel__art:hover img {
	transform: translateY(-3px);
}

.novel__body {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	align-items: flex-start;
	min-width: 0;
}

.novel__name {
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	color: #fff;
}

.novel__status {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
}

.novel__text {
	color: var(--text-dim);
}

.novel__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: .4rem;
}


/* --- Book covers -------------------------------------------------------- */

.books {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}

.book {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1.1rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.book:hover {
	border-color: rgba(63, 200, 245, .35);
	transform: translateY(-3px);
}

.book__cover {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 11rem;
	margin-bottom: .75rem;
	padding: .5rem;
	background: radial-gradient(ellipse 60% 36% at 50% 96%, rgba(63, 200, 245, .18), transparent 72%);
	border-radius: var(--radius-sm);
	cursor: zoom-in;
}

.book__cover img {
	max-height: 100%;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .55));
	transition: transform .25s var(--ease);
}

.book:hover .book__cover img {
	transform: translateY(-4px);
}

.book__name {
	font-size: 1rem;
	color: #fff;
	line-height: 1.25;
}

.book__tag {
	font-family: var(--mono);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.book__text {
	font-size: .88rem;
	color: var(--text-dim);
}


/* --- Magazine issues ---------------------------------------------------- */

.issues {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.issue {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	padding: 1.1rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.issue:hover {
	border-color: rgba(63, 200, 245, .35);
	transform: translateY(-3px);
}

.issue__cover {
	display: block;
	width: 5.25rem;
	flex: none;
	border-radius: 4px;
	overflow: hidden;
	cursor: zoom-in;
	box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
}

.issue__cover img {
	width: 100%;
	height: auto;
}

.issue__body {
	display: flex;
	flex-direction: column;
	gap: .45rem;
	min-width: 0;
}

.issue__name {
	font-family: var(--mono);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--cyan);
	line-height: 1.4;
}

.issue__list {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	font-size: .89rem;
	color: var(--text-dim);
}

.issue__list li {
	padding-left: .85rem;
	position: relative;
	line-height: 1.45;
}

.issue__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 4px;
	height: 4px;
	background: var(--gold);
	transform: rotate(45deg);
}

.issue__pdf {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: .2rem;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .06em;
	color: var(--muted);
	transition: color .2s var(--ease);
}

.issue__pdf:hover {
	color: var(--cyan);
}

.issue__pdf:hover .arrow {
	transform: translateX(3px);
}


/* --- Online articles ---------------------------------------------------- */

.writes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.write {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.35rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-left: 2px solid var(--line);
	border-radius: var(--radius);
	transition: border-left-color .25s var(--ease), transform .25s var(--ease);
}

.write:hover {
	border-left-color: var(--cyan);
	transform: translateY(-3px);
}

.write__date {
	font-family: var(--mono);
	font-size: .68rem;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gold);
}

.write__date--none {
	color: var(--muted);
}

.write__name {
	font-size: 1.05rem;
	color: #fff;
	line-height: 1.3;
}

.write__text {
	font-size: .9rem;
	color: var(--text-dim);
}


/* --- Lightbox ----------------------------------------------------------- */

.lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(3, 6, 12, .92);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .2s var(--ease);
}

.lb.is-open {
	opacity: 1;
}

.lb__img {
	max-width: 100%;
	max-height: calc(100vh - 9rem);
	width: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
}

.lb__caption {
	font-family: var(--mono);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--text-dim);
	text-align: center;
}

.lb__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s var(--ease), color .2s var(--ease);
}

.lb__close:hover {
	background: rgba(63, 200, 245, .16);
	color: #fff;
}

body.lb-open {
	overflow: hidden;
}

/* The sticky player is fixed to the viewport bottom, so reserve room for it
   while it is open or it covers the last row of content and the footer. */
body.player-open {
	padding-bottom: 5.5rem;
}


/* --- Music pieces ------------------------------------------------------- */

.page-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: .35rem;
}

.pieces {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	align-items: start;
}

.piece {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	padding: 1.35rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease);
}

.piece:hover {
	border-color: rgba(63, 200, 245, .3);
}

.piece__name {
	font-size: 1.15rem;
	color: #fff;
	line-height: 1.25;
}

.piece__count {
	font-family: var(--mono);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.piece__text {
	font-size: .92rem;
	color: var(--text-dim);
}

.piece__text a {
	color: var(--cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.piece__play {
	display: flex;
	align-items: center;
	gap: .7rem;
	flex-wrap: wrap;
	margin-top: .3rem;
}

.piece__playlabel {
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .08em;
	color: var(--text-dim);
	margin-right: auto;
}

.piece__score,
.movement__score {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .06em;
	color: var(--muted);
	transition: color .2s var(--ease);
}

.piece__score:hover,
.movement__score:hover {
	color: var(--cyan);
}

.movement__score--none {
	opacity: .4;
}

.movement__score--none:hover {
	color: var(--muted);
}

/* Play button — a circle that swaps a triangle for two bars while playing */
.track {
	position: relative;
	flex: none;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	background: rgba(63, 200, 245, .1);
	border: 1px solid rgba(63, 200, 245, .3);
	border-radius: 50%;
	cursor: pointer;
	transition: background-color .2s var(--ease), border-color .2s var(--ease),
		transform .2s var(--ease);
}

.track:hover {
	background: rgba(63, 200, 245, .2);
	transform: scale(1.06);
}

.track.is-active {
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	border-color: transparent;
}

.track__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent var(--cyan);
}

.track.is-active .track__icon {
	border-left-color: #04121e;
}

.track.is-playing .track__icon {
	transform: translate(-50%, -50%);
	width: 10px;
	height: 11px;
	border: 0;
	background: linear-gradient(90deg, #04121e 0 3px, transparent 3px 7px, #04121e 7px 10px);
}

.movements {
	display: flex;
	flex-direction: column;
	margin-top: .3rem;
}

.movement {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: .7rem;
	padding: .45rem 0;
	border-bottom: 1px solid var(--line-soft);
}

.movement:last-child {
	border-bottom: none;
}

.movement__name {
	font-size: .92rem;
	color: var(--text);
	min-width: 0;
}

/* Program notes disclosure */
.notes {
	margin-top: .35rem;
	border-top: 1px solid var(--line-soft);
	padding-top: .6rem;
}

.notes__toggle {
	font-family: var(--mono);
	font-size: .7rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	list-style: none;
	transition: color .2s var(--ease);
}

.notes__toggle::-webkit-details-marker {
	display: none;
}

.notes__toggle::before {
	content: "+ ";
	color: var(--cyan);
}

.notes[open] .notes__toggle::before {
	content: "− ";
}

.notes__toggle:hover {
	color: var(--text);
}

.notes__body {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-top: .6rem;
	font-size: .88rem;
	color: var(--text-dim);
}


/* --- Sticky player ------------------------------------------------------ */

.player {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	background: rgba(7, 13, 24, .96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--line);
}

.player[hidden] {
	display: none;
}

.player__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: .7rem var(--gutter);
	display: grid;
	grid-template-columns: auto minmax(0, 14rem) minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
}

.player__toggle {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	padding: 0;
	background: linear-gradient(135deg, var(--blue), var(--cyan));
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 8px 22px -10px rgba(63, 200, 245, .8);
}

.player__glyph {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40%, -50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7px 0 7px 11px;
	border-color: transparent transparent transparent #04121e;
}

.player.is-playing .player__glyph {
	transform: translate(-50%, -50%);
	width: 11px;
	height: 12px;
	border: 0;
	background: linear-gradient(90deg, #04121e 0 3.5px, transparent 3.5px 7.5px, #04121e 7.5px 11px);
}

.player__meta {
	min-width: 0;
}

.player__title {
	font-weight: 500;
	color: #fff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player__piece {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .08em;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.player__seek {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	background: var(--line);
	border-radius: 999px;
	cursor: pointer;
}

.player__seek::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	background: var(--cyan);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(63, 200, 245, .2);
}

.player__seek::-moz-range-thumb {
	width: 13px;
	height: 13px;
	background: var(--cyan);
	border: 0;
	border-radius: 50%;
}

.player__time {
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--muted);
	white-space: nowrap;
}

.player__nav {
	display: flex;
	gap: .3rem;
}

.player__step {
	width: 2.1rem;
	height: 2.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--line);
	border-radius: 50%;
	color: var(--text-dim);
	font-size: .95rem;
	line-height: 1;
	cursor: pointer;
	transition: color .2s var(--ease), border-color .2s var(--ease);
}

.player__step:hover {
	color: #fff;
	border-color: var(--cyan);
}

.player__step--close {
	font-size: 1.15rem;
}


/* --- Heartbeats of AI songs --------------------------------------------- */

.page-head--centred {
	align-items: center;
	text-align: center;
}

.page-head--centred .page-lede {
	margin-inline: auto;
}

.hoai__mark {
	width: 5rem;
	height: auto;
	filter: drop-shadow(0 10px 26px rgba(226, 60, 80, .45));
}

.page-links--centred {
	justify-content: center;
	align-items: center;
}

.songs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	align-items: start;
}

.song {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1.35rem;
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .25s var(--ease), transform .25s var(--ease);
}

.song:hover {
	border-color: rgba(63, 200, 245, .3);
	transform: translateY(-3px);
}

.song__num {
	font-family: var(--mono);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
}

.song__name {
	font-family: var(--display);
	font-weight: 700;
	font-stretch: 112%;
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: -0.015em;
	color: #fff;
	margin: 0;
}

.song__text {
	font-size: .88rem;
	color: var(--text-dim);
}

.song__play {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-top: auto;
	padding-top: .5rem;
}

.song__playlabel {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .08em;
	color: var(--text-dim);
}


/* --- Blog: index list ---------------------------------------------------- */

.postlist {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.postcard {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	align-items: flex-start;
	padding: clamp(1.25rem, 2.5vw, 1.85rem);
	background: var(--ink-800);
	border: 1px solid var(--line);
	border-left: 2px solid var(--line);
	border-radius: var(--radius);
	transition: border-left-color .25s var(--ease), transform .25s var(--ease);
}

.postcard:hover {
	border-left-color: var(--cyan);
	transform: translateY(-2px);
}

.postcard__date {
	font-family: var(--mono);
	font-size: .7rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--gold);
}

.postcard__title {
	font-size: clamp(1.3rem, 2.6vw, 1.75rem);
	line-height: 1.2;
}

.postcard__title a {
	color: #fff;
	transition: color .2s var(--ease);
}

.postcard__title a:hover {
	color: var(--cyan);
}

.postcard__excerpt {
	color: var(--text-dim);
	max-width: 68ch;
}


/* --- Blog: post body ----------------------------------------------------- */

/* A single measured column — long-form reading wants ~70 characters, not the
   full grid width the rest of the site uses. */
.postbody {
	max-width: 42rem;
}

.postbody__title {
	max-width: 20ch;
}

.prose {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--text-dim);
}

.prose h2 {
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	color: #fff;
	margin-top: 1.4rem;
}

.prose h3 {
	font-size: 1.15rem;
	color: #fff;
	margin-top: .8rem;
}

.prose a {
	color: var(--cyan);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

.prose a:hover {
	color: #fff;
}

.prose strong {
	color: #fff;
}

.prose em {
	color: var(--text);
}

.prose ul,
.prose ol {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding-left: 1.5rem;
}

.prose ul {
	list-style: none;
	padding-left: 1.1rem;
}

.prose ol {
	list-style: decimal;
}

.prose ol li::marker {
	color: var(--gold);
	font-family: var(--mono);
	font-size: .85em;
}

.prose ul li {
	position: relative;
	padding-left: .9rem;
}

.prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .72em;
	width: 5px;
	height: 5px;
	background: var(--cyan);
	transform: rotate(45deg);
}

.prose blockquote {
	margin: .4rem 0;
	padding: .2rem 0 .2rem 1.35rem;
	border-left: 2px solid var(--cyan);
	color: var(--text);
	font-size: 1.12rem;
	line-height: 1.6;
}

.prose blockquote p {
	margin: 0;
}

.prose code {
	font-family: var(--mono);
	font-size: .88em;
	padding: .12em .4em;
	background: rgba(63, 200, 245, .1);
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--cyan);
}

.prose pre {
	margin: .3rem 0;
	padding: 1rem 1.15rem;
	background: var(--ink-900);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow-x: auto;
	font-size: .88rem;
	line-height: 1.6;
}

/* Inside a block, the code element is just the text — drop the inline chrome */
.prose pre code {
	padding: 0;
	background: none;
	border: 0;
	color: var(--text);
	font-size: inherit;
}

.prose img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
}

.prose figure {
	margin: .4rem 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.prose figcaption {
	font-family: var(--mono);
	font-size: .74rem;
	letter-spacing: .04em;
	color: var(--muted);
}

.prose hr {
	width: 100%;
	height: 1px;
	margin: .8rem 0;
	border: 0;
	background: linear-gradient(90deg, var(--line), transparent);
}

.prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}

.prose th,
.prose td {
	padding: .6rem .8rem;
	border-bottom: 1px solid var(--line-soft);
	text-align: left;
}

.prose th {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
}

.postbody--back {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-soft);
}

.postbody--back .arrow-link:hover .arrow {
	transform: translateX(-4px);
}


/* 12. Footer ============================================================== */

.footer {
	padding: 1.75rem 0;
	background: var(--ink-850);
}

.footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.footer__copy {
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .06em;
	color: var(--muted);
}

.footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.1rem;
}

.footer__nav a {
	font-family: var(--mono);
	font-size: .76rem;
	letter-spacing: .06em;
	color: var(--muted);
	transition: color .2s var(--ease);
}

.footer__nav a:hover {
	color: var(--cyan);
}


/* 13. Responsive ========================================================== */

@media (max-width: 1024px) {
	.courses {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

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

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

	.books {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.issues,
	.writes,
	.pieces,
	.songs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 820px) {
	.nav-toggle {
		display: flex;
	}

	.nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: .2rem;
		padding: .75rem var(--gutter) 1.25rem;
		background: rgba(5, 8, 15, .97);
		border-bottom: 1px solid var(--line-soft);
		backdrop-filter: blur(14px);
		-webkit-backdrop-filter: blur(14px);
		display: none;
	}

	.nav.is-open {
		display: flex;
	}

	.nav__link {
		padding: .7rem .6rem;
		font-size: .85rem;
	}

	.nav__link--accent {
		text-align: center;
		margin-top: .35rem;
	}

	.series {
		grid-template-columns: 1fr;
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	/* Stack the bio, and cap the photo so it does not dominate the column. */
	.bio {
		grid-template-columns: 1fr;
	}

	.bio__media {
		max-width: 15rem;
	}

	.apps {
		grid-template-columns: 1fr;
	}

	.novels {
		grid-template-columns: 1fr;
	}

	.subnav {
		width: 100%;
		justify-content: stretch;
	}

	.subnav__link {
		flex: 1;
		text-align: center;
	}

	/* Player collapses to controls + title; the seek bar moves to its own row */
	.player__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		row-gap: .5rem;
	}

	.player__seek {
		grid-column: 1 / -1;
		order: 3;
	}

	.player__time {
		order: 2;
	}

	/* Stacked layout: the portrait would fill the full column width, so lay
	   it out as a row with a small square photo instead. */
	.aside-card--portrait {
		flex-direction: row;
		align-items: stretch;
	}

	.portrait {
		width: 7.5rem;
		flex: none;
		aspect-ratio: 1 / 1;
	}

	.portrait__caption {
		justify-content: center;
		border-top: none;
		border-left: 1px solid var(--line);
		padding: 1rem 1.25rem;
	}
}

@media (max-width: 560px) {
	.courses,
	.tiles {
		grid-template-columns: 1fr;
	}

	.orgs {
		grid-template-columns: 1fr;
	}

	.boxes {
		grid-template-columns: 1fr;
	}

	.box__stage {
		height: 14rem;
	}

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

	.issues,
	.writes,
	.pieces,
	.songs {
		grid-template-columns: 1fr;
	}

	.player__time {
		display: none;
	}

	.page-links {
		flex-direction: column;
		gap: .6rem;
	}

	.novel {
		flex-direction: column;
	}

	.novel__art {
		width: 9rem;
	}

	.subnav {
		flex-direction: column;
		border-radius: var(--radius);
	}

	.subnav__link {
		border-radius: var(--radius-sm);
	}

	.callout {
		flex-direction: column;
		align-items: stretch;
	}

	.callout .btn {
		justify-content: center;
	}

	.topbar__name {
		display: none;
	}

	.posts__item a {
		flex-direction: column;
		gap: .3rem;
	}

	.certs img {
		height: 38px;
	}

	.footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.form-actions .btn {
		justify-content: center;
	}
}


/* 14. Reduced motion & print ============================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}

	.hero__sweep {
		display: none;
	}
}

@media print {
	.topbar,
	.hero__field,
	.footer__nav {
		display: none;
	}

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