/*
Theme Name: Bean Ledger
Description: A reference theme for coffee origins and varieties. Ledger layout, hairline rules, and a single signal colour reserved for what is unverified or wrong.
Version: 1.0.0
Author: SitePlot Media
Text Domain: beanledger
*/

/* =========================================================================
   TOKENS

   ONE accent, and it is spent on a single job: cinnabar marks what is
   unverified, contested, missing or wrong. Nothing decorative is ever this
   colour, so when a reader sees it they have learned to read it.

   No brown anywhere. Every coffee site reaches for warm cream and terracotta,
   and this site's whole argument is that it is not that kind of coffee site.
   ====================================================================== */
:root {
	--paper:     #F4F6F4;
	--white:     #FFFFFF;
	--field:     #E8EDE8;
	--rule:      #CDD6CF;
	--rule-soft: #E0E6E1;
	--ink:       #16261D;
	--ink-2:     #33463B;
	--muted:     #5A6B60;
	--signal:    #C4451F;
	--signal-bg: #FBEDE9;

	--display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
	--body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	--gutter:  clamp(18px, 4vw, 40px);
	--shell:   1180px;
	--measure: 68ch;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.62;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--signal); }

:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: var(--paper); padding: 12px 18px;
}
.skip:focus { left: 0; }

/* =========================================================================
   ONE GRID

   Every full-width strip centres the SAME 1180px box with the SAME gutter.
   Two different centred boxes is how a logo and an H1 end up on different
   left edges while nothing looks full-bleed and nothing looks broken.
   ====================================================================== */
.wrap {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
	width: 100%;
}

/* =========================================================================
   MASTHEAD
   ====================================================================== */
.masthead {
	background: var(--ink);
	color: var(--paper);
	border-bottom: 3px solid var(--signal);
}
.masthead a { color: inherit; }
.masthead__bar {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 70px;
	padding-block: 12px;
}

.brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	white-space: nowrap;
}
.brand__mark { flex: 0 0 auto; display: block; }
.brand__name {
	font-family: var(--display);
	font-weight: 600;
	/* A longer site name is a LAYOUT change, not a content change. Clamped so
	   it scales instead of colliding with the navigation. */
	font-size: clamp(15px, 1.6vw, 20px);
	letter-spacing: -0.01em;
	line-height: 1.1;
}
.brand__name b { font-weight: 600; }
.brand__name span { color: var(--signal); }

.navtoggle {
	margin-left: auto;
	display: none;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1px solid rgba(244, 246, 244, 0.35);
	color: inherit;
	font: 500 13px/1 var(--body);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 9px 12px;
	cursor: pointer;
}

.nav { margin-left: auto; }
.nav ul {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav a {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	padding-block: 6px;
	border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav .current-menu-item > a {
	border-bottom-color: var(--signal);
	color: var(--paper);
}

@media (max-width: 900px) {
	.navtoggle { display: inline-flex; }
	.nav {
		display: none;
		flex-basis: 100%;
		margin-left: 0;
		border-top: 1px solid rgba(244, 246, 244, 0.18);
		padding-top: 12px;
		margin-top: 4px;
	}
	.nav.is-open { display: block; }
	.masthead__bar { flex-wrap: wrap; }
	.nav ul { flex-direction: column; gap: 2px; }
	.nav a { padding-block: 10px; border-bottom: 0; }
}

/* =========================================================================
   BREADCRUMBS
   ====================================================================== */
.crumbs { border-bottom: 1px solid var(--rule); background: var(--white); }
.crumbs ol {
	max-width: var(--shell);
	margin-inline: auto;
	padding: 11px var(--gutter);
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule); }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--ink); }

/* =========================================================================
   THE SHELL: a ledger column and a content column.

   The ledger column SCROLLS WITH THE PAGE. It is a column of the document,
   not a fixed rail beside it - a separately scrolling strip pinned to the
   window edge reads as browser chrome and pushes the things that matter to
   where nobody looks.
   ====================================================================== */
.shell {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 0 44px;
	align-items: start;
}
.shell > .col { min-width: 0; padding-block: 40px 64px; }
.shell > .ledger {
	padding-block: 40px 64px;
	border-right: 1px solid var(--rule);
	padding-right: 28px;
	margin-right: -28px;
}

@media (max-width: 900px) {
	.shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.shell > .ledger {
		border-right: 0;
		border-bottom: 1px solid var(--rule);
		padding: 26px 0 22px;
		margin-right: 0;
	}
	.shell > .col { padding-block: 26px 48px; }
}

/* Prose measure applies to PROSE ONLY. Tables and figures take the full
   column, and everything shares one left edge. */
.prose > p,
.prose > ul,
.prose > ol,
.prose > blockquote,
.lede { max-width: var(--measure); }

/* =========================================================================
   THE LEDGER COLUMN
   ====================================================================== */
.ledger__head {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 14px;
}
.ledger__list { margin: 0; }
.ledger__row { padding: 11px 0; border-top: 1px solid var(--rule-soft); }
.ledger__row:first-child { border-top: 0; padding-top: 0; }
.ledger__row dt {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 4px;
}
.ledger__row dd {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.ledger__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 0 24px;
	}
	.ledger__row:first-child { border-top: 1px solid var(--rule-soft); padding-top: 11px; }
}

/* =========================================================================
   TYPE
   ====================================================================== */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.14; }

.h1 {
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	margin: 0 0 18px;
}
.h1--sub { font-size: clamp(1.8rem, 4vw, 2.7rem); }

.prose h2 {
	font-size: clamp(1.35rem, 2.4vw, 1.72rem);
	margin: 2.4em 0 0.6em;
	padding-top: 0.7em;
	border-top: 1px solid var(--rule);
	max-width: var(--measure);
}
.prose h3 { font-size: 1.16rem; margin: 1.9em 0 0.4em; }
.prose p { margin: 0 0 1.1em; }
.prose > *:first-child { margin-top: 0; }

.lede {
	font-family: var(--display);
	font-size: clamp(1.14rem, 2.1vw, 1.42rem);
	line-height: 1.42;
	color: var(--ink-2);
	margin: 0 0 26px;
}

.kicker {
	font-family: var(--mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--signal);
	margin: 0 0 14px;
}

.section-head {
	margin: 0 0 22px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ink);
}
.section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.05rem); }
.section-head p { margin: 8px 0 0; color: var(--muted); max-width: var(--measure); font-size: 15.5px; }

/* =========================================================================
   THE PRICE LADDER — the signature
   ====================================================================== */
.hero {
	background: var(--ink);
	color: var(--paper);
	border-bottom: 3px solid var(--signal);
	padding-block: clamp(34px, 6vw, 62px);
}
.hero .ladder { margin: 0; }

.ladder { margin: 0 0 40px; }
.ladder__cap { display: block; margin: 0 0 26px; }
.ladder__caphead {
	display: block;
	font-family: var(--display);
	font-size: clamp(1.9rem, 4.6vw, 3.1rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin-bottom: 12px;
}
.ladder__note {
	display: block;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(244, 246, 244, 0.74);
}
.hero .ladder__note strong { color: var(--paper); }

/* ONE grid for the whole figure: label, plot, figure. The axis sits in the
   same plot column the bars do, so a tick and a bar of the same value line up
   by construction rather than by two rules that have to agree. */
.ladder { --lad-label: 250px; --lad-value: 108px; --lad-gap: 22px; }

.ladder__axis {
	display: grid;
	grid-template-columns: var(--lad-label) minmax(0, 1fr) var(--lad-value);
	gap: 0 var(--lad-gap);
}
.ladder__scale {
	grid-column: 2;
	position: relative;
	height: 20px;
	border-bottom: 1px solid rgba(244, 246, 244, 0.28);
}
.ladder__tick {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 0;
	border-left: 1px solid rgba(244, 246, 244, 0.22);
}
.ladder__ticklab {
	position: absolute;
	bottom: 2px;
	left: 0;
	transform: translateX(-50%);
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.04em;
	color: rgba(244, 246, 244, 0.62);
	white-space: nowrap;
}
/* First and last labels are ANCHORED, not centred: a centred label on the
   tick at 100% hangs half its width past the right edge. */
.ladder__tick.is-first .ladder__ticklab { transform: none; }
.ladder__tick.is-last .ladder__ticklab { transform: translateX(-100%); }

.ladder__rows { list-style: none; margin: 0; padding: 0; }
.ladder__row {
	display: grid;
	grid-template-columns: var(--lad-label) minmax(0, 1fr) var(--lad-value);
	gap: 4px var(--lad-gap);
	padding: 12px 0;
	border-bottom: 1px solid rgba(244, 246, 244, 0.14);
	align-items: center;
}
.ladder__label { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.ladder__name { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; }
.ladder__basis {
	display: block;
	margin-top: 3px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(244, 246, 244, 0.56);
}
.ladder__track {
	grid-column: 2;
	grid-row: 1;
	display: block;
	min-height: 11px;
}
.ladder__bar {
	display: block;
	height: 11px;
	background: rgba(244, 246, 244, 0.42);
	max-width: 100%;
}
.ladder__row--auction .ladder__bar { background: var(--signal); }

/* A basis with no bar is not an empty row. It says what it is quoted in and
   why it cannot share the axis, in the space the bar would have occupied. */
.ladder__nobar {
	display: block;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(244, 246, 244, 0.5);
	border-top: 1px dashed rgba(244, 246, 244, 0.3);
	padding-top: 5px;
}
.ladder__why {
	display: block;
	margin-top: 6px;
	color: rgba(244, 246, 244, 0.5);
	font-style: italic;
}
/* The row note is the sentence a reader is here for, so it is set at reading
   size and the sourcing line drops below it rather than leading. */
.ladder__note-row {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(244, 246, 244, 0.82);
	max-width: 68ch;
}
.ladder__src {
	display: block;
	margin-top: 7px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(244, 246, 244, 0.42);
}
/* The scale explanation is a footnote to the caption, not part of the pitch. */
.ladder__scalenote {
	display: block;
	margin-top: 8px;
	font-size: 13.5px;
	color: rgba(244, 246, 244, 0.55);
}
.hero .ladder__scalenote strong { color: rgba(244, 246, 244, 0.8); font-weight: 500; }
.col .ladder__note-row { color: var(--ink-2); }
.col .ladder__src { color: var(--muted); }
.col .ladder__scalenote { color: var(--muted); }
.ladder__row.is-unplottable .ladder__value { color: rgba(244, 246, 244, 0.66); font-size: 13px; }
.col .ladder__nobar { color: var(--muted); border-top-color: var(--rule); }
.col .ladder__why { color: var(--muted); }

.ladder__value {
	grid-column: 3;
	grid-row: 1;
	text-align: right;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
}
.ladder__per { opacity: 0.55; font-size: 11.5px; margin-left: 1px; }
.ladder__detail {
	grid-column: 2 / span 2;
	grid-row: 2;
	font-size: 12.5px;
	line-height: 1.45;
	color: rgba(244, 246, 244, 0.6);
	padding-top: 4px;
}
.ladder__foot {
	margin: 22px 0 0;
	max-width: 62ch;
	font-size: 15px;
	color: rgba(244, 246, 244, 0.8);
}
.hero .ladder__foot strong { color: var(--signal); font-size: 17px; }

@media (max-width: 860px) {
	.ladder { --lad-label: 0px; --lad-value: 96px; --lad-gap: 14px; }
	.ladder__axis { grid-template-columns: minmax(0, 1fr) var(--lad-value); }
	.ladder__scale { grid-column: 1; }
	.ladder__row { grid-template-columns: minmax(0, 1fr) var(--lad-value); }
	.ladder__label { grid-column: 1 / span 2; grid-row: 1; }
	.ladder__track { grid-column: 1; grid-row: 2; }
	.ladder__value { grid-column: 2; grid-row: 2; }
	.ladder__detail { grid-column: 1 / span 2; grid-row: 3; }
}
}

/* Ladder rendered OUTSIDE the dark hero (methodology page). */
.col .ladder__note,
.col .ladder__basis,
.col .ladder__detail,
.col .ladder__foot { color: var(--muted); }
.col .ladder__caphead { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.col .ladder__scale { border-bottom-color: var(--rule); }
.col .ladder__tick { border-left-color: var(--rule); }
.col .ladder__ticklab { color: var(--muted); }
.col .ladder__row { border-bottom-color: var(--rule-soft); }
.col .ladder__bar { background: var(--ink-2); }
.col .ladder__row--auction .ladder__bar { background: var(--signal); }
.col .ladder__foot strong { color: var(--signal); }

/* =========================================================================
   BANDS — separated by rules, not boxes
   ====================================================================== */
.band { border-top: 1px solid var(--rule); padding-block: clamp(38px, 5vw, 60px); }
.band:first-of-type { border-top: 0; }
.band--field { background: var(--field); }

/* =========================================================================
   THE WRONGS LEDGER
   ====================================================================== */
.wrongs { list-style: none; margin: 0; padding: 0; counter-reset: wrong; }
.wrongs__item {
	counter-increment: wrong;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 8px 40px;
	padding: 22px 0;
	border-top: 1px solid var(--rule);
}
.wrongs__item:first-child { border-top: 2px solid var(--ink); }
.wrongs__claim { margin: 0; }
.wrongs__claim::before {
	content: counter(wrong, decimal-leading-zero);
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--signal);
	margin-bottom: 7px;
}
.wrongs__strike {
	font-family: var(--display);
	font-size: clamp(1.1rem, 2.1vw, 1.42rem);
	line-height: 1.24;
	text-decoration: line-through;
	text-decoration-color: var(--signal);
	text-decoration-thickness: 2px;
	color: var(--muted);
}
.wrongs__truth { margin: 0; font-size: 15.5px; line-height: 1.6; }

@media (max-width: 760px) {
	.wrongs__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* =========================================================================
   METHOD
   ====================================================================== */
.method {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0 40px;
}
.method__item { padding: 20px 0; border-top: 1px solid var(--rule); }
.method__title { margin: 0 0 7px; font-size: 1.12rem; }
.method__body { margin: 0; font-size: 15px; color: var(--ink-2); }

/* =========================================================================
   BASES / PROTOCOLS
   ====================================================================== */
.bases { list-style: none; margin: 0; padding: 0; counter-reset: basis; }
.bases__item {
	counter-increment: basis;
	padding: 20px 0;
	border-top: 1px solid var(--rule);
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: 0 18px;
}
.bases__item::before {
	content: counter(basis);
	font-family: var(--mono);
	font-size: 13px;
	color: var(--signal);
	padding-top: 4px;
}
.bases__title { margin: 0 0 4px; font-size: 1.12rem; grid-column: 2; }
.bases__who { margin: 0 0 7px; grid-column: 2; font-size: 14px; font-family: var(--mono); color: var(--muted); }
.bases__note { margin: 0; grid-column: 2; font-size: 15px; max-width: var(--measure); }

.protocols { margin: 0; }
.protocols__row { padding: 16px 0; border-top: 1px solid var(--rule); }
.protocols dt { font-family: var(--display); font-size: 1.06rem; font-weight: 600; margin-bottom: 4px; }
.protocols dd { margin: 0; font-size: 15px; color: var(--ink-2); max-width: var(--measure); }

/* =========================================================================
   TABLES
   ====================================================================== */
.cb-tablewrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.cb-table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	font-size: 14.5px;
}
.cb-table__cap {
	caption-side: top;
	text-align: left;
	padding: 0 0 14px;
	font-size: 14px;
	color: var(--muted);
	max-width: var(--measure);
}
.cb-table th, .cb-table td {
	text-align: left;
	vertical-align: top;
	padding: 12px 16px 12px 0;
	border-bottom: 1px solid var(--rule-soft);
}
.cb-table thead th {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 2px solid var(--ink);
	padding-bottom: 9px;
}
.cb-table tbody th { font-weight: 600; font-family: var(--display); font-size: 1.02rem; }
.cb-table tbody tr:hover { background: var(--white); }
.cb-sub {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	color: var(--muted);
	font-weight: 400;
	font-family: var(--mono);
}
.cb-gap, .gap { color: var(--signal); font-family: var(--mono); font-size: 12.5px; }
.cb-empty { color: var(--muted); font-style: italic; }

.cb-tablewrap--prose .cb-table,
.prose table { min-width: 560px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.prose th, .prose td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.prose thead th { border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; }

/* =========================================================================
   CHIPS AND TAGS — colour is never the only carrier
   ====================================================================== */
.chip, .basis, .evi, .tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 4px 8px;
	border: 1px solid var(--rule);
	background: var(--white);
	white-space: nowrap;
	margin: 0 4px 4px 0;
}
.tag { text-transform: none; letter-spacing: 0.01em; font-size: 11.5px; color: var(--ink-2); }

.chip--declared, .chip--mixed, .chip--mislabeled, .chip--contested,
.chip--st-contested, .evi--secondary {
	color: var(--signal);
	border-color: var(--signal);
	background: var(--signal-bg);
}
.chip--verified, .evi--primary {
	color: var(--ink);
	border-color: var(--ink);
	background: var(--white);
}
.chip--evidence .chip__n { font-weight: 500; }
.chip--evidence { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }
.chip--evidence.is-full { color: var(--ink); border-color: var(--ink); background: var(--white); }

.basis--auction { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }

/* =========================================================================
   WATCH-OUT CALLOUT
   ====================================================================== */
.watch {
	border-left: 3px solid var(--signal);
	background: var(--signal-bg);
	padding: 18px 22px;
	margin: 28px 0;
	max-width: var(--measure);
}
.watch__head {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--signal);
	margin: 0 0 8px;
}
.watch p { margin: 0; font-size: 15.5px; line-height: 1.58; }

/* =========================================================================
   CARDS-THAT-ARE-NOT-CARDS: ruled rows
   ====================================================================== */
.rows { list-style: none; margin: 0; padding: 0; }
.rows__item { padding: 20px 0; border-top: 1px solid var(--rule); }
.rows__item:first-child { border-top: 2px solid var(--ink); }
.rows__title { margin: 0 0 5px; font-size: 1.2rem; }
.rows__title a { text-decoration: none; }
.rows__title a:hover { text-decoration: underline; }
.rows__meta { margin: 0 0 8px; }
.rows__blurb { margin: 0; font-size: 15px; color: var(--ink-2); max-width: var(--measure); }

/* =========================================================================
   FORMS AND BUTTONS
   ====================================================================== */
.btn {
	display: inline-block;
	font: 500 14px/1 var(--body);
	letter-spacing: 0.04em;
	padding: 13px 22px;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	cursor: pointer;
	text-decoration: none;
}
.btn:hover { background: var(--signal); border-color: var(--signal); color: var(--white); }
.btn--ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); border-color: currentColor; color: inherit; }

.cb-form { max-width: 620px; }
.cb-form__row { margin: 0 0 18px; display: block; }
.cb-form__row label {
	display: block;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 6px;
}
.cb-form input[type="text"],
.cb-form input[type="email"],
.cb-form select,
.cb-form textarea {
	width: 100%;
	font: 400 16px/1.5 var(--body);
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--rule);
	padding: 11px 13px;
	border-radius: 0;
}
.cb-form textarea { resize: vertical; }
.cb-form [aria-invalid="true"] { border-color: var(--signal); }
.cb-form__err { display: block; margin-top: 5px; color: var(--signal); font-size: 13.5px; }
.cb-form__hp { position: absolute; left: -9999px; }
.cb-form__act { margin-top: 22px; }

.notice { padding: 14px 18px; margin: 0 0 22px; border-left: 3px solid var(--ink); background: var(--white); max-width: 620px; }
.notice--bad { border-left-color: var(--signal); background: var(--signal-bg); }

.searchform { display: flex; gap: 0; max-width: 420px; }
.searchform input[type="search"] {
	flex: 1 1 auto; min-width: 0;
	font: 400 16px/1.5 var(--body);
	border: 1px solid var(--rule); border-right: 0; padding: 11px 13px;
	background: var(--white); color: var(--ink); border-radius: 0;
}

/* =========================================================================
   CONSENT
   ====================================================================== */
.consent {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	background: var(--ink);
	color: var(--paper);
	border-top: 3px solid var(--signal);
}
.consent[hidden] { display: none; }
.consent__inner {
	max-width: var(--shell);
	margin-inline: auto;
	padding: 16px var(--gutter);
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}
.consent__text { margin: 0; flex: 1 1 380px; font-size: 14px; line-height: 1.5; }
.consent__text a { color: var(--paper); }
.consent__acts { display: flex; gap: 10px; flex: 0 0 auto; }

/* =========================================================================
   ADS
   ====================================================================== */
.adbox { margin: 34px 0; min-height: 100px; }
.adbox--held { background: var(--field); border: 1px dashed var(--rule); }

/* =========================================================================
   FOOTER
   ====================================================================== */
.site-footer {
	background: var(--ink);
	color: rgba(244, 246, 244, 0.78);
	border-top: 3px solid var(--signal);
	padding-block: 48px 32px;
	margin-top: 0;
	font-size: 14.5px;
}
.site-footer a { color: var(--paper); }
.footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
	gap: 34px 44px;
}
.footer__head {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: rgba(244, 246, 244, 0.5);
	margin: 0 0 12px;
}
.footer__grid ul { list-style: none; margin: 0; padding: 0; }
.footer__grid li { margin-bottom: 8px; }
.footer__blurb { margin: 0; max-width: 46ch; line-height: 1.55; }
.footer__legal {
	margin: 36px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(244, 246, 244, 0.16);
	text-align: center;
	font-size: 13px;
	color: rgba(244, 246, 244, 0.55);
}
@media (max-width: 760px) {
	.footer__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}

/* =========================================================================
   MOTION
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}