/* ============================================================
   Idea Dispatch — Editorial Stylesheet
   Typeset in Fraunces, Newsreader, and JetBrains Mono.
   Printed on warm cream paper with a vermillion second color.
   ============================================================ */

:root {
	/* Paper & ink — a warm, aged palette */
	--paper:        #f4efe6;
	--paper-deep:   #eae2d0;
	--paper-shade:  #ded3bb;
	--ink:          #1a1410;
	--ink-soft:     #3a3228;
	--ink-muted:    #77695a;
	--ink-faint:    #b4a68e;
	--rule:         #d6c9b0;
	--rule-soft:    #e3d9c4;

	/* Printer's colors */
	--vermillion:      #c23b22;
	--vermillion-deep: #9a2a13;
	--vermillion-wash: #f1d4cb;
	--indigo:          #1e3a5f;
	--ochre:           #b07e1a;
	--highlight:       #f5e6a8;

	/* Semantic */
	--bg:       var(--paper);
	--fg:       var(--ink);
	--muted:    var(--ink-muted);
	--accent:   var(--vermillion);
	--border:   var(--rule);

	/* Type families */
	--display: "Fraunces", "Hoefler Text", Georgia, serif;
	--body:    "Newsreader", "Iowan Old Style", Georgia, serif;
	--mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Rhythm */
	--touch-min: 44px;
	--column:    66ch;
	--wide:      78rem;
	--gutter:    clamp(1rem, 2.5vw, 2.25rem);
}

/* ============================================================
   1. Reset & foundation
   ============================================================ */

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

html {
	font-size: 17px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-feature-settings: "onum" 1, "kern" 1, "liga" 1;
	font-optical-sizing: auto;
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* Paper grain — faint SVG noise */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0 0.05 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 220px 220px;
	background-repeat: repeat;
}

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

a { color: var(--vermillion-deep); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 92%; background-repeat: no-repeat; transition: background-size .25s ease; }
a:hover { background-size: 100% 2px; color: var(--vermillion); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--display);
	font-weight: 500;
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 30, "opsz" 72;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 0.5em;
	line-height: 1.08;
	text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 3.2vw + 1.5rem, 4.5rem); font-variation-settings: "SOFT" 40, "opsz" 144; }
h2 { font-size: clamp(1.5rem, 1vw + 1.25rem, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; }

hr {
	border: 0;
	height: 0;
	border-top: 1px solid var(--rule);
	margin: 2rem 0;
}
hr.ornament {
	position: relative;
	margin: 3rem auto;
	text-align: center;
	overflow: visible;
}
hr.ornament::after {
	content: "❦";
	position: absolute;
	top: -0.7em;
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	padding: 0 1rem;
	color: var(--vermillion);
	font-size: 1.25rem;
}

/* ============================================================
   2. Masthead
   ============================================================ */

.masthead {
	position: relative;
	padding: 1.75rem var(--gutter) 1rem;
	text-align: center;
	border-bottom: 3px double var(--ink);
	background: var(--paper);
}

.masthead::before {
	content: "";
	position: absolute;
	left: var(--gutter);
	right: var(--gutter);
	top: 14px;
	border-top: 1px solid var(--ink);
}

.masthead-rails {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 1.25rem;
	padding-top: 0.25rem;
}
.masthead-rails .plate.right { text-align: right; }
.masthead-rails .num { color: var(--vermillion); font-weight: 700; }
.masthead-rails a { color: inherit; background: none; }
.masthead-rails a:hover { color: var(--vermillion); }

.masthead-title { margin: 0.25rem 0 1.25rem; }

.wordmark {
	display: inline-flex;
	align-items: baseline;
	gap: 0.85rem;
	background: none;
	color: var(--ink);
	text-decoration: none;
	line-height: 0.9;
}
.wordmark:hover { background: none; }
.wordmark .mark {
	font-family: var(--display);
	font-weight: 900;
	font-variation-settings: "SOFT" 0, "opsz" 144;
	font-size: clamp(2.75rem, 4vw + 1.5rem, 5rem);
	color: var(--vermillion);
	line-height: 0.8;
	transform: translateY(0.08em);
	/* faint stamp imperfection */
	text-shadow: 0.5px 0 0 var(--vermillion-deep);
}
.wordmark .title-stack { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.wordmark .title-main {
	font-family: var(--display);
	font-weight: 500;
	font-style: italic;
	font-variation-settings: "SOFT" 60, "opsz" 144;
	font-size: clamp(2rem, 3vw + 1rem, 3.75rem);
	letter-spacing: -0.015em;
}
.wordmark .title-sub {
	font-family: var(--body);
	font-style: italic;
	font-size: clamp(0.85rem, 0.3vw + 0.75rem, 1.05rem);
	color: var(--ink-muted);
	letter-spacing: 0.01em;
	margin-top: 0.15rem;
}

.masthead-nav {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 1rem;
	border-top: 1px solid var(--ink);
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.masthead-nav a {
	color: var(--ink);
	background: none;
	padding: 0.25rem 0.1rem;
	min-height: var(--touch-min);
	display: inline-flex;
	align-items: center;
	position: relative;
}
.masthead-nav a:hover { color: var(--vermillion); }
.masthead-nav a:hover::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0.5rem;
	height: 1px;
	background: var(--vermillion);
}
.masthead-nav .divider {
	color: var(--ink-faint);
	font-size: 0.85rem;
	line-height: 1;
	transform: translateY(1px);
}
.masthead-nav .spacer { flex: 1; min-width: 0.5rem; }
.masthead-nav .reader { display: inline-flex; align-items: center; gap: 0.5rem; }
.masthead-nav .reader-label { color: var(--ink-muted); font-size: 0.65rem; }
.masthead-nav .reader-name { color: var(--vermillion); }
.masthead-nav .reader-signin { color: var(--vermillion); }

/* ============================================================
   3. Main canvas & content rhythm
   ============================================================ */

.site-main {
	flex: 1;
	width: 100%;
	max-width: var(--wide);
	margin: 0 auto;
	padding: clamp(2rem, 4vw + 1rem, 4rem) var(--gutter) clamp(3rem, 6vw, 5rem);
}

.site-main > *:first-child > h1:first-child::first-letter,
.site-main > h1:first-child::first-letter,
.hero h1::first-letter {
	font-family: var(--display);
	font-variation-settings: "SOFT" 80, "opsz" 144;
	font-weight: 700;
	color: var(--vermillion);
	font-size: 1.3em;
	line-height: 1;
	padding-right: 0.05em;
}

/* ============================================================
   4. Hero / Landing
   ============================================================ */

.hero {
	text-align: center;
	padding: 2.5rem 0 1rem;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 3rem;
	position: relative;
}
.hero::before {
	content: "¶  From the editor  ¶";
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	padding: 0 1rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.hero .mark {
	display: none;
}
.hero h1 {
	font-family: var(--display);
	font-variation-settings: "SOFT" 80, "opsz" 144;
	font-weight: 500;
	font-style: italic;
	font-size: clamp(2.5rem, 4vw + 1.5rem, 5.5rem);
	letter-spacing: -0.02em;
	margin: 0 0 1rem;
}
.hero .lede {
	font-family: var(--body);
	font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
	font-style: italic;
	color: var(--ink-soft);
	max-width: 40rem;
	margin: 0 auto 2rem;
	line-height: 1.55;
	text-wrap: balance;
}
.cta-row {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

/* ============================================================
   5. Buttons, stamps, and controls
   ============================================================ */

.button,
button.button,
.button.primary,
.button.ghost,
.auth button,
.admin-controls button,
.idea-form button,
form button:not(.danger):not(.vote-button):not(.disclosure),
button[type="submit"]:not(.danger):not(.vote-button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: var(--touch-min);
	padding: 0.55rem 1.1rem;
	font-family: var(--mono);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--ink);
	color: var(--paper);
	border: 1.5px solid var(--ink);
	border-radius: 0;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
	box-shadow: 3px 3px 0 var(--ink-faint);
	background-image: none;
}
.button:hover,
button.button:hover,
form button:not(.danger):not(.vote-button):not(.disclosure):hover,
button[type="submit"]:not(.danger):not(.vote-button):hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--vermillion);
	background: var(--ink);
	color: var(--paper);
}
.button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink-faint); }

.button.primary {
	background: var(--vermillion);
	border-color: var(--vermillion-deep);
	color: var(--paper);
	box-shadow: 3px 3px 0 var(--ink);
}
.button.primary:hover {
	background: var(--vermillion-deep);
	box-shadow: 4px 4px 0 var(--ink);
}

.button.ghost {
	background: transparent;
	color: var(--ink);
	border: 1.5px solid var(--ink);
	box-shadow: 3px 3px 0 var(--rule);
}
.button.ghost:hover {
	background: var(--ink);
	color: var(--paper);
	box-shadow: 4px 4px 0 var(--vermillion);
}

button.danger {
	display: inline-flex;
	align-items: center;
	min-height: var(--touch-min);
	padding: 0.5rem 1rem;
	background: transparent;
	color: var(--vermillion-deep);
	border: 1px dashed var(--vermillion);
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 0;
}
button.danger:hover { background: var(--vermillion); color: var(--paper); }

/* ============================================================
   6. Features / How-it-works (landing)
   ============================================================ */

.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
	margin: 3rem 0;
	position: relative;
}
.features::before {
	content: "§ §";
	position: absolute;
	top: -2.5rem;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--vermillion);
	letter-spacing: 0.25em;
}

.feature-card {
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 1.75rem 1.5rem 1.5rem;
	position: relative;
	box-shadow: 4px 4px 0 var(--rule);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px solid var(--rule-soft);
	pointer-events: none;
}
.feature-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--vermillion);
}
.feature-card h2 {
	margin: 0 0 0.5rem;
	font-family: var(--display);
	font-variation-settings: "SOFT" 30, "opsz" 72;
	font-style: italic;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--vermillion);
}
.feature-card p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.98rem;
}

.how-it-works {
	margin: 4rem 0 2rem;
	position: relative;
}
.how-it-works h2 {
	text-align: center;
	font-family: var(--display);
	font-style: italic;
	font-variation-settings: "SOFT" 50, "opsz" 72;
	font-weight: 500;
	font-size: clamp(1.75rem, 1vw + 1.5rem, 2.5rem);
	margin: 0 0 0.5rem;
}
.how-it-works::before {
	content: "↓  in three parts  ↓";
	display: block;
	text-align: center;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: 2.5rem;
}

.steps {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 2rem 2.5rem;
	counter-reset: steps;
}
.steps li {
	position: relative;
	padding: 1.25rem 1rem 0;
	border-top: 1px solid var(--ink);
	counter-increment: steps;
}
.steps li::before {
	content: "№ " counter(steps, decimal-leading-zero);
	position: absolute;
	top: -0.65rem;
	left: 0;
	background: var(--paper);
	padding: 0 0.5rem 0 0;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vermillion);
}
.steps li .step-number { display: none; }
.steps h3 {
	margin: 0 0 0.35rem;
	font-family: var(--display);
	font-style: italic;
	font-size: 1.3rem;
	font-weight: 500;
}
.steps p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

/* ============================================================
   7. Auth forms (login, signup, setup)
   ============================================================ */

.auth {
	max-width: 28rem;
	margin: 2rem auto;
	padding: 2.5rem 2rem;
	border: 1px solid var(--ink);
	background: var(--paper);
	box-shadow: 6px 6px 0 var(--rule);
	position: relative;
}
.auth::before {
	content: "✎  Correspondence  ✎";
	position: absolute;
	top: -0.7rem;
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	padding: 0 0.75rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vermillion);
}
.auth h1 {
	margin: 0 0 1.5rem;
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 2rem;
	text-align: center;
}
.auth form { display: flex; flex-direction: column; gap: 1rem; }
.auth label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.auth input {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--body);
	font-size: 1rem;
	color: var(--ink);
}
.auth input:focus {
	outline: none;
	border-color: var(--vermillion);
	box-shadow: 0 0 0 2px var(--vermillion-wash);
}
.auth button {
	margin-top: 0.5rem;
	background: var(--vermillion);
	border-color: var(--vermillion-deep);
	color: var(--paper);
	box-shadow: 3px 3px 0 var(--ink);
}
.auth button:hover { background: var(--vermillion-deep); }

.error {
	color: var(--vermillion-deep);
	font-weight: 600;
	font-style: italic;
	padding: 0.5rem 0.85rem;
	border-left: 3px solid var(--vermillion);
	background: var(--vermillion-wash);
}

/* ============================================================
   8. Page head, meta, tags, status badges
   ============================================================ */

.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ink);
	margin-bottom: 1.5rem;
}
.page-head h1 {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-variation-settings: "SOFT" 60, "opsz" 144;
	margin: 0;
	flex: 1;
	min-width: 0;
}

.meta {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-variant-numeric: tabular-nums;
}
.meta .author { color: var(--ink); }

/* Tag pills — bracketed mono stamps */
.tag {
	display: inline-block;
	background: transparent;
	color: var(--ink);
	padding: 0.15rem 0.5rem;
	border: 1px solid var(--ink-faint);
	border-radius: 0;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0.3rem 0.3rem 0;
	text-decoration: none;
	background-image: none;
	transition: all 0.15s ease;
}
.tag::before { content: "["; color: var(--ink-faint); margin-right: 0.2rem; }
.tag::after  { content: "]"; color: var(--ink-faint); margin-left: 0.2rem; }
.tag:hover {
	background: var(--ink);
	color: var(--paper);
	border-color: var(--ink);
}
.tag:hover::before, .tag:hover::after { color: var(--vermillion); }

/* Status badges — rubber-stamped marks, slightly askew */
.status-badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border: 1.5px solid var(--ink);
	border-radius: 0;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	background: transparent;
	color: var(--ink);
	transform: rotate(-1.5deg);
	box-shadow: 1.5px 1.5px 0 var(--rule);
}
.status-draft     { color: var(--ink-muted); border-color: var(--ink-muted); }
.status-published { color: var(--indigo); border-color: var(--indigo); }
.status-under_review { color: var(--ochre); border-color: var(--ochre); }
.status-accepted  { color: var(--indigo); border-color: var(--indigo); transform: rotate(1deg); }
.status-in_progress { color: var(--vermillion); border-color: var(--vermillion); }
.status-shipped   { color: var(--paper); background: var(--vermillion); border-color: var(--vermillion-deep); transform: rotate(-0.5deg); }
.status-declined  { color: var(--ink-muted); border-color: var(--ink-faint); text-decoration: line-through; transform: rotate(2deg); }
.status-archived  { color: var(--ink-faint); border-color: var(--ink-faint); border-style: dashed; }

/* ============================================================
   9. Idea cards — numbered dispatches
   ============================================================ */

.idea-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	gap: 1.75rem;
	margin: 1.5rem 0;
	counter-reset: dispatch;
}

.idea-card {
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 1.25rem 1.4rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	position: relative;
	box-shadow: 4px 4px 0 var(--rule);
	counter-increment: dispatch;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.idea-card::before {
	content: "№ " counter(dispatch, decimal-leading-zero);
	position: absolute;
	top: -0.7rem;
	left: 1rem;
	background: var(--paper);
	padding: 0 0.55rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vermillion);
}
.idea-card:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--vermillion);
}
.idea-card header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: 0.25rem;
}
.idea-card .idea-title {
	font-family: var(--display);
	font-variation-settings: "SOFT" 40, "opsz" 48;
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.15;
	color: var(--ink);
	background: none;
	flex: 1;
	min-width: 0;
	text-wrap: balance;
}
.idea-card .idea-title:hover { color: var(--vermillion); background: none; }
.idea-card .excerpt {
	color: var(--ink-soft);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
	white-space: pre-line;
	/* clamp to 3 lines in grids */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-family: var(--body);
}
.idea-card footer.meta {
	margin-top: auto;
	padding-top: 0.5rem;
	border-top: 1px dashed var(--rule);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: baseline;
}
.idea-card footer.meta .author { color: var(--ink); font-weight: 500; }
.idea-card .tags { margin-top: 0.35rem; }

.load-more {
	grid-column: 1 / -1;
	text-align: center;
	padding: 1.5rem 0;
}

/* ============================================================
   10. Idea list (plain rows) + filters + page grids
   ============================================================ */

.filters {
	display: flex;
	gap: 1.25rem;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 1.5rem 0 2rem;
	padding: 1.25rem 1.4rem;
	background: var(--paper);
	border: 1px solid var(--ink);
	box-shadow: 4px 4px 0 var(--rule);
	position: relative;
}
.filters::before {
	content: "✦ sort & sift";
	position: absolute;
	top: -0.7rem;
	left: 1rem;
	background: var(--paper);
	padding: 0 0.5rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vermillion);
}
.filters label {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.filters input,
.filters select,
.idea-form input,
.idea-form select,
.idea-form textarea,
.admin-controls input,
.admin-controls select {
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	font-family: var(--body);
	font-size: 0.98rem;
	color: var(--ink);
}
.filters input:focus,
.filters select:focus,
.idea-form input:focus,
.idea-form textarea:focus {
	outline: none;
	border-color: var(--vermillion);
	box-shadow: 0 0 0 2px var(--vermillion-wash);
}

.idea-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.idea-list.nested {
	margin: 0.75rem 0 0.75rem 1.25rem;
	border-left: 1px solid var(--rule);
	padding-left: 1.25rem;
}
.idea-row {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rule);
}
.idea-title {
	font-family: var(--display);
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--ink);
	text-decoration: none;
	background: none;
}
.idea-title:hover { color: var(--vermillion); background: none; }

.empty {
	color: var(--ink-muted);
	font-style: italic;
	padding: 1rem 0;
}

/* ============================================================
   11. Idea detail page — the long-form dispatch
   ============================================================ */

.idea { max-width: var(--column); margin: 0 auto; }
.idea .page-head { margin-bottom: 1rem; }

.idea > .meta {
	display: block;
	margin: 0 0 2rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
	line-height: 1.8;
}
.idea > .tags { margin: 0 0 2rem; }

.idea .body {
	margin: 2rem 0;
	font-family: var(--body);
	font-size: 1.12rem;
	line-height: 1.7;
	color: var(--ink);
}
.idea .body > p:first-child::first-letter {
	font-family: var(--display);
	font-variation-settings: "SOFT" 80, "opsz" 144;
	font-weight: 700;
	color: var(--vermillion);
	font-size: 4.2em;
	line-height: 0.85;
	float: left;
	padding: 0.18em 0.1em 0 0;
	margin-right: 0.05em;
}
.idea .body p { margin: 0 0 1.1em; }
.idea .body h2 {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.65rem;
	margin: 2rem 0 0.75rem;
}
.idea .body blockquote {
	margin: 1.5rem 0;
	padding: 0.25rem 1.25rem;
	border-left: 3px solid var(--vermillion);
	font-style: italic;
	color: var(--ink-soft);
}
.idea .body pre {
	background: var(--paper-deep);
	border: 1px solid var(--rule);
	padding: 1rem 1.25rem;
	border-radius: 0;
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 0.85rem;
}
.idea .body code {
	background: var(--paper-deep);
	padding: 0.1rem 0.35rem;
	border-radius: 0;
	font-family: var(--mono);
	font-size: 0.88em;
}
.idea .body a { color: var(--vermillion-deep); }
.idea .body ul, .idea .body ol { padding-left: 1.5rem; margin: 0 0 1.1em; }
.idea .body li { margin-bottom: 0.35rem; }

.vote-button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.1rem;
	background: var(--paper);
	color: var(--ink);
	border: 1.5px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
	font-family: var(--mono);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 var(--rule);
	transition: all 0.15s ease;
	font-variant-numeric: tabular-nums;
}
.vote-button:hover {
	transform: translate(-1px, -1px);
	box-shadow: 4px 4px 0 var(--vermillion);
}
.vote-button.voted {
	background: var(--vermillion);
	color: var(--paper);
	border-color: var(--vermillion-deep);
	box-shadow: 3px 3px 0 var(--ink);
}
.vote-count { font-weight: 700; }

.actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

.banner {
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--ink);
	background: var(--highlight);
	margin: 0 0 1.25rem;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	color: var(--ink);
}
.banner.merged::before {
	content: "◆  ";
	color: var(--vermillion);
}
.banner a { color: var(--vermillion-deep); }

/* Breadcrumbs */
.breadcrumbs { margin: 0 0 1rem; }
.breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.breadcrumbs li + li::before { content: "›"; margin-right: 0.35rem; color: var(--ink-faint); }
.breadcrumbs a { color: var(--ink-muted); background: none; }
.breadcrumbs a:hover { color: var(--vermillion); background: none; }

/* Admin controls */
.admin-controls {
	background: var(--paper);
	padding: 1.75rem 1.5rem 1.25rem;
	border: 1px solid var(--ink);
	border-radius: 0;
	margin: 2rem 0;
	box-shadow: 4px 4px 0 var(--rule);
	position: relative;
}
.admin-controls::before {
	content: "⚙  editor's desk  ⚙";
	position: absolute;
	top: -0.7rem;
	left: 1rem;
	background: var(--paper);
	padding: 0 0.55rem;
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vermillion);
}
.admin-controls h2 {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.35rem;
	margin: 0 0 1rem;
}
.admin-controls form { display: flex; gap: 0.85rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px dashed var(--rule); }
.admin-controls form:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.admin-controls label { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

/* ============================================================
   12. Comments — letters from readers
   ============================================================ */

.comments { margin: 3rem 0 2rem; }
.comments > h2 {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.75rem;
	position: relative;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--ink);
	margin-bottom: 1.5rem;
}
.comments > h2::after {
	content: "letters to the editor";
	position: absolute;
	right: 0;
	bottom: 0.75rem;
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ink-muted);
	font-style: normal;
	font-weight: 500;
}

.new-comment {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 2rem;
	padding: 1.25rem;
	background: var(--paper);
	border: 1px solid var(--ink);
	box-shadow: 4px 4px 0 var(--rule);
}
.new-comment textarea,
.reply-form textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--rule);
	border-radius: 0;
	font-family: var(--body);
	font-size: 1rem;
	background: var(--paper);
	color: var(--ink);
	resize: vertical;
}
.new-comment textarea:focus,
.reply-form textarea:focus {
	outline: none;
	border-color: var(--vermillion);
	box-shadow: 0 0 0 2px var(--vermillion-wash);
}

.comments-list { display: flex; flex-direction: column; gap: 1.25rem; }

.comment {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-left: 3px solid var(--vermillion);
	border-radius: 0;
	padding: 1rem 1.25rem;
	position: relative;
}
.comment.reply {
	margin-top: 0.85rem;
	margin-left: 2rem;
	background: var(--paper-deep);
	border-left-color: var(--ink-faint);
}
.comment-meta {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	display: flex;
	gap: 0.65rem;
	align-items: baseline;
	margin-bottom: 0.6rem;
	flex-wrap: wrap;
}
.comment-meta strong { color: var(--vermillion); font-weight: 700; }
.comment-meta time { font-variant-numeric: tabular-nums; }
.comment-meta .edited { font-style: italic; }
.comment-body { margin: 0 0 0.5rem; font-family: var(--body); font-size: 1rem; line-height: 1.55; }
.comment-body p:first-child { margin-top: 0; }
.comment-body p:last-child { margin-bottom: 0; }
.comment-actions { margin-top: 0.5rem; }
.reply-form { margin-top: 0.5rem; }
.reply-form summary {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
	cursor: pointer;
	list-style: none;
}
.reply-form summary::before { content: "↳ "; color: var(--vermillion); }
.reply-form summary:hover { color: var(--vermillion); }
.reply-form form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }

.replies { margin-top: 0.75rem; }

/* ============================================================
   13. Activity feed — typewriter log
   ============================================================ */

.activity { margin: 3rem 0 2rem; }
.activity > h2 {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.5rem;
	margin: 0 0 1rem;
}
.activity-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.activity-row {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--rule);
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--ink-muted);
	display: flex;
	gap: 0.75rem;
	align-items: baseline;
	flex-wrap: wrap;
}
.activity-row .action {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--ink-faint);
	color: var(--vermillion);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: transparent;
	border-radius: 0;
	margin-right: 0;
}
.activity-row .user { color: var(--ink); font-weight: 500; }
.activity-row time { font-variant-numeric: tabular-nums; margin-left: auto; color: var(--ink-faint); }

/* ============================================================
   14. Dashboard — the editor's desk
   ============================================================ */

.stat-row {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 2.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1rem;
}
.stat {
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 1.25rem 1.35rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	box-shadow: 4px 4px 0 var(--rule);
	position: relative;
}
.stat::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px solid var(--rule-soft);
	pointer-events: none;
}
.stat-value {
	font-family: var(--display);
	font-variation-settings: "SOFT" 20, "opsz" 144;
	font-weight: 700;
	font-size: 2.75rem;
	color: var(--vermillion);
	line-height: 0.9;
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.02em;
}
.stat-label {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}

.dashboard-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 2rem;
	margin-bottom: 2.5rem;
}
.dashboard-col h2,
.dashboard-activity h2 {
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.35rem;
	margin: 0 0 0.85rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--rule);
}

.status-counts { list-style: none; padding: 0; margin: 0; }
.status-counts li {
	padding: 0.5rem 0;
	border-bottom: 1px dashed var(--rule);
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	font-family: var(--mono);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.status-counts .count {
	font-weight: 700;
	color: var(--vermillion);
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
}

/* ============================================================
   15. Tree view — the archive
   ============================================================ */

.tree-list { list-style: none; padding: 0; margin: 0.75rem 0; }
.tree-list.nested {
	margin-left: 1.25rem;
	border-left: 1px dashed var(--rule);
	padding-left: 1rem;
}
.tree-node { padding: 0.4rem 0; }
.tree-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--body);
	font-size: 1rem;
}
.disclosure {
	background: none;
	border: 1px solid var(--rule);
	min-width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	cursor: pointer;
	font-family: var(--mono);
	font-size: 0.85rem;
	color: var(--ink);
	border-radius: 0;
	line-height: 1;
	box-shadow: none;
}
.disclosure:hover { background: var(--vermillion); color: var(--paper); border-color: var(--vermillion-deep); }

/* ============================================================
   16. Kanban / Roadmap — the press room
   ============================================================ */

.roadmap-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.roadmap-tags .tag.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.roadmap-tags .tag.active::before,
.roadmap-tags .tag.active::after { color: var(--vermillion); }

.kanban {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}
.kanban-col {
	background: var(--paper);
	border: 1px solid var(--ink);
	border-radius: 0;
	padding: 1.25rem 1.15rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	box-shadow: 4px 4px 0 var(--rule);
	position: relative;
}
.kanban-col > header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 0.6rem;
}
.kanban-col h2 {
	margin: 0;
	font-family: var(--display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.3rem;
}
.kanban-col .count {
	font-family: var(--mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vermillion);
	font-weight: 700;
}
.kanban-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.kanban-card {
	background: var(--paper-deep);
	border: 1px solid var(--rule);
	border-radius: 0;
	padding: 0.75rem 0.9rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kanban-card:hover {
	transform: translate(-1px, -1px);
	box-shadow: 2px 2px 0 var(--vermillion);
}
.kanban-card h3 {
	margin: 0 0 0.25rem;
	font-family: var(--display);
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.2;
}
.kanban-card .meta {
	font-family: var(--mono);
	font-size: 0.65rem;
	color: var(--ink-muted);
	margin: 0;
}
.kanban-card .tags { margin-top: 0.35rem; }
.kanban-card-link { color: var(--ink); text-decoration: none; display: block; background: none; }
.kanban-card-link:hover { background: none; }
.kanban-card-link:hover h3 { color: var(--vermillion); }

/* ============================================================
   17. Bulk bar + idea card wrap (admin select UI)
   ============================================================ */

.bulk-bar {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.85rem 1.25rem;
	background: var(--highlight);
	border: 1px solid var(--ink);
	border-radius: 0;
	margin-bottom: 1.5rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 3px 3px 0 var(--ink);
}
.bulk-bar .hint { font-size: 0.7rem; color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-style: italic; font-family: var(--body); }
.idea-card-wrap {
	display: block;
	position: relative;
	cursor: pointer;
}
.idea-card-wrap .bulk-check {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: 1.15rem;
	height: 1.15rem;
	cursor: pointer;
	z-index: 2;
	accent-color: var(--vermillion);
}
.idea-card-wrap:has(.bulk-check:checked) .idea-card {
	border-color: var(--vermillion);
	box-shadow: 6px 6px 0 var(--vermillion);
}

/* ============================================================
   18. Idea form
   ============================================================ */

.idea-form form { display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; }
.idea-form label {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-muted);
}
.idea-form textarea { min-height: 12rem; font-family: var(--body); font-size: 1rem; line-height: 1.5; }

/* ============================================================
   19. Footer colophon
   ============================================================ */

.site-footer {
	padding: 3rem var(--gutter) 3rem;
	border-top: 3px double var(--ink);
	margin-top: 4rem;
	text-align: center;
	background: var(--paper);
}
.colophon-mark {
	font-family: var(--display);
	font-size: 1.5rem;
	color: var(--vermillion);
	letter-spacing: 0.4em;
	margin-bottom: 0.75rem;
}
.colophon-line {
	font-family: var(--display);
	font-style: italic;
	font-size: 1rem;
	color: var(--ink);
	margin: 0 0 0.4rem;
}
.colophon-line a { color: var(--vermillion-deep); }
.colophon-fine {
	font-family: var(--mono);
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin: 0;
}
.colophon-fine em { color: var(--ink); font-style: italic; }

/* ============================================================
   20. Entrance animation
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	.masthead { animation: ink-bleed 0.8s ease-out both; }
	.site-main > * { animation: fade-up 0.6s ease-out both; animation-delay: 0.15s; }
	.site-main > * + * { animation-delay: 0.25s; }
	.site-main > * + * + * { animation-delay: 0.35s; }
	.site-main > * + * + * + * { animation-delay: 0.45s; }
	.idea-card,
	.feature-card,
	.stat,
	.kanban-col {
		animation: fade-up 0.5s ease-out both;
	}
	.idea-cards .idea-card:nth-child(1),
	.features .feature-card:nth-child(1),
	.stat-row .stat:nth-child(1),
	.kanban .kanban-col:nth-child(1) { animation-delay: 0.20s; }
	.idea-cards .idea-card:nth-child(2),
	.features .feature-card:nth-child(2),
	.stat-row .stat:nth-child(2),
	.kanban .kanban-col:nth-child(2) { animation-delay: 0.30s; }
	.idea-cards .idea-card:nth-child(3),
	.features .feature-card:nth-child(3),
	.stat-row .stat:nth-child(3),
	.kanban .kanban-col:nth-child(3) { animation-delay: 0.40s; }
	.idea-cards .idea-card:nth-child(4),
	.features .feature-card:nth-child(4),
	.stat-row .stat:nth-child(4),
	.kanban .kanban-col:nth-child(4) { animation-delay: 0.50s; }
	.idea-cards .idea-card:nth-child(n+5),
	.features .feature-card:nth-child(n+5),
	.stat-row .stat:nth-child(n+5),
	.kanban .kanban-col:nth-child(n+5) { animation-delay: 0.60s; }
}

@keyframes fade-up {
	from { opacity: 0; transform: translateY(0.75rem); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes ink-bleed {
	from { opacity: 0; filter: blur(2px); }
	to   { opacity: 1; filter: blur(0); }
}

/* ============================================================
   21. Responsive refinements
   ============================================================ */

@media (max-width: 720px) {
	html { font-size: 16px; }
	.masthead { padding: 1.25rem 1rem 0.85rem; }
	.masthead-rails { font-size: 0.6rem; gap: 0.5rem; }
	.wordmark { flex-direction: column; align-items: center; gap: 0.25rem; }
	.wordmark .title-stack { align-items: center; text-align: center; }
	.wordmark .mark { font-size: 3.25rem; transform: none; }
	.wordmark .title-main { font-size: 2.1rem; }
	.masthead-nav { gap: 0.5rem; font-size: 0.65rem; letter-spacing: 0.12em; }
	.masthead-nav .divider { display: none; }
	.masthead-nav .spacer { display: none; }
	.hero { padding: 2rem 0 0.5rem; }
	.idea-cards { gap: 1.25rem; }
	.page-head { gap: 0.75rem; }
	.stat-value { font-size: 2.25rem; }
}

@media (min-width: 1400px) {
	:root { --gutter: 3rem; }
}

/* ============================================================
   22. Print — because it's a dispatch, of course
   ============================================================ */

@media print {
	body { background: #fff; color: #000; }
	.masthead-nav, .actions, .vote-button, .admin-controls,
	.new-comment, .reply-form, .load-more, .bulk-bar { display: none; }
	.idea-card, .feature-card, .stat { box-shadow: none; }
	a { color: #000; background: none; }
}