/* Shameless Nation, October 2026 redesign: the quotes are the page. No framework, no scripts beyond share.js. */

:root {
	--bg: #18191b;
	--band: #1f2023;
	--panel: #26282b;
	--rule: #3a3c40;
	--text: #d4d5d7;      /* 12.9:1 on --bg */
	--muted: #b0b2b6;     /* 8.8:1 on --bg, 7.9:1 on --band */
	--bright: #ffffff;
	--accent: #46c4a3;    /* 8.7:1 on --bg */
	--accent-dim: #2f8f77;
	--sans: "Source Sans 3", "Source Sans Pro", Helvetica, Arial, sans-serif;
	--serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
	--measure: 46rem;
	--bar: 3.5rem;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1.0625rem;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: break-word;
}

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--bright); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

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

.wrap { margin: 0 auto; max-width: var(--measure); padding: 0 1.25rem; }

.skip { left: -999px; position: absolute; }
.skip:focus { background: var(--bright); color: #000; left: 1rem; padding: 0.5rem 1rem; top: 0.5rem; z-index: 20; }

/* Top bar */

.bar {
	background: var(--bg);
	border-bottom: 1px solid var(--rule);
	position: sticky;
	top: 0;
	z-index: 10;
}

	.bar-inner {
		align-items: center;
		display: flex;
		gap: 1.5rem;
		justify-content: space-between;
		margin: 0 auto;
		max-width: 72rem;
		min-height: var(--bar);
		padding: 0 1.25rem;
	}

	.brand {
		color: var(--muted);
		flex: none;
		font-size: 0.8rem;
		letter-spacing: 0.14em;
		text-decoration: none;
		text-transform: uppercase;
		white-space: nowrap;
	}

		.brand strong { color: var(--bright); font-weight: 600; }

	.themes { min-width: 0; }

		.themes ul {
			display: flex;
			gap: 0.25rem;
			list-style: none;
			margin: 0;
			overflow-x: auto;
			padding: 0;
			scrollbar-width: none;
		}

		.themes ul::-webkit-scrollbar { display: none; }

		.themes a {
			color: var(--text);
			display: block;
			font-size: 0.9rem;
			line-height: 2.75rem;
			padding: 0 0.7rem;
			text-decoration: none;
			white-space: nowrap;
		}

		.themes a:hover, .themes a.is-current { color: var(--bright); box-shadow: inset 0 -2px 0 var(--accent); }

@media (max-width: 860px) {
	.bar-inner { display: block; padding: 0; }
	.brand { display: block; font-size: 0.72rem; letter-spacing: 0.1em; padding: 0.7rem 1.25rem 0; }
	.themes { position: relative; }
	.themes:after {
		background: linear-gradient(to right, rgba(24, 25, 27, 0), rgba(24, 25, 27, 1));
		content: '';
		height: 100%;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 0;
		width: 2.5rem;
	}
	.themes ul { padding: 0 2rem 0 0.55rem; }
	:root { --bar: 5.4rem; }
}

/* Hero: a mosaic of the speakers behind the headline */

.hero { overflow: hidden; position: relative; }

	.hero-mosaic {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		inset: 0;
		position: absolute;
	}

	@media (min-width: 700px) { .hero-mosaic { grid-template-columns: repeat(8, 1fr); } }

		.hero-mosaic picture, .hero-mosaic img { display: block; height: 100%; width: 100%; }

		.hero-mosaic img { filter: grayscale(0.6) contrast(1.05); object-fit: cover; object-position: 50% 20%; }

	.hero:after {
		background: linear-gradient(to bottom, rgba(24, 25, 27, 0.72) 0%, rgba(24, 25, 27, 0.80) 45%, rgba(24, 25, 27, 0.97) 100%);
		content: '';
		inset: 0;
		position: absolute;
	}

	.hero-text { padding-bottom: 4rem; padding-top: 6rem; position: relative; z-index: 1; }

	@media (min-width: 900px) { .hero-text { padding-bottom: 6rem; padding-top: 10rem; } }

	.hero h1 {
		color: var(--bright);
		font-family: var(--serif);
		font-size: clamp(2.3rem, 1.4rem + 4vw, 4.4rem);
		font-weight: 400;
		letter-spacing: -0.01em;
		line-height: 1.06;
		margin: 0 0 1.25rem;
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
		text-wrap: balance;
	}

	.kicker {
		color: var(--accent);
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		margin: 0 0 1rem;
		text-transform: uppercase;
	}

	.lede { color: #e4e5e7; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); margin: 0; max-width: 38rem; text-wrap: pretty; }

/* Who said it */

.people-wrap { max-width: 72rem; padding-bottom: 3.5rem; padding-top: 2.5rem; }

	.people-title {
		color: var(--bright);
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		margin: 0 0 1.25rem;
		text-transform: uppercase;
	}

	.people {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		list-style: none;
		margin: 0;
		padding: 0;
	}

	@media (max-width: 559px) { .people { gap: 0.75rem 0.6rem; } .people .name { font-size: 0.75rem; overflow-wrap: normal; } .people .n { font-size: 0.75rem; } }
	@media (min-width: 1000px) { .people { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

		.people a { color: var(--text); display: block; text-decoration: none; }

		.people picture, .people .initials {
			aspect-ratio: 4 / 5;
			background: var(--panel);
			display: block;
			margin-bottom: 0.6rem;
			overflow: hidden;
			width: 100%;
		}

		.people .initials { display: flex; font-family: var(--serif); font-size: 2rem; }

		.people img { filter: grayscale(0.35); height: 100%; object-fit: cover; transition: filter 0.2s, transform 0.3s; width: 100%; }

		.people a:hover img, .people a:focus-visible img { filter: none; transform: scale(1.03); }

		.people .name { color: var(--bright); display: block; font-size: 0.95rem; font-weight: 600; line-height: 1.3; }

		.people .n { color: var(--muted); display: block; font-size: 0.85rem; font-weight: 400; }

.initials {
	align-items: center;
	background: #34363a;
	color: var(--bright);
	display: inline-flex;
	flex: none;
	font-weight: 600;
	justify-content: center;
	letter-spacing: 0.05em;
}

/* Theme openers: full-width photo band with the title over it */

.theme { border-top: 1px solid var(--rule); }

	.theme-head { padding: 3rem 0 0.5rem; position: relative; }

	.theme-head.has-image { align-items: flex-end; display: flex; min-height: 15rem; padding: 0; }

	@media (min-width: 700px) { .theme-head.has-image { min-height: clamp(22rem, 31vw, 30rem); } }

	#negotiations .theme-head img { object-position: 50% 12%; }

		.theme-head picture { inset: 0; position: absolute; }

		.theme-head picture img { filter: grayscale(0.45) contrast(1.05); height: 100%; object-fit: cover; width: 100%; }

		.theme-head.has-image:after {
			background: linear-gradient(to bottom, rgba(24, 25, 27, 0.25) 0%, rgba(24, 25, 27, 0.55) 50%, rgba(24, 25, 27, 0.96) 100%);
			content: '';
			inset: 0;
			position: absolute;
		}

		.theme-head .wrap { max-width: 72rem; padding-bottom: 1.75rem; position: relative; width: 100%; z-index: 1; }

	.theme-kicker {
		color: var(--accent);
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		margin: 0 0 0.35rem;
		text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
		text-transform: uppercase;
	}

	.theme-title {
		color: var(--bright);
		font-family: var(--serif);
		font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.8rem);
		font-weight: 400;
		line-height: 1.05;
		margin: 0;
		text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
	}

/* Quote bands */

.quote { padding: 0 0 3.5rem; }

	.quote + .quote { border-top: 1px solid #2a2c30; padding-top: 0; }

	.band { margin: 0 auto; max-width: 72rem; }

	.who { margin: 0 0 1.5rem; }

		.who picture, .who .no-photo { display: block; }

		.who img { aspect-ratio: 4 / 3; filter: grayscale(0.4) contrast(1.05); height: auto; object-fit: cover; width: 100%; }

		.who .no-photo { align-items: center; aspect-ratio: 4 / 3; background: var(--panel); display: flex; justify-content: center; }

			.who .no-photo span { color: var(--muted); font-family: var(--serif); font-size: 3rem; }

		.who figcaption { line-height: 1.35; padding: 1rem 1.25rem 0; }

		.who .who-name { color: var(--bright); display: block; font-family: var(--sans); font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0; }

		.who figcaption span { color: var(--text); display: block; font-size: 0.95rem; }

		.who time { color: var(--muted); display: block; font-size: 0.9rem; }

	.said { padding: 0 1.25rem; }

	@media (min-width: 900px) {
		.quote { padding: 3.5rem 1.25rem; }
		.quote + .quote { padding-top: 3.5rem; }
		.band { align-items: start; display: grid; gap: 3rem; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
		.who { margin: 0; position: sticky; top: calc(var(--bar) + 1.5rem); }
		.who img, .who .no-photo { aspect-ratio: 4 / 5; }
		.who figcaption { padding: 1rem 0 0; }
		.said { max-width: 42rem; padding: 0.5rem 0 0; }
	}

	.quote:target blockquote { border-left-color: var(--accent); }

	.quote blockquote {
		border-left: 3px solid var(--rule);
		margin: 0 0 1.25rem;
		padding: 0.1rem 0 0.1rem 1.25rem;
	}

		.quote blockquote p {
			color: var(--bright);
			font-family: var(--serif);
			font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);
			font-style: italic;
			line-height: 1.25;
			margin: 0;
			text-wrap: pretty;
		}

	.context { color: var(--muted); font-size: 0.95rem; margin: 0 0 1.5rem; }

	.outcome {
		background: var(--panel);
		border-left: 3px solid var(--accent);
		margin: 0 0 1rem;
		padding: 1.1rem 1.25rem 1rem;
	}

		.outcome h2, .outcome h3, .outcome h4 {
			color: var(--accent);
			font-size: 0.75rem;
			font-weight: 600;
			letter-spacing: 0.16em;
			margin: 0 0 0.4rem;
			text-transform: uppercase;
		}

		.outcome p { color: var(--text); font-size: 1rem; margin: 0 0 0.6rem; text-wrap: pretty; }

		.outcome .sources { color: var(--muted); font-size: 0.875rem; margin: 0; }

	.share-one { margin: 0; }

/* Buttons */

.share-btn, .btn {
	align-items: center;
	background: none;
	border: 0;
	color: var(--text);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 0.9rem;
	gap: 0.5rem;
	min-height: 44px;
	padding: 0;
}

	.share-btn:hover { color: var(--accent); }

.btn {
	border: 1px solid var(--accent-dim);
	color: var(--bright);
	padding: 0.4rem 1.1rem;
	text-decoration: none;
}

	.btn:hover { background: rgba(70, 196, 163, 0.12); color: var(--bright); }

	.btn-quiet { border-color: var(--rule); }

/* End sections */

.end { background: var(--band); border-top: 1px solid var(--rule); margin-top: 2rem; padding: 3.5rem 0 4rem; }

	.end-grid { display: grid; gap: 2.75rem 4rem; max-width: 72rem; }

	@media (min-width: 900px) { .end-grid { grid-template-columns: 1fr 1fr; } }

	.end h2 {
		color: var(--bright);
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.16em;
		margin: 0 0 0.9rem;
		text-transform: uppercase;
	}

	.end p { margin: 0 0 1rem; }

	#credits p { color: var(--muted); font-size: 0.875rem; }

	.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

	.share-links, .credits { list-style: none; margin: 0; padding: 0; }

		.share-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }

			.share-links a { display: inline-block; line-height: 2.75rem; }

		.credits { color: var(--muted); font-size: 0.875rem; }

			.credits li { margin-bottom: 0.35rem; }

/* Anchor targets clear the sticky bar */
.theme, .quote, .end, .people-wrap, #credits, #about, #act, #share, #promises { scroll-margin-top: calc(var(--bar) + 0.5rem); }

/* Per-quote pages, 404 */

.crumbs { color: var(--muted); font-size: 0.9rem; max-width: 72rem; padding-bottom: 1rem; padding-top: 1.5rem; }

	.crumbs a { color: var(--text); }

.quote-page .quote { padding-top: 0; }

	@media (min-width: 900px) { .quote-page .quote { padding-top: 1rem; } }

.permalink { color: var(--muted); font-size: 0.85rem; margin-left: 1.25rem; }

.more { max-width: 72rem; padding-bottom: 3rem; padding-top: 1rem; }

	.more h2 { color: var(--bright); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.16em; margin: 0 0 1rem; text-transform: uppercase; }

	.more ul { display: grid; gap: 0.25rem 2rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }

	@media (min-width: 900px) { .more ul { grid-template-columns: 1fr 1fr; } }

		.more li a { color: var(--text); display: block; padding: 0.5rem 0; text-decoration: none; }

		.more li a:hover strong, .more li a:hover { color: var(--bright); }

		.more li strong { color: var(--accent); font-weight: 600; }

.notfound { padding-bottom: 5rem; padding-top: 4rem; }

	.notfound h1 { color: var(--bright); font-family: var(--serif); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 400; margin: 0 0 1rem; }

	.notfound li { margin: 0.4rem 0; }

.page-title { color: var(--bright); font-family: var(--serif); font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 400; line-height: 1.15; margin: 0 auto 2rem; max-width: 72rem; text-wrap: balance; }

/* Line the quote page's crumbs, title and list up with the quote band */
.crumbs, .page-title, .more { max-width: calc(72rem + 2.5rem); padding-left: 1.25rem; padding-right: 1.25rem; }