/* ──────────────────────────────────────────────────────────────────
   UNNECESSARY INVENTIONS — Theme Styles
   Design system: cream paper, ink black, blue accent
   Typography: Bricolage Grotesque + Instrument Serif + JetBrains Mono
   ────────────────────────────────────────────────────────────────── */

:root {
	--paper: #F0EBE1;
	--paper-dim: #E6E0D2;
	--ink: #0A0A08;
	--ink-soft: #1F1D18;
	--ink-mute: #6B6760;
	--rule: #BFB8A6;
	--blue: #00B1FF;
	--blue-soft: #D5EFFF;

	--font-sans: 'Bricolage Grotesque', sans-serif;
	--font-serif: 'Instrument Serif', serif;
	--font-mono: 'JetBrains Mono', monospace;

	--max: 1440px;
	--gutter: 24px;
}

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

html, body {
	margin: 0;
	padding: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Subtle paper grain — keeps the digital feel from being too sterile */
body::before {
	content: '';
	position: fixed; inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1000;
	mix-blend-mode: multiply;
	opacity: 0.35;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

/* ───── UTILITIES ───── */
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ───── TOP TICKER ───── */
.ticker {
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	border-bottom: 1px solid var(--ink);
}
.ticker-track {
	display: flex;
	gap: 48px;
	padding: 8px 0;
	white-space: nowrap;
	animation: ticker 40s linear infinite;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.ticker-track span { display: inline-flex; align-items: center; gap: 12px; }
.ticker-track span::after { content: '◆'; color: var(--blue); font-size: 8px; }
@keyframes ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ───── STICKY TOP (ticker + header travel together) ───── */
.site-top {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--paper);
}
/* Account for WP admin bar when logged in */
.admin-bar .site-top { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .site-top { top: 46px; }
}

/* ───── NAV ───── */
.site-header {
	background: var(--paper);
	border-bottom: 1px solid var(--ink);
}
.nav-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 18px var(--gutter);
	max-width: var(--max);
	margin: 0 auto;
	gap: 24px;
}
.logo {
	font-family: var(--font-sans);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.03em;
	line-height: 1;
	display: flex; align-items: center; gap: 8px;
}
.logo-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	background: var(--ink);
	color: var(--paper);
	font-weight: 800;
	font-size: 16px;
	border-radius: 2px;
}
.primary-menu, .footer-menu { list-style: none; display: flex; gap: 32px; justify-content: center; }
.primary-menu a, .footer-menu a {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: relative;
	padding: 4px 0;
	transition: color .2s;
}
.primary-menu a::after {
	content: '';
	position: absolute; left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var(--blue);
	transform: scaleX(0); transform-origin: left;
	transition: transform .25s ease;
}
.primary-menu a:hover::after { transform: scaleX(1); }
.nav-actions { display: flex; justify-content: flex-end; gap: 12px; align-items: center; }
.pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background .2s, color .2s;
}
.pill:hover { background: var(--ink); color: var(--paper); }
.pill.shop { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.pill.shop:hover { background: var(--ink); color: var(--blue); border-color: var(--ink); }

/* Mobile nav toggle */
.menu-toggle { display: none; }

/* ───── ARCHIVE TOP ───── */
.archive-top {
	padding: 48px var(--gutter) 24px;
	max-width: var(--max);
	margin: 0 auto;
}
.archive-top-row {
	display: flex; justify-content: space-between; align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--ink);
	margin-bottom: 24px;
	gap: 16px; flex-wrap: wrap;
}
.archive-meta {
	display: flex; gap: 14px; align-items: center;
	color: var(--ink-mute);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.archive-meta .count-num {
	font-family: var(--font-sans);
	font-size: 28px; font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--ink);
	margin-right: 4px;
	line-height: 1;
	vertical-align: -3px;
}
.archive-meta .sep { opacity: 0.4; }
.view-toggle { display: flex; border: 1px solid var(--ink); border-radius: 999px; overflow: hidden; }
.view-toggle .vt {
	padding: 8px 16px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: transparent;
	transition: background .2s, color .2s;
}
.view-toggle .vt.active { background: var(--ink); color: var(--paper); }
.view-toggle .vt:not(.active):hover { background: var(--paper-dim); }

/* ───── CATEGORY FILTER ───── */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
	padding: 8px 14px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: transparent;
	transition: all .2s;
	display: inline-block;
}
.chip:hover { background: var(--ink); color: var(--paper); }
.chip.active { background: var(--ink); color: var(--paper); }

/* ───── SECTION HEAD ───── */
.section-head {
	display: flex; justify-content: space-between; align-items: flex-end;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 16px;
	margin-bottom: 32px;
}
.section-head h2 {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 32px;
	letter-spacing: -0.02em;
}
.section-head h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ───── ARCHIVE GRID ───── */
.archive { padding: 0 var(--gutter) 80px; max-width: var(--max); margin: 0 auto; }
.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 24px;
}
.card {
	display: flex; flex-direction: column; gap: 0;
	cursor: pointer;
	position: relative;
}
.card-img {
	aspect-ratio: 4 / 5;
	background: var(--paper-dim);
	border-radius: 4px;
	overflow: hidden;
	position: relative;
	display: flex; align-items: center; justify-content: center;
	transition: transform .4s ease;
}
.card-img img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
.card:hover .card-img { transform: translateY(-4px); }
.card-img .ph-label {
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink-mute);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.5;
	padding: 16px;
	text-align: center;
}
.card-img .num-tag {
	position: absolute; top: 12px; left: 12px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--ink);
	background: var(--paper);
	padding: 4px 8px;
	border-radius: 2px;
	letter-spacing: 0.05em;
	z-index: 2;
}
.card-img .cat-tag {
	position: absolute; bottom: 12px; right: 12px;
	font-family: var(--font-mono);
	font-size: 10px;
	color: var(--paper);
	background: rgba(10,10,8,0.7);
	backdrop-filter: blur(4px);
	padding: 4px 8px;
	border-radius: 2px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	z-index: 2;
}
.card-info {
	display: grid; grid-template-columns: 1fr auto;
	gap: 8px; align-items: baseline;
}
.card-info .name {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.01em;
}
.card-info .year { color: var(--ink-mute); }
.card-meta { display: flex; gap: 12px; color: var(--ink-mute); }
.load-more-row { display: flex; justify-content: center; margin-top: 60px; }

/* WP pagination override */
.pagination {
	display: flex; gap: 8px; justify-content: center; margin-top: 60px;
}
.pagination .page-numbers {
	padding: 10px 16px;
	border: 1px solid var(--ink);
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background .2s, color .2s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--ink); color: var(--paper);
}

/* ───── INVENTION DETAIL PAGE ───── */
.invention-detail { padding: 60px var(--gutter); max-width: var(--max); margin: 0 auto; }
.detail-meta-row {
	display: flex; justify-content: space-between; align-items: flex-end;
	color: var(--ink-mute);
	border-bottom: 1px solid var(--ink);
	padding-bottom: 16px;
	margin-bottom: 32px;
	flex-wrap: wrap; gap: 12px;
}
.detail-hero {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto 40px;
	max-height: 65vh;
	aspect-ratio: 16 / 10;
	background: var(--paper-dim);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.detail-hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.detail-title-block { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; margin-bottom: 60px; }
.detail-title-block h1 {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(40px, 6vw, 80px);
	line-height: 0.95;
	letter-spacing: -0.03em;
}
.detail-title-block h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.detail-spec-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 16px;
	border-top: 1px solid var(--rule);
	padding-top: 20px;
}
.detail-spec .label { color: var(--ink-mute); margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.detail-spec .value { font-family: var(--font-sans); font-weight: 500; font-size: 14px; }

.detail-content {
	max-width: 720px;
	margin: 0 auto 60px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.detail-content p { margin-bottom: 1.2em; }
.detail-content h2 {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 28px;
	letter-spacing: -0.02em;
	margin: 2em 0 0.6em;
	color: var(--ink);
}
.detail-content h3 { font-size: 22px; font-weight: 500; margin: 1.6em 0 0.4em; color: var(--ink); }
.detail-content a { color: var(--ink); border-bottom: 2px solid var(--blue); }
.detail-content blockquote {
	border-left: 3px solid var(--blue);
	padding-left: 24px;
	margin: 2em 0;
	font-family: var(--font-serif); font-style: italic;
	font-size: 24px; line-height: 1.3;
	color: var(--ink);
}
.detail-content img { border-radius: 4px; margin: 1.5em 0; }

.detail-video {
	position: relative; padding-bottom: 56.25%;
	height: 0; margin: 40px 0;
	background: var(--ink);
	border-radius: 4px; overflow: hidden;
}
.detail-video iframe {
	position: absolute; top: 0; left: 0;
	width: 100%; height: 100%; border: 0;
}

/* Related inventions strip */
.related-section { padding: 60px var(--gutter); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--ink); }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }

/* Prev/Next nav */
.prev-next-nav {
	max-width: var(--max);
	margin: 0 auto;
	padding: 40px var(--gutter);
	display: flex; justify-content: space-between;
	border-top: 1px solid var(--ink);
}
.prev-next-nav a {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	transition: color .2s;
}
.prev-next-nav a:hover { color: var(--blue); }

/* ───── EDITORIAL QUOTE ───── */
.quote-block {
	padding: 100px var(--gutter);
	max-width: var(--max);
	margin: 0 auto;
	text-align: center;
}
.quote-block blockquote {
	font-family: var(--font-serif); font-style: italic; font-weight: 400;
	font-size: clamp(32px, 5vw, 64px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	max-width: 1000px; margin: 0 auto;
}
.quote-block .attribution { margin-top: 32px; color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }

/* ───── COLLABS STRIP ───── */
.collabs { padding: 80px var(--gutter); max-width: var(--max); margin: 0 auto; border-top: 1px solid var(--ink); }
.collabs-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 32px;
}
.collab-card {
	aspect-ratio: 1;
	background: var(--paper-dim);
	border-radius: 4px;
	display: flex; flex-direction: column; justify-content: space-between;
	padding: 20px;
	transition: background .25s, color .25s;
	overflow: hidden;
	position: relative;
}
.collab-card:hover { background: var(--ink); color: var(--paper); }
.collab-card .brand {
	font-family: var(--font-sans); font-weight: 600;
	font-size: 24px; letter-spacing: -0.02em;
}
.collab-card .yr { color: var(--ink-mute); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.collab-card:hover .yr { color: var(--paper); opacity: 0.6; }

/* ───── ABOUT PREVIEW ───── */
.about-prev { padding: 80px var(--gutter); max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; border-top: 1px solid var(--ink); }
.about-prev .left h2 {
	font-family: var(--font-sans); font-weight: 500;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1; letter-spacing: -0.03em; margin-bottom: 24px;
}
.about-prev .left h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.about-prev .right { display: flex; flex-direction: column; gap: 20px; }
.about-prev .right p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 24px; }
.stat .num { font-family: var(--font-sans); font-weight: 500; font-size: 36px; letter-spacing: -0.03em; line-height: 1; }
.stat .lbl { color: var(--ink-mute); margin-top: 6px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ───── NEWSLETTER / DARK SECTION ───── */
.newsletter { background: var(--ink); color: var(--paper); padding: 80px var(--gutter); }
.newsletter-inner {
	max-width: var(--max);
	margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 60px; align-items: center;
}
.newsletter h2 {
	font-family: var(--font-sans); font-weight: 500;
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1; letter-spacing: -0.03em;
}
.newsletter h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--blue); }
.newsletter p { color: rgba(240,235,225,0.7); margin-top: 16px; max-width: 460px; }
.form-row {
	display: flex;
	border-bottom: 1px solid rgba(240,235,225,0.3);
	padding-bottom: 12px;
	transition: border-color .2s;
}
.form-row:focus-within { border-color: var(--blue); }
.form-row input {
	flex: 1; background: transparent; border: none;
	color: var(--paper); font: inherit; font-size: 18px;
	padding: 8px 0; outline: none;
}
.form-row input::placeholder { color: rgba(240,235,225,0.4); }
.form-row button {
	font-family: var(--font-mono); font-size: 12px;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--paper); transition: color .2s;
}
.form-row button:hover { color: var(--blue); }

/* ───── CONTACT FORM ───── */
.contact-page { padding: 60px var(--gutter); max-width: 800px; margin: 0 auto; }
.contact-page h1 {
	font-family: var(--font-sans); font-weight: 500;
	font-size: clamp(40px, 6vw, 72px);
	letter-spacing: -0.03em; line-height: 0.95;
	margin-bottom: 24px;
}
.contact-page h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.contact-page > p { font-size: 17px; color: var(--ink-soft); margin-bottom: 48px; max-width: 600px; }
.contact-form { display: flex; flex-direction: column; gap: 24px; }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-form label {
	display: block;
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 8px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--ink);
	padding: 8px 0;
	font-size: 17px;
	transition: border-color .2s;
	border-radius: 0;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: none;
	border-bottom-color: var(--blue);
}
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-form .honeypot { position: absolute; left: -9999px; }
.contact-form button[type=submit] {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 16px 24px;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	align-self: flex-start;
	transition: background .2s, gap .2s;
	border-radius: 999px;
}
.contact-form button[type=submit]:hover { background: var(--blue); color: var(--ink); gap: 18px; }
.form-success {
	background: var(--blue-soft);
	border: 1px solid var(--blue);
	color: var(--ink);
	padding: 16px 20px;
	border-radius: 4px;
	margin-bottom: 24px;
}

/* ───── FOOTER ───── */
.site-footer { background: var(--paper); border-top: 1px solid var(--ink); padding: 40px var(--gutter) 24px; }
.footer-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.word-mark {
	font-family: var(--font-sans); font-weight: 500;
	font-size: clamp(60px, 9vw, 160px);
	letter-spacing: -0.05em; line-height: 0.85;
}
.word-mark em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--blue); }
.footer-col h4 {
	font-family: var(--font-mono); font-size: 11px;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink-mute); margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { transition: color .15s; }
.footer-col a:hover { color: var(--blue); }
.legal-row {
	margin-top: 60px; padding-top: 20px;
	border-top: 1px solid var(--rule);
	max-width: var(--max);
	margin-left: auto; margin-right: auto;
	display: flex; justify-content: space-between;
	color: var(--ink-mute);
	font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
}

/* ───── 404 PAGE ───── */
.error-404 {
	min-height: 60vh;
	display: flex; flex-direction: column;
	align-items: center; justify-content: center;
	text-align: center;
	padding: 60px var(--gutter);
}
.error-404 h1 {
	font-family: var(--font-sans); font-weight: 500;
	font-size: clamp(80px, 14vw, 200px);
	letter-spacing: -0.05em; line-height: 0.85;
	margin-bottom: 24px;
}
.error-404 h1 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--blue); }
.error-404 p { font-size: 18px; color: var(--ink-soft); margin-bottom: 40px; max-width: 500px; }

/* ───── RESPONSIVE ───── */
@media (max-width: 980px) {
	.nav-row { grid-template-columns: 1fr auto; gap: 12px; }
	.primary-menu { display: none; position: fixed; top: 60px; left: 0; right: 0; background: var(--paper); flex-direction: column; padding: 32px var(--gutter); border-bottom: 1px solid var(--ink); z-index: 49; }
	.primary-menu.open { display: flex; }
	.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--ink); border-radius: 999px; }
	.archive-top { padding: 32px var(--gutter) 16px; }
	.archive-top-row { gap: 12px; }
	.archive-meta .count-num { font-size: 22px; }
	.grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
	.collabs-grid { grid-template-columns: repeat(2, 1fr); }
	.related-grid { grid-template-columns: repeat(2, 1fr); }
	.detail-title-block { grid-template-columns: 1fr; gap: 32px; }
	.about-prev { grid-template-columns: 1fr; gap: 32px; }
	.newsletter-inner { grid-template-columns: 1fr; gap: 32px; }
	.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.word-mark { grid-column: span 2; }
	.legal-row { flex-direction: column; gap: 8px; }
	.contact-form .field-row { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 560px) {
	.grid { grid-template-columns: 1fr; }
	.collabs-grid { grid-template-columns: 1fr 1fr; }
	.related-grid { grid-template-columns: 1fr; }
}

/* ───── DROPDOWN SUBMENUS ───── */
.primary-menu li { position: relative; }
.primary-menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--paper);
	border: 1px solid var(--ink);
	min-width: 200px;
	padding: 12px 0;
	list-style: none;
	z-index: 100;
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(10,10,8,0.06);
}
.primary-menu li:hover > .sub-menu,
.primary-menu li:focus-within > .sub-menu { display: block; }
.primary-menu .sub-menu li {
	padding: 0;
	margin: 0;
}
.primary-menu .sub-menu a {
	display: block;
	padding: 8px 18px;
	white-space: nowrap;
}
.primary-menu .sub-menu a::after { display: none; }
.primary-menu .sub-menu a:hover {
	background: var(--ink);
	color: var(--paper);
}
/* Hover bridge — invisible padding under parent so cursor can travel down */
.primary-menu li.menu-item-has-children::after {
	content: '';
	position: absolute;
	top: 100%; left: 0; right: 0;
	height: 12px;
}
/* Subtle indicator that an item has a dropdown */
.primary-menu li.menu-item-has-children > a::before {
	content: '↓';
	font-size: 8px;
	margin-right: 4px;
	opacity: 0.5;
	display: inline-block;
	vertical-align: 1px;
}
@media (max-width: 980px) {
	.primary-menu .sub-menu {
		position: static;
		display: block;
		transform: none;
		border: none;
		box-shadow: none;
		padding: 8px 0 0 16px;
		min-width: 0;
	}
	.primary-menu li.menu-item-has-children::after { display: none; }
}

/* ───── GENERIC FORM STYLING (catches CF7, Gravity Forms, native HTML, etc.) ───── */
.container form,
main form,
.wpcf7-form,
.gform_wrapper form {
	max-width: 600px;
	margin: 40px 0;
}
.container form p,
main form p,
.wpcf7-form p,
.gform_wrapper p {
	margin-bottom: 24px;
}
/* Labels — small caps style matching the rest of the site */
.container form label,
main form label,
.wpcf7-form label,
.gform_wrapper label {
	display: block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 8px;
}
/* Input fields */
.container input[type=text],
.container input[type=email],
.container input[type=tel],
.container input[type=url],
.container input[type=number],
.container input[type=search],
.container textarea,
.container select,
main input[type=text],
main input[type=email],
main input[type=tel],
main input[type=url],
main input[type=number],
main input[type=search],
main textarea,
main select,
.wpcf7-form-control:not([type=submit]):not([type=checkbox]):not([type=radio]),
.gform_wrapper input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--ink);
	padding: 8px 0;
	font-size: 17px;
	font-family: var(--font-sans);
	color: var(--ink);
	transition: border-color .2s;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.container input:focus,
.container textarea:focus,
.container select:focus,
main input:focus,
main textarea:focus,
main select:focus,
.wpcf7-form-control:focus,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: none;
	border-bottom-color: var(--blue);
}
.container textarea,
main textarea,
.wpcf7-form textarea,
.gform_wrapper textarea {
	min-height: 160px;
	resize: vertical;
}
/* Submit buttons */
.container input[type=submit],
.container button[type=submit],
main input[type=submit],
main button[type=submit],
.wpcf7-submit,
.gform_button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	background: var(--ink) !important;
	color: var(--paper) !important;
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	transition: background .2s, gap .2s, color .2s;
	border-radius: 999px;
	margin-top: 16px;
	width: auto !important;
}
.container input[type=submit]:hover,
.container button[type=submit]:hover,
main input[type=submit]:hover,
main button[type=submit]:hover,
.wpcf7-submit:hover,
.gform_button:hover {
	background: var(--blue) !important;
	color: var(--ink) !important;
	gap: 18px;
}
/* CF7 status messages */
.wpcf7-response-output {
	border-radius: 4px;
	padding: 16px 20px !important;
	margin-top: 24px !important;
	font-family: var(--font-sans) !important;
}
.wpcf7-mail-sent-ok { background: var(--blue-soft); border-color: var(--blue) !important; color: var(--ink); }
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng { background: #FFE3D5; border-color: #FF3B00 !important; color: var(--ink); }
.wpcf7-not-valid-tip {
	color: #FF3B00 !important;
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	letter-spacing: 0.05em;
	margin-top: 4px !important;
}

/* ───── PAGE CONTENT (Pages like About, Contact w/ plugin form, etc.) ───── */
.page-content {
	max-width: 800px;
	margin: 0 auto;
	padding: 60px var(--gutter);
}
.page-title {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin-bottom: 40px;
}
.page-title em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}

/* ───── CARD V2 — TWMBM-inspired spec card ───── */

/* Mono metadata header (above image): "№ 247    ● 2026" */
.card-meta-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--ink-mute);
	padding: 0 2px 10px;
	min-height: 16px; /* preserves layout when number is missing */
}
.card-num { color: var(--ink); }
.card-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.status-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--blue);
}

/* Corner crop marks on image (TWMBM signature element) */
.card-img .crop {
	position: absolute;
	width: 14px;
	height: 14px;
	z-index: 2;
	pointer-events: none;
}
.card-img .crop-tl { top: 8px;    left: 8px;    border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.card-img .crop-tr { top: 8px;    right: 8px;   border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.card-img .crop-bl { bottom: 8px; left: 8px;    border-bottom: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.card-img .crop-br { bottom: 8px; right: 8px;   border-bottom: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* Title row (replaces .card-info for v2 cards) */
.card-name-row {
	padding: 16px 0 10px;
	border-top: 1px solid var(--rule);
	margin-top: 12px;
}
.card-name-row .name {
	font-family: var(--font-sans);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--ink);
	line-height: 1.2;
}

/* Spec row with dotted leader: "CATEGORY ........ HARDWARE" */
.card-spec-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding: 0 2px;
}
.card-spec-row .spec-label { flex-shrink: 0; }
.card-spec-row .spec-leader {
	flex: 1;
	border-bottom: 1px dotted var(--rule);
	transform: translateY(-3px);
	min-width: 12px;
}
.card-spec-row .spec-value {
	flex-shrink: 0;
	color: var(--ink);
}

/* Card hover — subtle lift on image only, plus crop marks brighten */
.card:hover .crop { border-color: var(--blue); }

/* ───── CUSTOM LOGO (uploaded via Customizer → Site Identity) ───── */
.logo-custom {
	display: flex;
	align-items: center;
}
.logo-custom img {
	height: 40px;
	width: auto;
	max-width: 320px;
	display: block;
	object-fit: contain;
}
@media (max-width: 700px) {
	.logo-custom img { height: 32px; }
}

/* ───── FOOTER WORDMARK IMAGE (when uploaded via Customizer) ───── */
.word-mark img {
	max-width: 100%;
	height: auto;
	display: block;
	max-height: 160px;
	object-fit: contain;
}
@media (max-width: 700px) {
	.word-mark img { max-height: 100px; }
}

/* ───── PAGE CONTENT — EDITORIAL TYPOGRAPHY ───── */

/* Allow content to breathe wider than the title block */
.page-content {
	max-width: 1100px;
}
.page-content .detail-content {
	max-width: 720px;
	margin: 0;
}

/* First paragraph = lede style */
.page-content .detail-content > p:first-of-type {
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin-bottom: 32px;
	font-weight: 400;
	letter-spacing: -0.005em;
}

/* All other paragraphs */
.page-content .detail-content p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin-bottom: 22px;
	max-width: 65ch;
}

/* Headings inside page content */
.page-content .detail-content h2 {
	font-family: var(--font-sans);
	font-size: clamp(28px, 3.5vw, 40px);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin-top: 64px;
	margin-bottom: 20px;
	color: var(--ink);
}
.page-content .detail-content h2 em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}
.page-content .detail-content h3 {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-top: 48px;
	margin-bottom: 16px;
}

/* Image treatment — break out of text column */
.page-content .detail-content .wp-block-image,
.page-content .detail-content figure,
.page-content .detail-content img.alignnone,
.page-content .detail-content img.aligncenter {
	margin: 48px 0;
	max-width: 100%;
}

.page-content .detail-content figure img,
.page-content .detail-content .wp-block-image img,
.page-content .detail-content img {
	border-radius: 4px;
	display: block;
	height: auto;
}

/* Aligned images — float and wrap */
.page-content .detail-content .alignleft,
.page-content .detail-content img.alignleft {
	float: left;
	margin: 8px 40px 24px 0;
	max-width: 45%;
	clear: left;
}
.page-content .detail-content .alignright,
.page-content .detail-content img.alignright {
	float: right;
	margin: 8px 0 24px 40px;
	max-width: 45%;
	clear: right;
}
.page-content .detail-content .alignwide {
	max-width: 1000px;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 60px;
	margin-bottom: 60px;
}
.page-content .detail-content .alignfull {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	margin-top: 80px;
	margin-bottom: 80px;
	max-width: none;
}

/* Image captions */
.page-content .detail-content figcaption,
.page-content .detail-content .wp-caption-text {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-top: 12px;
}

/* Blockquote / pull quote */
.page-content .detail-content blockquote,
.page-content .detail-content .wp-block-quote {
	border-left: none;
	margin: 60px 0;
	padding: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.2;
	color: var(--ink);
	letter-spacing: -0.01em;
	max-width: 800px;
}
.page-content .detail-content blockquote p {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
	max-width: none;
}
.page-content .detail-content blockquote cite,
.page-content .detail-content .wp-block-quote cite {
	display: block;
	margin-top: 20px;
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* Lists inside content */
.page-content .detail-content ul,
.page-content .detail-content ol {
	margin: 0 0 24px 24px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: 65ch;
}
.page-content .detail-content li {
	margin-bottom: 8px;
}

/* Hr — section break */
.page-content .detail-content hr,
.page-content .detail-content .wp-block-separator {
	border: none;
	border-top: 1px solid var(--rule);
	margin: 80px 0;
	max-width: 100%;
}

/* Links inside content get the underline-grow treatment */
.page-content .detail-content a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.page-content .detail-content a:hover {
	color: var(--blue);
	border-color: var(--blue);
}

/* Strong / emphasis */
.page-content .detail-content strong { color: var(--ink); font-weight: 600; }
.page-content .detail-content em      { font-style: italic; }

/* Mobile: stop floating images */
@media (max-width: 700px) {
	.page-content .detail-content .alignleft,
	.page-content .detail-content .alignright,
	.page-content .detail-content img.alignleft,
	.page-content .detail-content img.alignright {
		float: none;
		margin: 32px 0;
		max-width: 100%;
	}
	.page-content .detail-content > p:first-of-type {
		font-size: 19px;
	}
}

/* ───── ABOUT PAGE TEMPLATE ─────────────────────────────────────── */
.about-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 40px var(--gutter) 80px;
}

/* Spec breadcrumb at top */
.about-breadcrumb {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--rule);
	margin-bottom: 40px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.about-breadcrumb .dim { color: var(--ink-mute); }

/* Hero figure */
.about-hero {
	margin: 0 0 60px;
}
.about-hero-img {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	background: var(--paper-dim);
	overflow: hidden;
	border-radius: 4px;
}
.about-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.about-hero-img .crop {
	position: absolute;
	width: 18px;
	height: 18px;
	z-index: 2;
	pointer-events: none;
}
.about-hero-img .crop-tl { top: 12px;    left: 12px;    border-top: 1px solid var(--paper); border-left: 1px solid var(--paper); }
.about-hero-img .crop-tr { top: 12px;    right: 12px;   border-top: 1px solid var(--paper); border-right: 1px solid var(--paper); }
.about-hero-img .crop-bl { bottom: 12px; left: 12px;    border-bottom: 1px solid var(--paper); border-left: 1px solid var(--paper); }
.about-hero-img .crop-br { bottom: 12px; right: 12px;   border-bottom: 1px solid var(--paper); border-right: 1px solid var(--paper); }
.about-hero figcaption {
	margin-top: 16px;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* Intro block */
.about-intro {
	max-width: 800px;
	margin: 0 0 80px;
}
.about-eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	margin-bottom: 24px;
}
.about-headline {
	font-family: var(--font-sans);
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.03em;
	color: var(--ink);
	margin: 0 0 32px;
}
.about-headline em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
}
.about-lede p {
	font-size: 22px;
	line-height: 1.5;
	color: var(--ink-soft);
	margin-bottom: 16px;
}
.about-lede strong { color: var(--ink); font-weight: 600; }

/* Section blocks (Story / Principles) */
.about-section {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 60px;
	border-top: 1px solid var(--rule);
	padding-top: 60px;
	margin-bottom: 80px;
}
.about-section-label {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	padding-top: 4px;
}
.about-section-body {
	max-width: 720px;
}
.about-section-body p {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ink-soft);
	margin-bottom: 20px;
}
.about-section-body strong { color: var(--ink); font-weight: 600; }
.about-section-body em { font-style: italic; }

/* Spec sheets — label/value list */
.about-spec-sheet {
	border-top: 1px solid var(--rule);
	padding-top: 40px;
	margin-bottom: 80px;
}
.about-spec-sheet .spec-title {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 32px;
}
.about-spec-sheet .spec-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	margin: 0;
}
.about-spec-sheet .spec-item {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px dotted var(--rule);
}
.about-spec-sheet .spec-item dt {
	flex-shrink: 0;
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
	min-width: 120px;
}
.about-spec-sheet .spec-item dd {
	margin: 0;
	font-size: 17px;
	color: var(--ink);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* Operating Principles */
.about-principles {
	display: flex;
	flex-direction: column;
	gap: 48px;
	max-width: 720px;
}
.principle {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 32px;
	align-items: start;
}
.principle-num {
	font-size: 32px;
	font-family: var(--font-mono);
	color: var(--blue);
	letter-spacing: -0.02em;
	line-height: 1;
}
.principle-title {
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0 0 12px;
	line-height: 1.2;
}
.principle-body {
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
}

/* Certification footer */
.about-cert {
	border-top: 1px solid var(--ink);
	padding-top: 60px;
	margin-top: 60px;
	text-align: center;
}
.cert-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	margin: 0 auto 24px;
	font-size: 20px;
	color: var(--ink);
}
.cert-text {
	font-family: var(--font-sans);
	font-size: 22px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 12px;
}
.cert-text strong { font-weight: 700; }
.cert-sub {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-mute);
}

/* Free-form content area */
.about-extra {
	max-width: 720px;
	margin: 80px 0 0;
	padding-top: 60px;
	border-top: 1px solid var(--rule);
}

@media (max-width: 800px) {
	.about-section {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.about-spec-sheet .spec-list {
		grid-template-columns: 1fr;
	}
	.principle {
		grid-template-columns: 40px 1fr;
		gap: 16px;
	}
	.principle-num { font-size: 24px; }
}