:root {
	--ink: #111110;
	--paper: #f2ecdd;
	--white: #fffdf7;
	--acid: #c8f04a;
	--rust: #b84a32;
	--cobalt: #4256a6;
	--muted: #6f6b61;
	--line: 3px solid var(--ink)
}

* {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: Inter, Arial, sans-serif
}

.skip-link {
	position: fixed;
	left: 1rem;
	top: -5rem;
	z-index: 100;
	background: var(--acid);
	color: var(--ink);
	padding: .8rem 1rem;
	font-weight: 700
}

.skip-link:focus {
	top: 1rem
}

.utility-bar {
	height: 48px;
	background: var(--ink);
	color: var(--paper);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 2.5vw;
	font: 700 11px/1 Space Mono, monospace;
	text-transform: uppercase;
	letter-spacing: .12em
}

.utility-bar span {
	background: var(--acid);
	color: var(--ink);
	padding: .55rem .8rem
}

.utility-bar p {
	margin: 0
}

.masthead {
	height: 118px;
	border-bottom: var(--line);
	background: var(--paper);
	display: grid;
	grid-template-columns: minmax(300px, 1.2fr) 1.5fr 230px;
	align-items: stretch
}

.wordmark {
	display: flex;
	align-items: center;
	padding: 0 2.5vw;
	color: var(--ink);
	text-decoration: none;
	font: 400 clamp(3rem, 5.2vw, 5.6rem)/.8 League Gothic, Impact, sans-serif;
	text-transform: uppercase
}

.nav-links {
	display: flex;
	align-items: center;
	justify-content: space-around
}

.nav-links a {
	position: relative;
	color: var(--ink);
	text-decoration: none;
	font: 400 1.55rem/1 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	padding: .6rem
}

.nav-links a:after {
	content: "";
	position: absolute;
	left: .6rem;
	right: .6rem;
	bottom: 0;
	height: 3px;
	background: var(--acid);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease
}

.nav-links a:hover:after,
.nav-links a:focus-visible:after {
	transform: scaleX(1)
}

.print-swatch {
	background-color: var(--rust);
	background-image: radial-gradient(ellipse at 20% 30%, var(--ink) 0 8%, transparent 9%), radial-gradient(ellipse at 65% 70%, var(--ink) 0 10%, transparent 11%), radial-gradient(ellipse at 90% 20%, var(--ink) 0 7%, transparent 8%);
	background-size: 70px 52px;
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%)
}

.menu-button {
	display: none
}

.hero {
	min-height: calc(90vh - 166px);
	display: grid;
	grid-template-columns: 1.03fr 1fr
}

.section-dark {
	background: var(--ink);
	color: var(--paper)
}

.hero-copy {
	padding: clamp(3rem, 5vw, 6rem) 3.4vw 3rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start
}

.eyebrow,
.kicker,
.micro-label {
	font: 700 .72rem/1.3 Space Mono, monospace;
	text-transform: uppercase;
	letter-spacing: .13em
}

.hero h1 {
	font: 400 clamp(5.5rem, 9.8vw, 10.5rem)/.79 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin: 1.5rem 0 1.2rem;
	max-width: 790px
}

.hero-intro {
	font-size: clamp(1rem, 1.4vw, 1.35rem);
	line-height: 1.55;
	max-width: 560px;
	border-top: 3px solid var(--acid);
	padding-top: 1rem
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	border: 3px solid currentColor;
	padding: 1rem 1.5rem;
	color: var(--ink);
	font: 400 1.45rem/1 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease
}

.button-acid {
	background: var(--acid);
	border-color: var(--acid);
	box-shadow: 8px 8px 0 rgba(0, 0, 0, .28)
}

.button:hover,
.button:focus-visible {
	transform: translateY(-3px);
	box-shadow: 10px 12px 0 rgba(0, 0, 0, .35)
}

.hero-copy .button {
	margin-top: 1.3rem
}

.hero-data {
	background: var(--paper);
	padding: 2.2vw;
	display: flex;
	flex-direction: column;
	gap: 1.25rem
}

.chart-card {
	border: var(--line);
	padding: 1.5rem;
	min-height: 360px;
	clip-path: polygon(0 0, 94% 0, 100% 10%, 100% 100%, 0 100%)
}

.chart-card-dark {
	background: var(--ink);
	color: var(--paper)
}

.card-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.5rem
}

.card-heading>span:first-child {
	background: var(--acid);
	color: var(--ink);
	padding: .55rem .8rem;
	font: 700 .8rem Space Mono, monospace;
	text-transform: uppercase
}

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

.bar-row {
	display: grid;
	grid-template-columns: 115px 1fr 55px;
	gap: .8rem;
	align-items: center;
	font: 700 .77rem Space Mono, monospace
}

.bar-track {
	height: 24px;
	background: #2a2a28
}

.bar-fill {
	display: block;
	height: 100%;
	background: var(--acid);
	transform-origin: left;
	animation: grow .6s ease-out both
}

.hero-stats {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.25rem;
	flex: 1
}

.stat-card {
	border: var(--line);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 190px
}

.stat-card strong {
	font: 400 clamp(5rem, 8vw, 9rem)/.75 League Gothic, Impact, sans-serif
}

.stat-card span {
	border-top: 3px solid currentColor;
	padding-top: .7rem;
	margin-top: 1rem;
	font: 700 .72rem Space Mono, monospace;
	text-transform: uppercase
}

.stat-rust {
	background: var(--rust);
	color: var(--white)
}

.section-paper {
	background: var(--paper);
	color: var(--ink)
}

.results-section,
.compare-section,
.survey-section,
.about-section {
	padding: clamp(4rem, 7vw, 7.5rem) max(4vw, calc((100vw - 1500px)/2))
}

.section-heading {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 3rem;
	align-items: end;
	border-bottom: var(--line);
	padding-bottom: 1.5rem
}

.section-heading h2,
.survey-intro h2,
.about-section h2 {
	font: 400 clamp(4.5rem, 8vw, 8rem)/.85 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin: .4rem 0 0
}

.section-heading>p {
	font-size: 1rem;
	line-height: 1.65;
	max-width: 620px
}

.toolbar {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	align-items: end;
	margin: 2rem 0
}

.year-tabs {
	display: flex;
	border: var(--line)
}

.year-tabs button {
	background: transparent;
	border: 0;
	border-right: var(--line);
	padding: .85rem 1.5rem;
	font: 700 .85rem Space Mono, monospace;
	cursor: pointer
}

.year-tabs button:last-child {
	border-right: 0
}

.year-tabs button[aria-selected=true] {
	background: var(--ink);
	color: var(--acid)
}

.search-label {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

.search-label input,
.compare-picker select,
.form-field input,
.form-field textarea {
	border: var(--line);
	background: var(--white);
	color: var(--ink);
	padding: .9rem 1rem;
	font: inherit;
	border-radius: 0
}

.search-label input {
	width: min(380px, 45vw)
}

.results-summary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: var(--line);
	margin-bottom: 1.5rem
}

.results-summary article {
	padding: 1.2rem 1.4rem;
	border-right: var(--line)
}

.results-summary article:last-child {
	border-right: 0
}

.results-summary span {
	display: block;
	font: 700 .68rem Space Mono, monospace;
	text-transform: uppercase
}

.results-summary strong {
	display: block;
	font: 400 2.6rem League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin-top: .3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.table-wrap {
	overflow-x: auto;
	border: var(--line);
	background: var(--white)
}

table {
	border-collapse: collapse;
	width: 100%;
	min-width: 690px
}

th,
td {
	padding: 1rem 1.2rem;
	text-align: left;
	border-bottom: 1px solid #aaa397
}

th {
	background: var(--ink);
	color: var(--paper);
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

td:first-child,
td:nth-child(3),
td:nth-child(4) {
	font-family: Space Mono, monospace
}

.table-bar {
	height: 8px;
	background: #d8d2c5;
	margin-top: .4rem;
	max-width: 290px
}

.table-bar span {
	display: block;
	height: 100%;
	background: var(--rust)
}

.detail-button {
	border: 2px solid var(--ink);
	background: transparent;
	font: 700 .68rem Space Mono, monospace;
	text-transform: uppercase;
	padding: .5rem .7rem;
	cursor: pointer
}

.button-outline {
	margin-top: 1.5rem;
	background: transparent
}

.section-acid {
	background: var(--acid);
	color: var(--ink)
}

.section-heading.compact h2 {
	font-size: clamp(4rem, 7vw, 7rem)
}

.compare-picker {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 2rem 0;
	font: 700 .75rem Space Mono, monospace;
	text-transform: uppercase
}

.compare-picker select {
	min-width: 260px
}

.comparison-chart {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: var(--line);
	background: var(--paper)
}

.comparison-year {
	padding: 1.8rem;
	border-right: var(--line)
}

.comparison-year:last-child {
	border-right: 0
}

.comparison-year .year {
	font: 400 4.5rem League Gothic, Impact, sans-serif
}

.comparison-year .value {
	font: 700 1.35rem Space Mono, monospace
}

.comparison-meter {
	height: 160px;
	border: 2px solid var(--ink);
	display: flex;
	align-items: flex-end;
	margin: 1.2rem 0;
	background: linear-gradient(to top, rgba(17, 17, 16, .1) 1px, transparent 1px);
	background-size: 100% 25%
}

.comparison-meter span {
	display: block;
	width: 100%;
	background: var(--rust);
	min-height: 2px;
	transition: height .3s ease
}

.survey-section {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(3rem, 7vw, 8rem)
}

.acid-text {
	color: var(--acid)
}

.survey-intro h2 {
	font-size: clamp(5rem, 9vw, 9rem)
}

.survey-intro>p:not(.kicker) {
	font-size: 1.1rem;
	line-height: 1.7;
	max-width: 470px
}

.status-badge {
	display: inline-block;
	border: 2px solid var(--acid);
	color: var(--acid);
	padding: .7rem;
	margin-top: 1rem;
	font: 700 .68rem Space Mono, monospace;
	text-transform: uppercase
}

.survey-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem
}

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

.form-field label,
fieldset legend {
	font: 700 .78rem Space Mono, monospace;
	text-transform: uppercase
}

.form-field label span,
fieldset legend span {
	color: var(--acid)
}

.form-field small {
	color: #aaa59b
}

.form-field input,
.form-field textarea {
	background: #272725;
	border-color: #68675f;
	color: var(--paper)
}

fieldset {
	border: 2px solid #68675f;
	padding: 1rem;
	display: flex;
	gap: 2rem
}

fieldset legend {
	padding: 0 .5rem
}

.consent {
	display: flex;
	gap: .7rem;
	line-height: 1.5
}

.survey-form .button {
	align-self: flex-start
}

.honeypot {
	position: absolute;
	left: -9999px
}

.form-message {
	min-height: 1.4rem;
	font: 700 .75rem Space Mono, monospace;
	color: var(--acid)
}

.about-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem
}

.about-copy {
	font-size: 1.1rem;
	line-height: 1.8
}

footer {
	background: var(--rust);
	color: var(--white);
	padding: 1.7rem 4vw;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

footer a {
	color: inherit
}

dialog {
	width: min(760px, calc(100vw - 2rem));
	max-height: 80vh;
	border: var(--line);
	border-radius: 0;
	background: var(--paper);
	padding: 2rem;
	box-shadow: 14px 14px 0 var(--rust)
}

dialog::backdrop {
	background: rgba(17, 17, 16, .78)
}

dialog h2 {
	font: 400 4rem League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin: .5rem 0
}

.dialog-close {
	position: absolute;
	right: 1rem;
	top: 1rem;
	border: 2px solid var(--ink);
	background: transparent;
	font-size: 1.5rem;
	cursor: pointer
}

#dialog-detail {
	white-space: pre-wrap;
	line-height: 1.65;
	max-height: 42vh;
	overflow: auto
}

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

@keyframes grow {
	from {
		transform: scaleX(0)
	}
}

:focus-visible {
	outline: 4px solid var(--cobalt);
	outline-offset: 3px
}

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

	*,
	*:before,
	*:after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important
	}
}

@media(max-width:980px) {

	.utility-bar p:last-child,
	.print-swatch {
		display: none
	}

	.masthead {
		grid-template-columns: 1fr auto;
		height: auto;
		min-height: 92px
	}

	.wordmark {
		font-size: 3.5rem
	}

	.menu-button {
		display: block;
		margin: 1.2rem;
		border: 2px solid var(--ink);
		background: var(--acid);
		font: 700 .75rem Space Mono, monospace;
		text-transform: uppercase
	}

	.nav-links {
		display: none;
		grid-column: 1/-1;
		border-top: var(--line);
		flex-direction: column;
		align-items: stretch
	}

	.nav-links.open {
		display: flex
	}

	.nav-links a {
		padding: 1rem 2rem;
		border-bottom: 1px solid #aaa397
	}

	.hero {
		grid-template-columns: 1fr
	}

	.hero-copy {
		min-height: 680px
	}

	.hero-data {
		padding: 2rem
	}

	.survey-section,
	.about-section {
		grid-template-columns: 1fr
	}

	.survey-intro h2 {
		font-size: 7rem
	}
}

@media(max-width:650px) {
	.utility-bar {
		height: 42px
	}

	.utility-bar p {
		display: none
	}

	.wordmark {
		font-size: 2.8rem
	}

	.hero-copy {
		min-height: 620px;
		padding: 3rem 1.25rem
	}

	.hero h1 {
		font-size: 5.8rem
	}

	.hero-data,
	.results-section,
	.compare-section,
	.survey-section,
	.about-section {
		padding: 3.5rem 1.25rem
	}

	.chart-card {
		min-height: 330px;
		padding: 1rem
	}

	.bar-row {
		grid-template-columns: 82px 1fr 48px;
		font-size: .63rem
	}

	.hero-stats,
	.results-summary,
	.comparison-chart {
		grid-template-columns: 1fr
	}

	.results-summary article,
	.comparison-year {
		border-right: 0;
		border-bottom: var(--line)
	}

	.results-summary article:last-child,
	.comparison-year:last-child {
		border-bottom: 0
	}

	.section-heading {
		grid-template-columns: 1fr;
		gap: .5rem
	}

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

	.search-label input {
		width: 100%
	}

	.year-tabs button {
		flex: 1
	}

	.about-section h2 {
		font-size: 4.8rem
	}

	footer {
		flex-direction: column
	}

	.stat-card strong {
		font-size: 6rem
	}
}

/* Species detail visualisation */
dialog#species-dialog {
	width: min(980px, calc(100vw - 2rem));
	max-height: 90vh
}

#dialog-detail {
	white-space: normal;
	max-height: none;
	overflow: visible
}

.detail-summary {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 2rem;
	align-items: center;
	margin: 1.5rem 0 2rem;
	padding: 1.5rem;
	background: var(--ink);
	color: var(--paper);
	border: 3px solid var(--ink)
}

.donut {
	width: 230px;
	aspect-ratio: 1;
	border-radius: 50%;
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 2px var(--paper)
}

.donut>div {
	width: 55%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--ink);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center
}

.donut strong {
	font: 400 3.1rem/1 League Gothic, Impact, sans-serif
}

.donut span {
	font: 700 .58rem Space Mono, monospace;
	text-transform: uppercase
}

.donut-block {
	text-align: center
}

.donut-block>p {
	margin: .8rem 0 0;
	font: 700 .58rem/1.5 Space Mono, monospace;
	text-transform: uppercase;
	color: #cfc8ba
}

.donut-legend {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .65rem
}

.donut-legend {
	max-height: 300px;
	overflow: auto;
	padding-right: .6rem;
	scrollbar-color: var(--acid) #292927
}

.donut-legend li {
	display: grid;
	grid-template-columns: 14px 1fr auto;
	gap: .65rem;
	align-items: center;
	font-size: .8rem
}

.donut-legend strong {
	font: 700 .68rem Space Mono, monospace;
	white-space: nowrap
}

.legend-swatch {
	width: 14px;
	height: 14px;
	border: 1px solid var(--paper)
}

.legend-swatch.single-entry {
	background: var(--acid)
}

.single-entry-legend {
	position: sticky;
	bottom: 0;
	background: var(--ink);
	padding: .55rem 0;
	border-top: 1px solid #68675f
}

.single-entry-legend small {
	color: #aaa59b
}

.detail-chart-heading {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	align-items: end;
	border-bottom: 3px solid var(--ink);
	padding-bottom: 1rem
}

.detail-chart-heading h3 {
	font: 400 2.7rem/1 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin: .25rem 0 0
}

.detail-chart-heading label {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font: 700 .63rem Space Mono, monospace;
	text-transform: uppercase
}

.detail-chart-heading input {
	border: 2px solid var(--ink);
	padding: .65rem .8rem;
	background: var(--white);
	font: inherit;
	text-transform: none;
	min-width: 240px
}

.subspecies-bars {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .85rem
}

.subspecies-row[hidden] {
	display: none
}

.subspecies-label {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	font-size: .82rem
}

.subspecies-label>span {
	font-weight: 700
}

.subspecies-label strong {
	font: 700 .65rem Space Mono, monospace;
	white-space: nowrap
}

.subspecies-track {
	height: 13px;
	background: #d3ccbd;
	border: 1px solid var(--ink);
	margin-top: .3rem
}

.subspecies-track span {
	display: block;
	height: 100%;
	min-width: 2px;
	background: var(--rust);
	animation: grow .45s ease-out both;
	transform-origin: left
}

.detail-show-all {
	font-size: 1.1rem;
	padding: .75rem 1rem;
	margin-bottom: .5rem
}

.empty-detail {
	border: 2px solid var(--ink);
	padding: 1rem;
	background: var(--white)
}

@media(max-width:650px) {
	dialog#species-dialog {
		padding: 1.25rem;
		box-shadow: 7px 7px 0 var(--rust)
	}

	dialog h2 {
		font-size: 3.2rem;
		padding-right: 2rem
	}

	.detail-summary {
		grid-template-columns: 1fr
	}

	.donut {
		width: min(230px, 75vw);
		margin: auto
	}

	.detail-chart-heading {
		align-items: stretch;
		flex-direction: column
	}

	.detail-chart-heading input {
		min-width: 0;
		width: 100%
	}

	.subspecies-label {
		align-items: flex-start
	}

	.subspecies-label>span {
		max-width: 65%
	}
}

/* Header and full census questionnaire */
.hero {
	min-height: calc(100vh - 118px)
}

.survey-faq {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	margin-top: 2rem
}

.survey-faq details {
	border: 2px solid #68675f;
	background: #1d1d1b
}

.survey-faq summary {
	cursor: pointer;
	padding: .9rem 1rem;
	color: var(--acid);
	font: 700 .68rem Space Mono, monospace;
	text-transform: uppercase
}

.survey-faq details p {
	margin: 0;
	padding: 0 1rem 1rem;
	font-size: .85rem;
	line-height: 1.6;
	color: #d6d0c3
}

.survey-question {
	position: relative;
	border: 2px solid #68675f;
	background: #1d1d1b;
	padding: 1.5rem 1.5rem 1.5rem 5rem;
	display: flex;
	flex-direction: column;
	gap: 1.35rem
}

.question-number {
	position: absolute;
	left: 1.25rem;
	top: 1.25rem;
	color: var(--acid);
	font: 400 2.3rem/1 League Gothic, Impact, sans-serif
}

.survey-question fieldset {
	margin: 0;
	border: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .8rem
}

.survey-question fieldset legend {
	padding: 0;
	margin-bottom: .55rem;
	font-size: .8rem
}

.survey-question fieldset>small {
	color: #aaa59b;
	line-height: 1.55;
	margin-bottom: .4rem
}

.survey-question fieldset label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	line-height: 1.4
}

.survey-question fieldset label small {
	color: #aaa59b
}

.survey-question input[type=radio],
.survey-question input[type=checkbox] {
	flex: 0 0 auto;
	margin-top: .2rem;
	accent-color: var(--acid)
}

.form-field select {
	border: 3px solid #68675f;
	background: #272725;
	color: var(--paper);
	padding: .9rem 1rem;
	font: inherit;
	border-radius: 0;
	width: 100%
}

.conditional-field {
	border-left: 4px solid var(--acid);
	padding-left: 1rem
}

.conditional-field[hidden] {
	display: none
}

@media(max-width:650px) {
	.hero {
		min-height: calc(100vh - 92px)
	}

	.survey-question {
		padding: 4.5rem 1rem 1rem
	}

	.question-number {
		left: 1rem
	}

	.survey-faq {
		margin-bottom: 1rem
	}
}

/* Replaceable header artwork and Google Forms */
img.print-swatch {
	display: block;
	width: 100%;
	height: 118px;
	object-fit: cover;
	object-position: center;
	border: 0;
	background: none;
	clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%)
}

.google-form-wrap {
	min-width: 0;
	border: 2px solid #68675f;
	background: #fff
}

.google-form-wrap iframe {
	display: block;
	width: 100%;
	height: 1050px;
	border: 0
}

.google-form-wrap iframe[hidden] {
	display: none
}

.google-form-empty {
	margin: 0;
	padding: clamp(2rem, 5vw, 5rem);
	min-height: 320px;
	display: flex;
	align-items: center;
	font: 700 clamp(1rem, 2vw, 1.35rem)/1.6 Space Mono, monospace;
	text-transform: uppercase;
	color: var(--ink);
	background: var(--paper)
}

.google-form-empty[hidden] {
	display: none !important
}

.survey-section:has(.google-form-wrap:not([hidden])) {
	align-items: start
}

@media(max-width:980px) {
	img.print-swatch {
		display: none
	}

	.google-form-wrap iframe {
		height: 1150px
	}
}

/* Static admin helper */
.admin-page {
	background: var(--paper)
}

.admin-header {
	min-height: 110px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1rem 4vw;
	background: var(--paper);
	border-bottom: var(--line)
}

.admin-header .wordmark {
	padding: 0;
	font-size: 4.2rem
}

.admin-main {
	width: min(1120px, 92vw);
	margin: 0 auto;
	padding: 4rem 0 7rem;
	display: flex;
	flex-direction: column;
	gap: 2rem
}

.admin-title {
	max-width: 780px
}

.admin-title h1 {
	font: 400 clamp(6rem, 13vw, 11rem)/.8 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin: .6rem 0 1.5rem
}

.admin-title>p:last-child {
	font-size: 1.1rem;
	line-height: 1.7
}

.admin-panel {
	position: relative;
	border: var(--line);
	background: var(--white);
	padding: 2rem 2rem 2rem 6rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	box-shadow: 10px 10px 0 var(--rust)
}

.admin-panel h2 {
	font: 400 4rem/1 League Gothic, Impact, sans-serif;
	text-transform: uppercase;
	margin: .3rem 0
}

.admin-panel>label,
.admin-optional label {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

.admin-panel input,
.admin-panel textarea {
	border: 2px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	padding: .85rem 1rem;
	font: 400 .9rem Inter, sans-serif;
	text-transform: none
}

.admin-panel textarea {
	resize: vertical
}

.admin-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem
}

.admin-grid label {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

.admin-optional {
	border: 2px solid var(--ink);
	padding: 1rem
}

.admin-optional summary {
	cursor: pointer;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

.admin-optional[open] {
	display: flex;
	flex-direction: column;
	gap: 1rem
}

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

.admin-message {
	min-height: 1.5rem;
	font: 700 .7rem Space Mono, monospace;
	color: #7b291c
}

.admin-form-preview {
	border: 3px solid var(--ink)
}

.admin-form-preview iframe {
	display: block;
	width: 100%;
	height: 720px;
	border: 0
}

.admin-next {
	border-left: 6px solid var(--acid);
	background: var(--ink);
	color: var(--paper);
	padding: 1rem 1.25rem;
	line-height: 1.7
}

.admin-next strong {
	color: var(--acid);
	text-transform: uppercase
}

.admin-image-panel img {
	display: block;
	width: 100%;
	max-height: 300px;
	object-fit: cover;
	border: 3px solid var(--ink)
}

.admin-panel code {
	font-family: Space Mono, monospace;
	background: #dfd7c8;
	padding: .1rem .3rem
}

@media(max-width:650px) {
	.admin-header {
		align-items: flex-start;
		flex-direction: column
	}

	.admin-header .wordmark {
		font-size: 3.2rem
	}

	.admin-main {
		padding-top: 2.5rem
	}

	.admin-panel {
		padding: 5rem 1rem 1.5rem
	}

	.admin-grid {
		grid-template-columns: 1fr
	}

	.admin-panel h2 {
		font-size: 3.2rem
	}

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

/* Authenticated admin controls */
.admin-login-form {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	gap: 1rem;
	align-items: end
}

.admin-login-form label {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

.admin-controls {
	display: flex;
	flex-direction: column;
	gap: 2rem
}

.admin-controls[hidden],
.admin-login-panel[hidden] {
	display: none
}

.admin-session {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border: 3px solid var(--ink);
	background: var(--acid);
	padding: 1rem 1.25rem;
	font: 700 .7rem Space Mono, monospace;
	text-transform: uppercase
}

.admin-session .button {
	margin: 0;
	padding: .65rem 1rem;
	font-size: 1rem
}

.admin-current-image {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	border: 3px solid var(--ink)
}

.admin-message.error {
	color: #b42318
}

.published-years {
	display: flex;
	flex-wrap: wrap;
	gap: .65rem;
	align-items: center;
	border-top: 2px solid var(--ink);
	padding-top: 1rem
}

.published-years .kicker {
	flex-basis: 100%;
	margin: 0
}

.published-years span {
	background: var(--ink);
	color: var(--acid);
	padding: .5rem .7rem;
	font: 700 .7rem Space Mono, monospace
}

@media(max-width:760px) {
	.admin-login-form {
		grid-template-columns: 1fr
	}

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

/* Clearer compare-years chart: horizontal bars on one shared relative scale. */
.comparison-value {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.25rem 0 .7rem
}

.comparison-value strong {
	font: 700 1.5rem Space Mono, monospace
}

.comparison-value span {
	font: 700 .68rem Space Mono, monospace;
	text-transform: uppercase;
	color: var(--muted)
}

.comparison-meter {
	height: 32px;
	display: block;
	margin: 0;
	border: 2px solid var(--ink);
	background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgba(17, 17, 16, .16) calc(25% - 1px), rgba(17, 17, 16, .16) 25%)
}

.comparison-meter span {
	display: block;
	height: 100%;
	min-height: 0;
	min-width: 0;
	background: var(--rust);
	transition: width .3s ease;
	transform-origin: left;
	animation: grow .45s ease-out both
}

@media(max-width:650px) {
	.comparison-value {
		align-items: flex-start;
		flex-direction: column;
		gap: .25rem
	}

	.comparison-meter {
		margin-bottom: .25rem
	}
}

/* One connected trend is easier to compare than three separate meters. */
.comparison-chart {
	display: block;
	background: var(--paper);
	padding: clamp(1rem, 3vw, 2rem)
}

.comparison-plot {
	width: 100%;
	overflow: hidden
}

.comparison-plot svg {
	display: block;
	width: 100%;
	height: auto;
	min-height: 260px;
	overflow: visible
}

.comparison-grid line {
	stroke: rgba(17, 17, 16, .18);
	stroke-width: 1;
	stroke-dasharray: 5 6;
	vector-effect: non-scaling-stroke
}

.comparison-line {
	fill: none;
	stroke: var(--rust);
	stroke-width: 8;
	stroke-linecap: square;
	stroke-linejoin: miter;
	vector-effect: non-scaling-stroke
}

.comparison-point circle {
	fill: var(--acid);
	stroke: var(--ink);
	stroke-width: 4;
	vector-effect: non-scaling-stroke
}

.comparison-point text {
	fill: var(--ink);
	font-family: Space Mono, monospace;
	font-weight: 700
}

.point-percent {
	font-size: 17px
}

.point-year {
	font: 400 34px League Gothic, Impact, sans-serif
}

.comparison-counts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 3px solid var(--ink)
}

.comparison-counts div {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .65rem;
	padding: 1rem;
	border-right: 2px solid var(--ink)
}

.comparison-counts div:last-child {
	border-right: 0
}

.comparison-counts strong {
	font: 700 1.15rem Space Mono, monospace
}

.comparison-counts span {
	font: 700 .62rem Space Mono, monospace;
	text-transform: uppercase;
	color: var(--muted)
}

@media(max-width:650px) {
	.comparison-chart {
		padding: .75rem
	}

	.comparison-plot svg {
		min-height: 220px
	}

	.comparison-counts div {
		align-items: center;
		flex-direction: column;
		gap: .2rem;
		text-align: center;
		padding: .7rem .25rem
	}

	.comparison-counts span {
		font-size: .52rem
	}
}

/* Site orange */
:root {
	--rust: #CF4A22
}

/* Slightly more compact display type */
.wordmark {
	font-size: clamp(2.6rem, 4.4vw, 4.7rem)
}

.hero h1 {
	font-size: clamp(4.5rem, 8vw, 8.5rem)
}

.section-heading h2,
.survey-intro h2,
.about-section h2 {
	font-size: clamp(3.8rem, 6.5vw, 6.5rem)
}

.section-heading.compact h2 {
	font-size: clamp(3.5rem, 5.8vw, 5.8rem)
}

.stat-card strong {
	font-size: clamp(4.5rem, 6.5vw, 7rem)
}

.comparison-year .year {
	font-size: 3.7rem
}

dialog h2 {
	font-size: 3.4rem
}

@media(max-width:650px) {
	.wordmark {
		font-size: 2.45rem
	}

	.hero h1 {
		font-size: 4.7rem
	}

	.section-heading h2,
	.survey-intro h2,
	.about-section h2 {
		font-size: 4.1rem
	}

	.stat-card strong {
		font-size: 5rem
	}
}