@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-next-400.1a8970be14e8.ttf") format("truetype");
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-next-600.09fdf71f5069.ttf") format("truetype");
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/atkinson-hyperlegible-next-700.1d43aabc8a66.ttf") format("truetype");
}

@font-face {
	font-family: "Saira Semi Condensed";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/saira-semi-condensed-600.3800eb33dc25.ttf") format("truetype");
}

@font-face {
	font-family: "Saira Semi Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/saira-semi-condensed-700.73c62a804eb5.ttf") format("truetype");
}

:root,
.theme-system,
.theme-light {
	color-scheme: light;
	--background: #f7f7f5;
	--surface: #fefefb;
	--surface-raised: #eeeeea;
	--text: #0e0e0e;
	--muted: #454545;
	--link: #173f5c;
	--accent: #d4af37;
	--accent-strong: #916f08;
	--accent-ink: #0e0e0e;
	--border: #a6a6a0;
	--border-strong: #0e0e0e;
	--focus: #1f5f8f;
	--success: #1c5a3b;
	--warning: #704b00;
	--danger: #8a2121;
	--fold-mountain: #a6a6a0;
	--fold-valley: #7ca5c7;
	--crease-ink: #2f5470;
	--scrim: rgb(14 14 14 / 0.74);
	--shadow-color: rgb(14 14 14 / 0.18);
	--paper-material: url("../img/miura-paper.4885a5a22a66.png");
	--gold-material: url("../img/miura-gold.350e3b7c82c8.png");
}

.theme-dark {
	color-scheme: dark;
	--background: #111313;
	--surface: #191b1b;
	--surface-raised: #222524;
	--text: #f7f7f5;
	--muted: #ccd0ce;
	--link: #b6dcf5;
	--accent: #d4af37;
	--accent-strong: #e8c650;
	--accent-ink: #0e0e0e;
	--border: #8d9290;
	--border-strong: #f0f0eb;
	--focus: #8ac6ed;
	--success: #8dd8ac;
	--warning: #f0ce76;
	--danger: #ffaaaa;
	--fold-mountain: #9da3a0;
	--fold-valley: #80b4d7;
	--crease-ink: #a9cbe4;
	--scrim: rgb(0 0 0 / 0.78);
	--shadow-color: rgb(0 0 0 / 0.52);
}

@media (prefers-color-scheme: dark) {
	.theme-system {
		color-scheme: dark;
		--background: #111313;
		--surface: #191b1b;
		--surface-raised: #222524;
		--text: #f7f7f5;
		--muted: #ccd0ce;
		--link: #b6dcf5;
		--accent: #d4af37;
		--accent-strong: #e8c650;
		--accent-ink: #0e0e0e;
		--border: #8d9290;
		--border-strong: #f0f0eb;
		--focus: #8ac6ed;
		--success: #8dd8ac;
		--warning: #f0ce76;
		--danger: #ffaaaa;
		--fold-mountain: #9da3a0;
		--fold-valley: #80b4d7;
		--crease-ink: #a9cbe4;
		--scrim: rgb(0 0 0 / 0.78);
		--shadow-color: rgb(0 0 0 / 0.52);
	}
}

* {
	box-sizing: border-box;
}

html {
	scrollbar-color: var(--accent-strong) var(--background);
	scrollbar-width: auto;
}

body {
	min-height: 100vh;
	margin: 0;
	background-color: var(--background);
	background-image:
		linear-gradient(126deg, transparent 0 31.9%, color-mix(in srgb, var(--fold-mountain), transparent 88%) 32% 32.12%, transparent 32.2%),
		linear-gradient(54deg, transparent 0 61.9%, color-mix(in srgb, var(--fold-valley), transparent 88%) 62% 62.12%, transparent 62.2%),
		linear-gradient(162deg, transparent 0 78%, color-mix(in srgb, var(--surface-raised), transparent 45%) 78.2% 100%);
	background-attachment: fixed;
	background-size: 44rem 28rem, 52rem 34rem, 64rem 40rem;
	color: var(--text);
	font-family: "Atkinson Hyperlegible Next", Verdana, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.5;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--accent);
	color: var(--accent-ink);
}

* {
	caret-color: var(--focus);
}

::-webkit-scrollbar {
	width: 0.9rem;
	height: 0.9rem;
}

::-webkit-scrollbar-track {
	background: var(--background);
}

::-webkit-scrollbar-thumb {
	border: 0.2rem solid var(--background);
	background: var(--accent-strong);
}

.site-header,
main {
	width: min(78rem, calc(100% - 3rem));
	margin-inline: auto;
}

.site-header {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 2.5rem;
	min-height: 4.75rem;
	border-bottom: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--background), transparent 2%);
}

.brand-lockup {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--text);
	text-decoration: none;
}

.fold-mark {
	position: relative;
	display: block;
	width: 2.8rem;
	height: 2.8rem;
	flex: 0 0 auto;
	border: 0.0625rem solid var(--border-strong);
	background:
		linear-gradient(145deg, transparent 0 49%, var(--border-strong) 49.5% 51%, transparent 51.5%),
		linear-gradient(35deg, transparent 0 49%, var(--surface) 49.5%),
		var(--gold-material) center / cover;
	transform: skewX(-9deg);
}

.fold-mark::before,
.fold-mark::after,
.fold-mark span {
	position: absolute;
	content: "";
	background: var(--border-strong);
}

.fold-mark::before {
	inset: 50% 0 auto;
	height: 0.0625rem;
}

.fold-mark::after {
	inset: 0 auto 0 50%;
	width: 0.0625rem;
}

.fold-mark span {
	inset: 0.45rem;
	border: 0.0625rem solid var(--fold-valley);
	background: transparent;
	transform: rotate(45deg);
}

.brand-copy {
	display: grid;
	gap: 0.05rem;
}

.brand-name,
h1,
h2,
h3,
.nav-fold summary,
.site-nav a,
button,
.button-link {
	font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif;
}

.brand-name {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.site-tagline {
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.header-tools {
	min-width: 0;
}

.nav-sheet {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 0.6rem;
}

.nav-fold summary {
	display: none;
	min-height: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 0.0625rem solid var(--border-strong);
	background: var(--accent) var(--gold-material) center / cover;
	color: var(--accent-ink);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.site-nav {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	justify-content: flex-end;
	border-block: 0.0625rem solid var(--border);
	background: color-mix(in srgb, var(--surface), transparent 8%);
}

.site-nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.65rem;
	padding: 0.45rem 0.5rem;
	border-right: 0.0625rem solid var(--border);
	color: var(--text);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.site-nav a:last-child {
	border-right: 0;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
	background: var(--accent) var(--gold-material) center / cover;
	color: var(--accent-ink);
}

.site-nav a[aria-current="page"] {
	box-shadow: inset 0 -0.16rem 0 var(--accent-ink);
	font-weight: 700;
}

.account-actions {
	display: flex;
	gap: 0.4rem;
}

.account-actions form {
	margin: 0;
}

main {
	padding-block: clamp(1rem, 2.5vw, 2.25rem) 5rem;
}

a {
	color: var(--link);
	font-weight: 700;
	text-decoration-thickness: 0.12em;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-thickness: 0.18em;
}

h1,
h2,
h3 {
	margin-block: 0;
	font-weight: 600;
	line-height: 1.06;
}

h1 {
	max-width: 22ch;
	font-size: clamp(2.4rem, 5vw, 4.5rem);
	letter-spacing: 0.035em;
	text-transform: uppercase;
}

h2 {
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	letter-spacing: 0.005em;
}

h3 {
	font-size: 1.15rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

p,
ul,
ol,
dl {
	max-width: 72ch;
}

button,
input,
select,
textarea {
	max-width: 100%;
	font: inherit;
}

input,
select,
textarea {
	min-height: 3rem;
	border: 0.0625rem solid var(--border-strong);
	border-radius: 0;
	background: var(--surface);
	color: var(--text);
	padding: 0.55rem 0.75rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--muted);
	opacity: 1;
}

input[type="file"] {
	width: 100%;
	min-width: 0;
	overflow: hidden;
}

input[type="checkbox"],
input[type="radio"] {
	width: 2.75rem;
	min-width: 2.75rem;
	height: 2.75rem;
	min-height: 2.75rem;
	accent-color: var(--accent-strong);
}

label {
	font-weight: 700;
}

button,
.button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 0.0625rem solid var(--border-strong);
	border-radius: 0;
	clip-path: polygon(0.65rem 0, 100% 0, calc(100% - 0.65rem) 100%, 0 100%);
	background:
		linear-gradient(135deg, color-mix(in srgb, var(--fold-valley), transparent 92%) 0 48%, transparent 48.5%),
		var(--surface);
	color: var(--text);
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.1;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	text-decoration: none;
	transition:
		background-color 140ms cubic-bezier(0.22, 1, 0.36, 1),
		color 140ms cubic-bezier(0.22, 1, 0.36, 1),
		transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
}

button:hover,
.button-link:hover {
	background: var(--accent);
	color: var(--accent-ink);
}

button:active,
.button-link:active {
	transform: translateY(0.125rem);
}

button:disabled,
button[aria-busy="true"] {
	border-color: var(--muted);
	background: var(--background);
	color: var(--muted);
	cursor: wait;
}

.button-link {
	background: var(--accent) var(--gold-material) center / cover;
	color: var(--accent-ink);
}

:focus-visible {
	outline: 0.25rem solid var(--focus);
	outline-offset: 0.2rem;
}

.skip-link {
	position: fixed;
	left: 1rem;
	top: 1rem;
	z-index: 20;
	transform: translateY(-200%);
	padding: 0.65rem 1rem;
	border: 0.0625rem solid var(--border-strong);
	background: var(--accent);
	color: var(--accent-ink);
}

.skip-link:focus {
	transform: translateY(0);
}

.page-heading,
.form-panel,
.auth-panel,
.message,
.keyboard-help-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	clip-path: polygon(0.65rem 0, calc(100% - 1.5rem) 0, 100% 1.5rem, calc(100% - 0.65rem) 100%, 0 100%, 0 0.65rem);
	background:
		linear-gradient(145deg, transparent 0 71%, color-mix(in srgb, var(--fold-valley), transparent 84%) 71.1% 71.35%, transparent 71.45%),
		var(--surface);
	border: 0.0625rem solid var(--border);
}

.page-heading::before,
.form-panel::before,
.auth-panel::before,
.message::before,
.keyboard-help-panel::before,
.article-card::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--paper-material) center / 32rem;
	content: "";
	opacity: 0.32;
	pointer-events: none;
	mix-blend-mode: soft-light;
}

.page-heading > *,
.form-panel > *,
.auth-panel > *,
.message > *,
.keyboard-help-panel > *,
.article-card > * {
	position: relative;
	z-index: 1;
}

.page-heading::after,
.form-panel::after,
.auth-panel::after,
.message::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.5rem;
	height: 1.5rem;
	border-left: 0.0625rem solid var(--border-strong);
	border-bottom: 0.0625rem solid var(--border-strong);
	background: var(--accent) var(--gold-material) center / cover;
	content: "";
}

.page-heading,
.form-panel,
.auth-panel {
	margin-bottom: 1rem;
	padding: clamp(1rem, 2vw, 1.5rem);
}

.page-heading > * + *,
.form-panel > * + *,
.auth-panel > * + * {
	margin-top: 0.9rem;
}

.page-context {
	margin-block: 0.35rem 0;
	color: var(--muted);
	font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.queue-count {
	margin-block: 0.45rem;
	color: var(--text);
	font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.page-heading form,
.form-panel form,
.auth-panel form {
	margin-top: 1.25rem;
}

.form-panel form p,
.auth-panel form p,
.form-field {
	display: grid;
	gap: 0.35rem;
}

.form-field-primary {
	max-width: 52rem;
}

.form-options {
	max-width: 52rem;
	margin-block: 1rem;
	border-block: 0.0625rem solid var(--border);
}

.form-options summary {
	min-height: 2.75rem;
	padding-block: 0.7rem;
	font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.form-options > .helptext {
	margin: 0 0 1rem;
}

.form-options-fields {
	display: grid;
	gap: 1rem;
	padding-block-end: 1rem;
}

.form-submit-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.helptext,
.form-status {
	color: var(--muted);
	font-size: 1rem;
}

.form-status:not(:empty) {
	display: inline-block;
	margin-inline-start: 0.75rem;
	font-weight: 600;
}

.errorlist {
	padding: 0.75rem 1rem 0.75rem 2rem;
	border: 0.0625rem solid var(--danger);
	color: var(--danger);
	font-weight: 700;
}

.article-grid {
	display: grid;
	gap: 0.55rem;
}

.article-card {
	position: relative;
	display: flex;
	flex-direction: column;
	isolation: isolate;
	padding: clamp(0.9rem, 2vw, 1.25rem);
	overflow: hidden;
	clip-path: polygon(0.55rem 0, calc(100% - 1.65rem) 0, 100% 1.65rem, calc(100% - 0.55rem) 100%, 0 100%, 0 0.55rem);
	border: 0.0625rem solid var(--border);
	background:
		linear-gradient(125deg, transparent 0 66%, color-mix(in srgb, var(--fold-mountain), transparent 86%) 66.05% 66.2%, transparent 66.3%),
		linear-gradient(55deg, transparent 0 78%, color-mix(in srgb, var(--fold-valley), transparent 86%) 78.05% 78.2%, transparent 78.3%),
		var(--surface);
	transition:
		transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
		clip-path 180ms cubic-bezier(0.22, 1, 0.36, 1),
		border-color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.article-card::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.65rem;
	height: 1.65rem;
	border-left: 0.0625rem solid var(--border-strong);
	border-bottom: 0.0625rem solid var(--border-strong);
	background:
		linear-gradient(135deg, transparent 48%, var(--border-strong) 49% 51%, transparent 52%),
		var(--gold-material) center / cover;
	content: "";
}

.article-card h2 {
	max-width: 42ch;
	margin-block: 0.35rem 0.2rem;
}

.article-card h2 a {
	color: var(--link);
	font-weight: 600;
	text-decoration-thickness: 0.08em;
}

.article-card.is-read {
	background-color: var(--surface-raised);
}

.article-card.is-read .state-marker {
	border-left-color: var(--muted);
	color: var(--muted);
}

.article-card.is-selected {
	z-index: 1;
	clip-path: polygon(0.8rem 0, calc(100% - 2rem) 0, 100% 2rem, calc(100% - 0.8rem) 100%, 0 100%, 0 0.8rem);
	border-color: var(--focus);
	box-shadow: inset 0 0 0 0.0625rem var(--focus);
	transform: translateX(0.25rem);
}

.article-card.is-folding {
	transform: translateX(1rem) scaleY(0.02);
	transform-origin: center;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.65rem;
	max-width: 100%;
	margin: 0;
	color: var(--muted);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	letter-spacing: 0.035em;
}

.article-meta > span {
	position: relative;
}

.article-meta > span + span::before {
	margin-right: 0.75rem;
	color: var(--border);
	content: "/";
}

.article-meta .state-marker {
	padding: 0.05rem 0.45rem;
	border-left: 0.35rem solid var(--accent);
	background: transparent;
	color: var(--text);
	font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.article-meta .state-marker::before,
.article-meta .source-marker::before {
	content: none;
}

.source-marker {
	color: var(--text);
	font-weight: 600;
}

.save-marker {
	color: var(--success);
}

.crease-coordinate {
	align-self: flex-end;
	margin: 0 1.9rem -0.1rem 0;
	color: var(--crease-ink);
	font-family: "Saira Semi Condensed", "Arial Narrow", sans-serif;
	font-size: 0.7rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.article-time {
	font-size: 0.7rem;
}

.article-summary,
.recommendation-reason {
	max-width: 70ch;
	margin-block: 0.65rem 0;
}

.recommendation-reason {
	padding: 0.75rem 1rem;
	border-block: 0.0625rem solid var(--border);
	background: var(--surface-raised);
}

.article-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: 0.65rem;
}

.article-actions form {
	margin: 0;
}

.article-actions button,
.article-actions .button-link {
	min-width: 7rem;
}

.action-label-short {
	display: none;
}

.compact .article-grid {
	gap: 0.6rem;
}

.compact .article-card {
	padding: 0.75rem 1rem;
}

.compact .article-card h2 {
	font-size: 1.45rem;
}

.compact .article-summary {
	margin-top: 0.65rem;
}

.focus-mode .site-header,
.focus-mode main {
	width: min(60rem, calc(100% - 2rem));
}

.focus-mode .site-header {
	grid-template-columns: 1fr;
}

.focus-mode .brand-lockup,
.focus-mode .header-tools {
	justify-content: center;
}

.focus-mode .article-card {
	padding: clamp(1.1rem, 3vw, 2rem);
	box-shadow: 0 1rem 2.5rem var(--shadow-color);
}

.focus-mode .article-card h2 {
	font-size: clamp(1.45rem, 3vw, 2.4rem);
}

.focus-mode .article-actions {
	margin-top: 1.4rem;
}

.feed-category + .feed-category {
	margin-top: 2rem;
}

.feed-category h3 {
	margin-bottom: 0.75rem;
}

.feed-list {
	display: grid;
	gap: 0.65rem;
	padding: 0;
	list-style: none;
}

.feed-list-item {
	position: relative;
	display: grid;
	gap: 0.2rem;
	isolation: isolate;
	overflow: hidden;
	padding: 0.85rem 1rem;
	clip-path: polygon(0.55rem 0, calc(100% - 1.25rem) 0, 100% 1.25rem, calc(100% - 0.55rem) 100%, 0 100%, 0 0.55rem);
	border: 0.0625rem solid var(--border);
	background:
		linear-gradient(120deg, transparent 0 72%, color-mix(in srgb, var(--fold-valley), transparent 90%) 72.2% 72.5%, transparent 72.7%),
		var(--surface);
	transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

.feed-list-item::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--accent) var(--gold-material) center / cover;
	content: "";
}

.feed-list-item.is-selected {
	border-color: var(--focus);
	outline: 0.25rem solid var(--focus);
	outline-offset: 0.125rem;
	transform: translateX(0.4rem);
}

.newsletter-subscription {
	align-items: center;
}

.newsletter-subscription span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.newsletter-body {
	max-width: 72ch;
	margin-inline: auto;
	padding: clamp(1rem, 4vw, 2.5rem);
	border-inline: 0.0625rem solid var(--border);
	background: var(--surface);
}

.newsletter-body img,
.newsletter-body table {
	max-width: 100%;
}

.newsletter-body img {
	height: auto;
}

.copy-feedback:empty {
	display: none;
}

.messages {
	margin-bottom: 1.25rem;
}

.message {
	max-width: none;
	margin: 0 0 0.75rem;
	padding: 1rem 1.25rem;
	font-weight: 700;
}

.message.success {
	border-color: var(--success);
}

.message.warning {
	border-color: var(--warning);
}

.message.error {
	border-color: var(--danger);
}

.inline-message {
	max-width: none;
	margin-block: 0.75rem 0;
	padding: 0.75rem 1rem;
	border: 0.0625rem solid var(--border);
	background: var(--surface-raised);
}

.empty-state {
	max-width: none;
	padding: 2rem;
	border-block: 0.0625rem solid var(--border-strong);
	background: var(--surface);
	font-size: 1.15rem;
	font-weight: 600;
}

.keyboard-hint {
	position: sticky;
	bottom: 0;
	z-index: 5;
	margin-top: 2rem;
	padding: 0.5rem 1rem;
	border-top: 0.0625rem solid var(--border);
	background: var(--surface);
	color: var(--muted);
	font-size: 0.85rem;
	text-align: center;
}

.keyboard-help[hidden] {
	display: none;
}

.keyboard-help {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: var(--scrim);
}

.keyboard-help-panel {
	width: min(38rem, 100%);
	max-height: calc(100vh - 2rem);
	overflow: auto;
	padding: 1.5rem;
	box-shadow: 0 1.25rem 3rem var(--shadow-color);
}

.keyboard-help dl div {
	display: grid;
	grid-template-columns: 4rem 1fr;
	gap: 1rem;
	align-items: baseline;
	padding-block: 0.35rem;
	border-bottom: 0.0625rem solid var(--border);
}

kbd {
	display: inline-block;
	min-width: 1.9rem;
	padding: 0.15rem 0.4rem;
	border: 0.0625rem solid var(--border-strong);
	background: var(--background);
	color: var(--text);
	font-family: "Atkinson Hyperlegible Next", Verdana, sans-serif;
	font-weight: 700;
	text-align: center;
}

@media (max-width: 68rem) {
	.site-header {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}

	.header-tools {
		justify-content: space-between;
	}

	.site-nav {
		justify-content: flex-start;
	}
}

@media (max-width: 42rem) {
	body {
		font-size: 1rem;
		background-size: 28rem 19rem, 34rem 23rem, 42rem 28rem;
	}

	main,
	.focus-mode main {
		width: calc(100% - 1rem);
	}

	.site-header,
	.focus-mode .site-header {
		width: 100%;
		padding-inline: 0.5rem;
	}

	.site-header,
	.focus-mode .site-header {
		position: sticky;
		top: 0;
		z-index: 6;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.5rem;
		min-height: 3.5rem;
		background: color-mix(in srgb, var(--background), transparent 2%);
	}

	.brand-lockup,
	.focus-mode .brand-lockup {
		justify-content: flex-start;
	}

	.fold-mark {
		width: 2.65rem;
		height: 2.65rem;
	}

	.site-tagline {
		display: none;
	}

	.header-tools,
	.focus-mode .header-tools {
		display: block;
	}

	.nav-fold summary {
		display: inline-flex;
		width: 4.8rem;
		min-height: 2.75rem;
		padding: 0.4rem 0.65rem;
	}

	.nav-fold summary::after {
		margin-left: 0.6rem;
		content: "+";
	}

	.nav-fold[open] summary::after {
		content: "−";
	}

	.nav-fold:not([open]) .nav-sheet {
		display: none;
	}

	.nav-sheet {
		position: absolute;
		top: calc(100% + 0.25rem);
		right: 0.5rem;
		display: grid;
		width: min(22rem, calc(100vw - 1rem));
		gap: 0.5rem;
		padding: 0.5rem;
		border: 0.0625rem solid var(--border-strong);
		background: var(--surface);
		box-shadow: 0 1rem 2rem var(--shadow-color);
	}

	.site-nav {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		border: 0.0625rem solid var(--border);
		box-shadow: none;
	}

	.site-nav a {
		min-height: 2.75rem;
		border-right: 0.0625rem solid var(--border);
		border-bottom: 0.0625rem solid var(--border);
		font-size: 0.78rem;
	}

	.account-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.35rem;
	}

	.account-actions button {
		width: 100%;
		min-height: 2.75rem;
		padding: 0.4rem 0.65rem;
		font-size: 0.78rem;
	}

	main,
	.focus-mode main {
		padding-block: 0.5rem 2rem;
	}

	h1 {
		font-size: clamp(1.9rem, 9vw, 2.4rem);
	}

	.page-heading,
	.form-panel,
	.auth-panel {
		margin-bottom: 0.55rem;
		padding: 0.75rem 0.85rem;
	}

	.page-heading > * + *,
	.form-panel > * + *,
	.auth-panel > * + * {
		margin-top: 0.4rem;
	}

	.queue-count {
		margin-block: 0.35rem;
	}

	.page-heading form {
		margin-top: 0.5rem;
	}

	.article-grid {
		gap: 0.4rem;
	}

	.article-card,
	.focus-mode .article-card {
		padding: 0.7rem 0.8rem;
	}

	.article-card::after {
		width: 1.6rem;
		height: 1.6rem;
	}

	.article-card h2,
	.focus-mode .article-card h2 {
		margin-top: 0.25rem;
		font-size: 1.45rem;
		line-height: 1.08;
	}

	.article-meta {
		gap: 0.2rem 0.4rem;
		font-size: 0.7rem;
	}

	.article-meta > span + span::before {
		margin-right: 0.5rem;
	}

	.article-actions {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 0.2rem;
		margin-top: 0.5rem;
	}

	.article-actions form,
	.article-actions button,
	.article-actions .button-link {
		width: 100%;
		min-width: 0;
	}

	.article-actions button,
	.article-actions .button-link {
		min-height: 2.75rem;
		padding-inline: 0.25rem;
		font-size: 0.78rem;
		letter-spacing: 0.1em;
	}

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

	.action-label-short {
		display: inline;
	}

	.article-summary,
	.category-marker {
		display: none;
	}

	.article-card.is-selected,
	.feed-list-item.is-selected {
		transform: translateX(0.1rem);
	}

	.newsletter-body {
		padding: 1rem;
	}

	.keyboard-hint {
		display: none;
	}

	.keyboard-help dl div {
		grid-template-columns: 3rem 1fr;
		gap: 0.65rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media (forced-colors: active) {
	.fold-mark,
	.page-heading,
	.form-panel,
	.auth-panel,
	.article-card,
	.feed-list-item,
	.message {
		forced-color-adjust: auto;
	}

	.article-card::after,
	.page-heading::after,
	.form-panel::after,
	.auth-panel::after,
	.message::after {
		display: none;
	}
}