/* ==========================================================================
   Genki Music site styles
   Dark, rainbow-accented, mobile-first.
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------ */

:root {
	--bg:            #0b0c10;
	--bg-elevated:   #13151c;
	--surface:       #171a22;
	--surface-hover: #1e222c;
	--line:          #272b36;
	--line-soft:     #1f232c;

	--text:          #eceef3;
	--text-muted:    #9aa2b1;
	--text-faint:    #6b7383;

	/* Rainbow accent set, used sparingly, one per section */
	--red:     #ff5f6d;
	--orange:  #ff9f45;
	--yellow:  #ffd166;
	--green:   #5ddc95;
	--teal:    #45c9d6;
	--blue:    #6f8cff;
	--purple:  #b98cff;

	--accent: var(--blue); /* per-section override */

	--rainbow: linear-gradient(90deg,
		var(--red) 0%, var(--orange) 17%, var(--yellow) 34%,
		var(--green) 51%, var(--teal) 68%, var(--blue) 84%, var(--purple) 100%);

	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
	             Roboto, Helvetica, Arial, sans-serif;
	--font-display: "Space Grotesk", var(--font-sans);

	--wrap: 1120px;
	--radius: 14px;
	--radius-sm: 8px;

	--header-h: 68px;

	--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 28px rgba(0, 0, 0, .35);
}

/* --- Reset / base ------------------------------------------------------- */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Grey flash on tap looks broken on a dark page; :active states cover it */
	-webkit-tap-highlight-color: transparent;
	/* A long URL or unbroken string must never widen the page on a phone */
	overflow-wrap: break-word;
}

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

a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .18);
	transition: color .15s ease, border-color .15s ease;
}

a:hover { border-bottom-color: currentColor; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0 0 .6em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

ul { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: .4em; }

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

.visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* --- Skip link ---------------------------------------------------------- */

.skip-link {
	position: absolute;
	top: -60px;
	left: 16px;
	z-index: 200;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 10px 16px;
	transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* --- Header / navigation ------------------------------------------------ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(11, 12, 16, .82);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--line-soft);
}

/* the rainbow hairline */
.site-header::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--rainbow);
	opacity: .9;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--header-h);
	/* The nav panel is a flex item too. Without wrapping it is squeezed into
	   whatever width is left beside the brand and the toggle. */
	flex-wrap: wrap;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 0;
	flex-shrink: 0;
}
.brand img { height: 34px; width: auto; }
.brand:hover { opacity: .85; }

.nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--text);
	font: inherit;
	font-size: 14px;
	padding: 8px 12px;
	cursor: pointer;
}
.nav-toggle:hover { background: var(--surface); }

.nav-toggle__bars {
	position: relative;
	width: 18px;
	height: 12px;
	flex-shrink: 0;
}
.nav-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) {
	transform: translateY(5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) {
	transform: translateY(-5px) rotate(-45deg);
}

.nav {
	display: none;
	padding: 8px 0 20px;
	/* Own row, full width of the header, so the section names never wrap */
	flex: 0 0 100%;
	min-width: 0;
}
.nav.is-open { display: block; }

.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.nav a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	font-size: 15px;
	font-weight: 500;
}
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.is-current { color: var(--text); background: var(--surface); }

/* Full names in the mobile panel, abbreviated in the desktop bar */
.nav__short { display: none; }

/* the little colour chip beside each nav item */
.nav a::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--accent);
	flex-shrink: 0;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--line-soft);
	padding: 64px 0 56px;
}

.hero::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto -10%;
	height: 520px;
	background:
		radial-gradient(closest-side, rgba(185, 140, 255, .16), transparent 70%) 12% 40% / 55% 100% no-repeat,
		radial-gradient(closest-side, rgba(111, 140, 255, .14), transparent 70%) 55% 20% / 55% 100% no-repeat,
		radial-gradient(closest-side, rgba(255, 95, 109, .12), transparent 70%) 88% 55% / 55% 100% no-repeat;
	pointer-events: none;
}

.hero__inner { position: relative; }

.hero__grid {
	display: grid;
	gap: 36px;
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 18px;
}
.eyebrow::before {
	content: "";
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--rainbow);
}

.hero h1 {
	font-size: clamp(2rem, 7vw, 3.4rem);
	margin-bottom: .35em;
}

.hero h1 .accent {
	background: var(--rainbow);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero__lede {
	font-size: clamp(1.02rem, 2.4vw, 1.18rem);
	color: var(--text-muted);
	max-width: 56ch;
}

.hero__portrait {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	max-width: 320px;
}
.hero__portrait img { width: 100%; }
.hero__portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, .09);
	pointer-events: none;
}

/* --- Buttons ------------------------------------------------------------ */

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--text);
	font-family: var(--font-sans);
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover {
	background: var(--surface-hover);
	border-color: var(--line);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--text);
	color: var(--bg);
	border-color: var(--text);
	font-weight: 600;
}
.btn--primary:hover { background: #fff; border-color: #fff; }

.btn svg { width: 16px; height: 16px; fill: currentColor; }

/* --- Sections ----------------------------------------------------------- */

.section {
	padding: 60px 0;
	border-bottom: 1px solid var(--line-soft);
}
.section:last-of-type { border-bottom: 0; }

.section__head { margin-bottom: 32px; }

.section__kicker {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 12px;
}
.section__kicker::before {
	content: "";
	width: 22px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}

.section h2 {
	font-size: clamp(1.55rem, 4.4vw, 2.1rem);
	margin-bottom: .35em;
}

.section__standfirst {
	color: var(--text-muted);
	font-size: 1.05rem;
	max-width: 62ch;
	margin: 0;
}

.section__body { display: grid; gap: 32px; }

.prose { color: var(--text-muted); max-width: 64ch; }
.prose strong { color: var(--text); font-weight: 600; }

/* --- Cards -------------------------------------------------------------- */

.cards {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

.card {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 24px;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--accent);
	opacity: .85;
}
/* Hover lifts only where there is a real pointer. On a touchscreen these
   stick after a tap and read as a stuck selection. */
@media (hover: hover) and (pointer: fine) {
	.card:hover {
		border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
		background: var(--surface-hover);
		transform: translateY(-2px);
	}
	.btn:hover { transform: translateY(-1px); }
	.social a:hover { transform: translateY(-2px); }
	.video__play:hover .video__btn { transform: scale(1.08); background: rgba(12,13,18,.88); }
	.video__play:hover img { opacity: .72; transform: scale(1.03); }
	.card__link:hover::after { transform: translateX(3px); }
}

.card h3 {
	font-size: 1.06rem;
	margin-bottom: .5em;
}

.card p {
	color: var(--text-muted);
	font-size: .95rem;
	margin-bottom: .8em;
}

.card__meta {
	display: block;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--text-faint);
	margin-bottom: 10px;
	font-weight: 600;
}

.card__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .92rem;
	font-weight: 500;
	border: 0;
}
.card__link::after {
	content: "\2192";
	transition: transform .15s ease;
}
.card__link:hover::after { transform: translateX(3px); }

.card__authors {
	font-size: .88rem;
	color: var(--text-faint);
	margin-bottom: 1em;
}
.card__authors em { color: var(--text-muted); font-style: normal; }

/* --- Media / figures ---------------------------------------------------- */

.figure {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	box-shadow: var(--shadow);
}
.figure img { width: 100%; }

/* Logos are supplied black-on-transparent, so they need a light plate to read
   against the dark page. */
.figure--logo img {
	display: block;
	height: auto;
	background: #fff;
	padding: 34px 38px;
}

/* For photos whose source is too small to run the full width of the column.
   Better to show them at their own size than to upscale them. */
/* Caps how wide a figure is allowed to run, for photos whose source is too
   small to fill the column without being upscaled into mush. Goes on a
   wrapper rather than the figure itself so the figure keeps the same margins
   as every other figure on the page and the two sit consistently.

   width is explicit because these are grid items: an auto inline margin
   cancels the grid's default stretch and shrink-wraps the box instead. */
.figure-cap {
	width: 100%;
	max-width: 720px;   /* less the figure's own 40px margins, so ~640 of image */
	margin-inline: auto;
}

.figure figcaption {
	padding: 12px 16px;
	font-size: .84rem;
	color: var(--text-faint);
	background: var(--bg-elevated);
	border-top: 1px solid var(--line);
}

.video {
	position: relative;
	padding-top: 56.25%;
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--bg-elevated);
}
.video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-grid {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
}

/* --- Click-to-play video facade ----------------------------------------
   A YouTube iframe costs well over a megabyte before anyone presses play.
   These placeholders load nothing until clicked, which matters most on a
   phone on mobile data. */

.video__play {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: linear-gradient(150deg, #1c2030, #12141c 60%, #1a1522);
	color: var(--text);
	font: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	overflow: hidden;
}

.video__play img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .55;
	transition: opacity .25s ease, transform .35s ease;
}

.video__play::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(closest-side, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

.video__btn {
	position: relative;
	z-index: 1;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(12, 13, 18, .72);
	border: 1px solid rgba(255, 255, 255, .28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.video__btn svg {
	width: 22px;
	height: 22px;
	fill: #fff;
	margin-left: 3px; /* optically centre the triangle */
}

.video__label {
	position: relative;
	z-index: 1;
	font-size: .9rem;
	font-weight: 500;
	letter-spacing: .01em;
	text-align: center;
	padding: 0 18px;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
}

.video__play:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -4px;
}

/* --- Tag pills ---------------------------------------------------------- */

.tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}
.tags li {
	margin: 0;
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--text-muted);
	background: var(--bg-elevated);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 5px 12px;
}

/* --- Contact form ------------------------------------------------------- */

.contact-grid {
	display: grid;
	gap: 32px;
}

.form { display: grid; gap: 16px; }

.field { display: grid; gap: 7px; }

.field label {
	font-size: .88rem;
	font-weight: 600;
	color: var(--text);
}
.field .hint { font-weight: 400; color: var(--text-faint); }

.field input,
.field textarea {
	width: 100%;
	background: var(--bg-elevated);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: inherit;
	font-size: 16px; /* 16px stops iOS zooming on focus */
	padding: 11px 13px;
	transition: border-color .15s ease, background .15s ease;
}
.field input:hover,
.field textarea:hover { border-color: #333846; }

.field input:focus,
.field textarea:focus {
	border-color: var(--accent);
	background: var(--surface);
	outline: none;
}

.field textarea { resize: vertical; min-height: 140px; }

.form__row { display: grid; gap: 16px; }

.form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

/* reCAPTCHA renders a fixed 304 x 78 iframe. On narrow screens we scale it
   down and shrink the wrapper to match, so the layout box shrinks too and
   the page never gains a horizontal scrollbar. */
.recaptcha-wrap { max-width: 100%; }
.g-recaptcha { transform-origin: 0 0; }

.contact-aside .card { padding: 22px; }

.contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.contact-list li { margin: 0; }
.contact-list .label {
	display: block;
	font-size: .76rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--text-faint);
	font-weight: 600;
}
.contact-list a { font-size: 1rem; }

/* --- Social icons ------------------------------------------------------- */

.social {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.social li { margin: 0; }

/* Inline variant, sits under a block of copy, e.g. the Break III links */
.social--inline {
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}

.social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--text-muted);
	transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.social a:hover {
	color: var(--text);
	background: var(--surface-hover);
	border-color: var(--accent);
}
.social svg { width: 18px; height: 18px; fill: currentColor; }

/* --- Notices / messages ------------------------------------------------- */

.notice {
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	background: var(--surface);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	color: var(--text-muted);
	margin-bottom: 24px;
}
.notice strong { color: var(--text); }
.notice--error { --accent: var(--red); }
.notice--success { --accent: var(--green); }

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px;
	text-align: center;
	max-width: 560px;
	margin: 0 auto;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
	border-top: 1px solid var(--line-soft);
	padding: 40px 0 48px;
	background: var(--bg-elevated);
	position: relative;
}
.site-footer::before {
	content: "";
	position: absolute;
	top: -1px; left: 0; right: 0;
	height: 2px;
	background: var(--rainbow);
	opacity: .55;
}

.site-footer__inner {
	display: grid;
	gap: 24px;
	align-items: center;
}

.site-footer p {
	color: var(--text-faint);
	font-size: .87rem;
	margin: 0;
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--text); }

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .87rem;
}
.footer-links li { margin: 0; }

/* --- Reveal on scroll --------------------------------------------------- */

/* Only hide content when we know JS is running to reveal it again. If the
   script fails or is blocked, everything stays visible. */
.js .reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 620px) {
	.cards { grid-template-columns: repeat(2, 1fr); }
	.video-grid { grid-template-columns: repeat(2, 1fr); }
	.form__row--split { grid-template-columns: 1fr 1fr; }
	.hero { padding: 88px 0 76px; }
	.section { padding: 76px 0; }
}

@media (min-width: 900px) {
	:root { --header-h: 76px; }

	.brand img { height: 40px; }

	.hero__grid {
		grid-template-columns: 1.35fr .65fr;
		gap: 56px;
	}
	.hero__portrait { max-width: none; margin-left: auto; }

	.section__body--split {
		grid-template-columns: 1.25fr .75fr;
		gap: 48px;
		align-items: start;
	}
	.section__body--split-reverse {
		grid-template-columns: .75fr 1.25fr;
	}

	.cards--three { grid-template-columns: repeat(3, 1fr); }

	.contact-grid { grid-template-columns: 1.3fr .7fr; gap: 48px; }

	.site-footer__inner {
		grid-template-columns: 1fr auto;
	}
}

/* Horizontal nav only once there is genuinely room for it. Below this the
   hamburger panel is used, which keeps the full section names readable.

   Nine sections is as many as this bar holds. .wrap caps the header at
   1120px, so the row never gets wider than that no matter the screen: the
   tight item padding below is what keeps the links clear of the logo. Adding
   a tenth section means shortening some 'short' labels, not just waiting for
   a bigger monitor. */
@media (min-width: 1080px) {
	.nav-toggle { display: none; }

	.nav {
		display: block !important;
		padding: 0;
		/* back onto the header row, sized to its contents */
		flex: 0 1 auto;
	}
	.nav ul {
		flex-direction: row;
		align-items: center;
		gap: 2px;
	}
	.nav a {
		padding: 8px;
		font-size: 14px;
	}
	.nav a::before { width: 6px; height: 6px; }

	.nav__full  { display: none; }
	.nav__short { display: inline; }
}

/* Small phones: 304px of widget will not fit, so scale it and its box */
@media (max-width: 349px) {
	.g-recaptcha  { transform: scale(.85); }
	.recaptcha-wrap { width: 259px; height: 67px; } /* 304 x 78, scaled */
}

@media (max-width: 400px) {
	.card  { padding: 20px; }
	.panel { padding: 24px; }
}

/* --- Touch devices ------------------------------------------------------
   Bump anything tappable up to the ~44px minimum comfortable target. */

@media (pointer: coarse) {
	.social a { width: 44px; height: 44px; }
	.nav a { padding: 13px 12px; }
	.btn { padding: 13px 22px; }
	.nav-toggle { padding: 12px 14px; }
	.field input, .field textarea { padding: 13px; }
	/* Give inline text links inside body copy a little more room to hit */
	.prose a, .card__link { padding: 2px 0; }
	/* Standalone lists of links sit on their own, so they get a real target
	   rather than the line box of the text. */
	.footer-links { gap: 2px 18px; }
	.footer-links a, .contact-list a {
		display: inline-block;
		padding: 11px 0;
	}
}

/* Touchscreen laptops get the horizontal nav bar, where there is height to
   spare but no width at all. Take the extra target on the vertical axis only;
   the wider padding above would push the links back over the logo. */
@media (pointer: coarse) and (min-width: 1080px) {
	.nav a { padding: 12px 8px; }
}

/* --- Preferences -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.js .reveal { opacity: 1; transform: none; }
}

@media print {
	.site-header, .nav, .video, .social, .actions { display: none; }
	body { background: #fff; color: #000; }
	.card, .section { border-color: #ccc; }
}