/* ==========================================================================
   Common Strangers — Components
   Buttons, forms, cards, tags/badges, toasts, cookie banner, nav.
   Everything speaks the bevel + mono language.
   ========================================================================== */

/* --- Buttons --- */
.cs-btn {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	font-family: var(--font); font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	padding: var(--sp-2) var(--sp-4);
	background: var(--frame); color: var(--paper);
	box-shadow: var(--bevel-raised); border: 0; cursor: pointer;
	line-height: 1;
}
.cs-btn:hover { background: var(--bevel-light); text-decoration: none; }
.cs-btn:active { box-shadow: var(--bevel-pressed); }
.cs-btn--primary { background: var(--pink); color: var(--ink); }
.cs-btn--primary:hover { background: var(--pink); filter: brightness(1.08); }
.cs-btn--secondary { background: var(--frame); }
.cs-btn--icon { padding: var(--sp-2); width: 32px; height: 32px; justify-content: center; }

/* --- Forms --- */
.cs-field { margin-bottom: var(--sp-4); }
.cs-field > label {
	display: block; margin-bottom: var(--sp-1);
	font-size: var(--fs-label); font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-label); color: var(--muted);
}
.cs-input, .cs-textarea, .cs-select {
	width: 100%; font-family: var(--font); font-size: var(--fs-body);
	color: var(--paper); background: var(--ink);
	padding: var(--sp-2) var(--sp-3); border: 0;
	box-shadow: var(--bevel-pressed);
}
.cs-input:focus, .cs-textarea:focus, .cs-select:focus {
	outline: 2px solid var(--orange); outline-offset: -2px;
}
.cs-textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }

.cs-checkbox { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.cs-checkbox input { width: 16px; height: 16px; accent-color: var(--pink); }

/* --- Custom <select> (enhanced) --- */
.cs-cselect { position: relative; width: 100%; }
.cs-cselect select { /* native kept for submit, visually hidden */
	position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.cs-cselect__btn {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
	font-family: var(--font); font-size: var(--fs-body); color: var(--paper);
	background: var(--ink); box-shadow: var(--bevel-pressed);
	padding: var(--sp-2) var(--sp-3); border: 0; cursor: pointer; text-align: left;
}
.cs-cselect__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.cs-cselect__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-cselect__caret {
	flex: 0 0 auto; width: 0; height: 0;
	border-left: 5px solid transparent; border-right: 5px solid transparent;
	border-top: 6px solid var(--muted);
}
.cs-cselect__btn[aria-expanded="true"] .cs-cselect__caret { border-top-color: var(--orange); }

.cs-cselect__menu {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 700;
	margin: 2px 0 0; padding: 2px; list-style: none;
	background: var(--body); box-shadow: var(--bevel-raised), var(--window-shadow);
	max-height: 280px; overflow: auto;
}
.cs-cselect__opt {
	display: flex; align-items: center; gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); color: var(--paper); cursor: pointer;
}
.cs-cselect__opt:hover,
.cs-cselect__opt.is-active { background: var(--frame); color: var(--orange); }
.cs-cselect__check { flex: 0 0 auto; width: 1ch; color: var(--orange); }
.cs-cselect__opt[aria-selected="true"] .cs-cselect__check::before { content: "\2713"; }

/* --- Tags & badges --- */
.cs-tag {
	display: inline-block; font-size: var(--fs-micro); font-weight: 500;
	text-transform: uppercase; letter-spacing: 0.08em;
	padding: 2px var(--sp-2); background: var(--frame); color: var(--muted);
}
.cs-badge {
	display: inline-block; font-size: var(--fs-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.08em;
	padding: 2px var(--sp-2);
}
.cs-badge--reader      { background: var(--frame);  color: var(--muted); }
.cs-badge--contributor { background: var(--orange); color: var(--ink); }
.cs-badge--moderator   { background: var(--pink);   color: var(--ink); }

/* --- Post preview card (text / photo / audio / video variants) --- */
.cs-card {
	background: var(--body); box-shadow: var(--bevel-raised);
	padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.cs-card__kicker { color: var(--orange); }
.cs-card__title { font-size: var(--fs-heading); font-weight: 700; margin: var(--sp-1) 0; }
.cs-card__meta { color: var(--faint); font-size: var(--fs-micro); }
.cs-card__media { margin-top: var(--sp-2); box-shadow: var(--bevel-pressed); }

/* --- Audio player shell --- */
.cs-audio { width: 100%; margin-top: var(--sp-2); }

/* --- Pagination / load-more --- */
.cs-loadmore { display: flex; justify-content: center; padding: var(--sp-4) 0; }

/* --- Top nav + themes table --- */
/* Top nav floats over the desktop — no bar, no backing. Only the buttons and
   the (inner-page) logo catch clicks; the empty strip lets the desktop through. */
.cs-topnav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 500;
	display: flex; align-items: center; gap: var(--sp-4);
	height: var(--topbar-h); padding: 0 var(--sp-4);
	background: transparent; box-shadow: none;
	pointer-events: none;
}
.cs-topnav > * { pointer-events: auto; }
.cs-topnav__brand { display: inline-flex; align-items: center; }
.cs-topnav__logo {
	height: 48px; width: auto; display: block;
	background: #000; box-shadow: var(--bevel-raised);
}
.cs-topnav__links { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; }
/* Desktop: the persist/collapse wrappers flatten (display:contents) so the flat
   run of links can be ordered inline exactly as before — Home · About · Explore
   · Search · Submit · Sign in. They become real containers again on mobile. */
.cs-topnav__persist,
.cs-topnav__collapse { display: contents; }
.cs-nav--auth { order: 6; }
.cs-nav--submit { order: 7; }   /* Submit sits after Sign in */
.cs-nav--shop { order: 8; }   /* plain text button, sized like the rest */
/* Toggle + close are mobile-only. Toggle sits after Submit in the bar. */
.cs-navtoggle,
.cs-navclose { display: none; }
.cs-navtoggle { order: 9; }
/* On the home page the logo lives in the left column → hide the top-bar brand (desktop only). */
.cs-topnav--home .cs-topnav__brand { display: none; }
/* Nav items read as bevelled buttons in the house language. */
.cs-topnav__links a,
.cs-navtoggle {
	display: inline-flex; align-items: center; line-height: 1;
	color: var(--paper); font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	padding: var(--sp-2) var(--sp-3);
	background: var(--frame);
	box-shadow: var(--bevel-raised);
	font-family: var(--font); border: 0; cursor: pointer;
}
.cs-topnav__links a:hover,
.cs-navtoggle:hover { background: var(--bevel-light); color: var(--paper); text-decoration: none; }
.cs-topnav__links a:active,
.cs-navtoggle:active { box-shadow: var(--bevel-pressed); }
/* The shared button rule above re-set display; keep the toggle mobile-only. */
.cs-navtoggle { display: none; }
/* Sign in / current page gets the pink primary treatment. */
.cs-topnav__links a[aria-current="page"],
.cs-topnav__links a.cs-nav--cta { background: var(--pink); color: var(--ink); }
.cs-topnav__links a[aria-current="page"]:hover,
.cs-topnav__links a.cs-nav--cta:hover { color: var(--ink); filter: brightness(1.08); }
/* Submit gets the orange (yellow) accent to stand apart from the pink CTA. */
.cs-topnav__links a.cs-nav--submit { background: var(--orange); color: var(--ink); }
.cs-topnav__links a.cs-nav--submit:hover { color: var(--ink); filter: brightness(1.08); }

/* Left menu column — a docked window from the very top: square logo tile,
   grey title strip, bevelled row buttons. Width == logo square side. */
.cs-themes {
	position: fixed; top: 0; left: 0; bottom: 0; z-index: 450;
	width: var(--leftcol-w); display: flex; flex-direction: column;
	background: var(--frame); box-shadow: var(--bevel-raised);
}
/* Logo tile: fills the column width; height follows the logo's own aspect
   (1312×788) so there are no black bands. Black tile, bevelled. */
.cs-themes__logo {
	flex: 0 0 auto; display: block;
	width: 100%; aspect-ratio: 855 / 718;
	background: #000; box-shadow: var(--bevel-raised);
	padding: 1.5rem; box-sizing: border-box;   /* breathing room around the mark (24px) — logo a touch larger */
}
.cs-themes__logo img {
	width: 100%; height: 100%; object-fit: contain; display: block;
}
.cs-themes__title {
	flex: 0 0 auto; height: var(--titlebar-h);
	display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-3);
	background: var(--faint); color: var(--ink);
	font-size: var(--fs-wintitle); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-wintitle);
}
/* Collapse control in the MENU title bar; the reveal tab lives off-panel. */
.cs-themes__collapse {
	border: 0; cursor: pointer; background: transparent; color: var(--ink);
	font-size: var(--fs-label); line-height: 1; padding: var(--sp-1) var(--sp-1);
}
.cs-themes__collapse:hover { color: var(--pink); }
.cs-themes__reveal,
.cs-themes__menubtn { display: none; }
@media (min-width: 1024px) {
	html.cs-sidebar-off .cs-themes { display: none; }
	/* Collapsed: the logo sits in the top-left corner, same height as the agenda
	   bar; the ticker shifts right to sit beside it. A Menu button below reopens. */
	html.cs-sidebar-off .cs-themes__reveal {
		display: block;
		position: fixed; top: 0; left: 0; z-index: 501;
		width: var(--collapsed-brand-w); height: var(--agenda-bar-h);
		border: 0; cursor: pointer; padding: 8px; box-sizing: border-box; overflow: hidden;
		background: #000; box-shadow: var(--bevel-raised);
	}
	.cs-themes__reveal-logo { width: 100%; height: 100%; object-fit: contain; display: block; }
	/* The Menu button — reopens the panel, sits just under the corner logo. */
	html.cs-sidebar-off .cs-themes__menubtn {
		display: inline-flex; align-items: center; gap: var(--sp-1);
		position: fixed; top: calc(var(--agenda-bar-h) + var(--sp-2)); left: 0; z-index: 460;
		border: 0; cursor: pointer; padding: var(--sp-2) var(--sp-3);
		background: var(--frame); color: var(--paper); box-shadow: var(--bevel-raised);
		font: 700 var(--fs-label)/1 var(--font);
		text-transform: uppercase; letter-spacing: var(--tr-label);
	}
	html.cs-sidebar-off .cs-themes__menubtn:hover { color: var(--orange); }
}
@media (max-width: 1023.98px) { .cs-themes__collapse { display: none; } }
/* Countdown to the next publication — a fixed tile under the MENU title. */
.cs-countdown {
	flex: 0 0 auto;
	padding: var(--sp-3) var(--sp-2);
	background: var(--body);
	box-shadow: var(--bevel-raised);
	text-align: center;
	border-bottom: 1px solid var(--frame);
}
.cs-countdown__label {
	font-size: var(--fs-label); font-weight: 500;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	color: var(--muted); margin-bottom: var(--sp-1);
}
.cs-countdown__time {
	font-size: var(--fs-wintitle); font-weight: 700;
	color: var(--orange);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.cs-countdown.is-live .cs-countdown__time { color: var(--pink); }
/* Teaser: what the next scheduled drop actually is (title + theme). */
.cs-countdown__next {
	margin-top: var(--sp-2); padding-top: var(--sp-2);
	border-top: 1px solid var(--frame);
	display: flex; flex-direction: column; gap: 2px;
}
.cs-countdown__theme {
	font-size: var(--fs-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	color: var(--muted);
}
.cs-countdown__theme .cs-themes__slash { color: var(--orange); }
.cs-countdown__title {
	font-size: var(--fs-data); font-weight: 500; color: var(--paper);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.cs-themes__body {
	flex: 1 1 auto; min-height: 0;
	background: var(--body); padding: var(--sp-2);
	display: flex; flex-direction: column; gap: var(--sp-2);
}
.cs-themes__item {
	display: flex; align-items: baseline; gap: var(--sp-1);
	width: 100%; text-align: left;
	font-family: var(--font); font-size: var(--fs-data); font-weight: 500;
	color: var(--paper); background: var(--frame);
	box-shadow: var(--bevel-raised); border: 0; cursor: pointer;
	padding: var(--sp-2) var(--sp-3); line-height: 1.3;
	text-decoration: none;                         /* row buttons, never underlined */
}
.cs-themes__item:hover,
.cs-themes__item:focus { text-decoration: none; }
.cs-themes__icon { flex: 0 0 auto; width: 17px; height: 17px; align-self: center; color: var(--muted); }
.cs-themes__item:hover .cs-themes__icon { color: var(--orange); }
.cs-themes__slash { color: var(--faint); font-weight: 700; }
/* System windows (Latest / Agenda) — pink slash marks them apart from themes. */
.cs-themes__item--sys .cs-themes__slash { color: var(--pink); }
.cs-themes__sep {
	margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-2) var(--sp-1);
	border-top: 1px solid var(--frame);
	font-size: var(--fs-label); font-weight: 500; text-transform: uppercase;
	letter-spacing: var(--tr-label); color: var(--muted);
}
.cs-themes__item:hover { background: var(--bevel-light); color: var(--orange); }
.cs-themes__item:hover .cs-themes__slash { color: var(--orange); }
.cs-themes__item:active { box-shadow: var(--bevel-pressed); }
.cs-themes__item.is-open { color: var(--orange); }          /* theme window is open */
.cs-themes__item.is-open .cs-themes__slash { color: var(--orange); }

/* Expandable category + its nested subcategories. */
.cs-cat__chev { margin-left: auto; font-size: var(--fs-micro); color: var(--faint); }
.cs-themes__item:hover .cs-cat__chev { color: var(--orange); }   /* match the hover text, not the hover bg */
.cs-cat__toggle.is-expanded { color: var(--paper); }
.cs-cat__toggle.is-expanded .cs-cat__chev { transform: rotate(90deg); color: var(--orange); }
.cs-cat__subs { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: var(--sp-3); }
.cs-cat__subs[hidden] { display: none; } /* let the hidden attribute collapse the group */
.cs-themes__sub { background: var(--body); font-weight: 400; }
.cs-themes__sub .cs-themes__slash { color: var(--faint); }

/* Radio — pulled out of the themes list and pinned to the bottom of the column,
   set apart by a gap. A link out to Parea Radio, carrying its hand-drawn logo. */
.cs-themes__radio {
	display: flex; align-items: center; gap: var(--sp-2);
	margin: var(--sp-3) var(--sp-2) var(--sp-2);   /* top gap = breathing room from the themes */
	padding: var(--sp-2) var(--sp-3);
	background: var(--ink);            /* darker tile so the blue logo pops */
	box-shadow: var(--bevel-raised); text-decoration: none;
	color: var(--paper); line-height: 1.3;
	font-family: var(--font); font-size: var(--fs-data); font-weight: 500;
}
.cs-themes__radiologo {
	flex: 0 0 auto; width: 34px; height: auto; display: block;
}
.cs-themes__radiolabel { flex: 1 1 auto; display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.cs-themes__radioext { flex: 0 0 auto; color: var(--muted); font-weight: 700; }
.cs-themes__radio:hover { background: var(--bevel-light); color: var(--orange); }
.cs-themes__radio:active { box-shadow: var(--bevel-pressed); }
.cs-themes__radio:hover .cs-themes__radioext { color: var(--orange); }

/* --- Toasts --- */
.cs-toasts {
	position: fixed; bottom: var(--sp-4); right: var(--sp-4); z-index: 900;
	display: flex; flex-direction: column; gap: var(--sp-2);
}
.cs-toast {
	background: var(--frame); color: var(--paper);
	box-shadow: var(--bevel-raised); padding: var(--sp-3) var(--sp-4);
	font-size: var(--fs-data); max-width: 320px;
}
.cs-toast--success { border-left: 3px solid var(--orange); }
.cs-toast--error { border-left: 3px solid var(--red); }

/* --- Single publication / event page ---
   Content sits in raised panels (--body) on the darker page (--ink); fields
   inside recess to --ink, so blocks and fields read as distinct layers. */
.cs-single {
	max-width: 900px; margin: 0 auto;
	padding: calc(var(--topbar-h) + var(--sp-5)) var(--sp-5) var(--sp-8);
}
.cs-single__article {
	background: var(--body); box-shadow: var(--bevel-raised);
	padding: var(--sp-6);
}
.cs-single__head {
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--frame);
}
.cs-single__meta { display: flex; gap: var(--sp-2); color: var(--faint); margin-bottom: var(--sp-2); }
.cs-single__meta .cs-card__kicker { color: var(--orange); }
.cs-single__by { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.cs-single__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.cs-single__media { margin: var(--sp-5) 0; }
.cs-gallery { display: grid; gap: var(--sp-3); }
.cs-embed iframe, .cs-single__media iframe {
	width: 100%; aspect-ratio: 16 / 9; height: auto; box-shadow: var(--bevel-pressed);
}
.cs-longform { max-width: var(--measure); }
.cs-longform p { margin: 0 0 var(--sp-4); }
.cs-single__signin { margin-top: var(--sp-6); }

/* --- Comments --- */
.cs-comments {
	margin-top: var(--sp-4);
	background: var(--body); box-shadow: var(--bevel-raised);
	padding: var(--sp-6);
}
.cs-comments__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
/* Each comment recesses to --ink so it separates from the panel it sits on. */
.cs-comment {
	background: var(--ink); box-shadow: var(--bevel-pressed);
	padding: var(--sp-3); margin-bottom: var(--sp-3);
}
.cs-comment .children { list-style: none; margin: var(--sp-3) 0 0; padding-left: var(--sp-4); }
.cs-comment__meta { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-1); }
.cs-comment__author { color: var(--paper); font-weight: 700; }
.cs-comments .comment-respond { margin-top: var(--sp-4); }
.cs-comments .comment-reply-link { color: var(--orange); font-size: var(--fs-micro); }
.cs-comments__signin { margin-top: var(--sp-4); }

/* --- Article rendered inside a window --- */
.cs-post__meta { color: var(--faint); margin-bottom: var(--sp-1); }
.cs-post__meta .cs-card__kicker { color: var(--orange); }
.cs-post__title { font-size: var(--fs-heading); font-weight: 700; margin: 0 0 var(--sp-2); }
.cs-post__by { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cs-post__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.cs-post__body { margin-top: var(--sp-3); }
.cs-post__body img { margin: var(--sp-3) 0; box-shadow: var(--bevel-pressed); }
.cs-post__more { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--frame); }

/* In-window comments */
.cs-wc { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--frame); }
.cs-wc__title { margin-bottom: var(--sp-3); }
.cs-wc__list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.cs-wc__form { display: block; margin-top: var(--sp-3); }
.cs-wc__form .cs-textarea { min-height: 5rem; margin-bottom: var(--sp-2); }
.cs-wc__actions { display: flex; align-items: center; gap: var(--sp-3); }
.cs-wc__note { flex: 1; }

/* --- Open-windows counter (bottom-right) --- */
.cs-winbar {
	position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 600;
	display: inline-flex; align-items: center; gap: var(--sp-2);
	background: var(--frame); color: var(--muted);
	box-shadow: var(--bevel-raised);
	padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
	font-size: var(--fs-micro); letter-spacing: 0.04em;
	user-select: none;
}
.cs-winbar[hidden] { display: none; }
.cs-winbar__count { white-space: nowrap; }
/* Sweep-all — a fun broom button; closes every window at once. */
.cs-winbar__sweep {
	flex: 0 0 auto; border: 0; cursor: pointer;
	background: var(--body); box-shadow: var(--bevel-raised);
	padding: 2px var(--sp-2); line-height: 1;
	font-size: var(--fs-label);
}
.cs-winbar__sweep:hover { background: var(--bevel-light); }
.cs-winbar__sweep:active { box-shadow: var(--bevel-pressed); }
@media (max-width: 1023.98px) { .cs-winbar { display: none; } } /* windows off on mobile */

/* --- Wallpaper picker — corner control + thumbnail gallery (desktop only) --- */
.cs-wallpaper {
	position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 610;
	display: flex; flex-direction: row; align-items: center; gap: var(--sp-2);
}
/* The open-windows tally is relocated in here (JS) so it shares the row. */
.cs-wallpaper .cs-winbar { position: static; right: auto; bottom: auto; z-index: auto; }
.cs-wallpaper__btn {
	display: inline-flex; align-items: center; gap: var(--sp-2);
	background: var(--frame); color: var(--paper);
	box-shadow: var(--bevel-raised); border: 0; cursor: pointer;
	font-family: var(--font); font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	padding: var(--sp-2) var(--sp-3);
}
.cs-wallpaper__btn:active { box-shadow: var(--bevel-pressed); }
.cs-wallpaper__btn[aria-expanded="true"] { background: var(--pink); color: var(--ink); }
.cs-wallpaper__panel {
	position: absolute; right: 0; bottom: calc(100% + var(--sp-2));
	width: min(320px, 74vw);
	background: var(--frame); box-shadow: var(--bevel-raised), var(--window-shadow);
}
.cs-wallpaper__title {
	height: var(--titlebar-h); display: flex; align-items: center;
	padding: 0 var(--sp-3); background: var(--faint); color: var(--ink);
	font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
}
.cs-wallpaper__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2);
	padding: var(--sp-2); max-height: 46vh; overflow: auto; background: var(--body);
}
.cs-wallpaper__thumb {
	aspect-ratio: 4 / 3; border: 0; cursor: pointer; padding: 0;
	background-size: cover; background-position: center; background-color: var(--ink);
	box-shadow: var(--bevel-raised);
}
.cs-wallpaper__thumb:hover { filter: brightness(1.1); }
.cs-wallpaper__thumb.is-active { outline: 2px solid var(--orange); outline-offset: -2px; }
.cs-wallpaper__thumb--none {
	display: flex; align-items: center; justify-content: center;
	font: 500 var(--fs-micro)/1 var(--font); text-transform: uppercase;
	letter-spacing: .06em; color: var(--muted); background-color: var(--ink);
}
@media (max-width: 1023.98px) { .cs-wallpaper { display: none; } } /* desktop metaphor off on mobile */

/* --- Agenda announcement ticker — prominent bottom carousel (desktop) --- */
.cs-ticker {
	position: fixed; left: var(--leftcol-w); right: 0; top: 0; z-index: 500;
	height: var(--agenda-bar-h); display: flex; align-items: stretch;
	background: var(--frame); box-shadow: var(--bevel-raised);
}
html.cs-sidebar-off .cs-ticker { left: var(--collapsed-brand-w); } /* clear the corner logo */
/* The ticker sits at the very top; the top-right nav (Home/About/…) drops below it. */
html.cs-ticker-on .cs-topnav { top: var(--agenda-bar-h); }
.cs-ticker__tag {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1);
	padding: 0 var(--sp-4); border: 0; cursor: pointer;
	background: var(--pink); color: var(--ink);
	font-family: var(--font); font-size: var(--fs-wintitle); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-wintitle);
}
.cs-ticker__tag .cs-themes__slash { color: var(--ink); }
.cs-ticker__tag:hover { filter: brightness(1.06); }
/* Running strip (marquee): a clipped viewport with a track that scrolls left. */
.cs-ticker__viewport {
	flex: 1 1 auto; min-width: 0; overflow: hidden;
	display: flex; align-items: center; background: var(--body);
}
.cs-ticker__track {
	display: inline-flex; align-items: baseline; flex-wrap: nowrap;
	white-space: nowrap; will-change: transform;
}
.cs-ticker__track.is-running {
	animation: cs-marquee linear infinite;
}
@keyframes cs-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-1 * var(--cs-marquee-shift, 50%))); }
}
.cs-ticker:hover .cs-ticker__track.is-running { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.cs-ticker__track.is-running { animation: none; } /* honour reduced-motion */
}
.cs-ticker__item {
	display: inline-flex; align-items: baseline; gap: var(--sp-3);
	padding: 0 var(--sp-4); text-decoration: none;
}
.cs-ticker__date {
	color: var(--orange); font-weight: 700;
	font-size: var(--fs-data); font-variant-numeric: tabular-nums;
}
.cs-ticker__title { color: var(--paper); font-weight: 500; font-size: var(--fs-data); }
.cs-ticker__item:hover .cs-ticker__title { color: var(--orange); }
.cs-ticker__place { color: var(--muted); font-size: var(--fs-label); }
.cs-ticker__sep { color: var(--faint); font-size: var(--fs-label); }
/* Mobile: the agenda bar sits in the flow, full width, right under the logo. */
@media (max-width: 1023.98px) {
	.cs-ticker { position: static; left: auto; right: auto; top: auto; width: 100%; z-index: auto; }
}

/* --- Category page: subcategory chips --- */
.cs-subcats { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }

/* --- Single article: back button --- */
.cs-single__back {
	display: inline-flex; align-items: center; gap: var(--sp-1);
	margin-bottom: var(--sp-4); padding: var(--sp-2) var(--sp-3);
	text-decoration: none;
	background: var(--frame); color: var(--paper); box-shadow: var(--bevel-raised);
	font-family: var(--font); font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
}
.cs-single__back:hover { color: var(--orange); }
.cs-single__back:active { box-shadow: var(--bevel-pressed); }

/* --- Shop (placeholder) --- */
.cs-shop__soon {
	margin-top: var(--sp-5); padding: var(--sp-5);
	background: var(--body); box-shadow: var(--bevel-raised);
	display: grid; gap: var(--sp-3);
}
.cs-shop__actions {
	display: flex; flex-wrap: wrap; gap: var(--sp-3);
	margin-top: var(--sp-2);
}
.cs-shop__badge {
	justify-self: start; padding: 2px var(--sp-2);
	background: var(--orange); color: var(--ink);
	font-family: var(--font); font-size: var(--fs-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
}

/* --- Connect — bulletin board --- */
.cs-connect__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0; }
.cs-connect__tab {
	display: inline-flex; align-items: baseline; gap: var(--sp-1);
	padding: var(--sp-2) var(--sp-3); text-decoration: none;
	background: var(--frame); color: var(--muted); box-shadow: var(--bevel-raised);
	font-family: var(--font); font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
}
.cs-connect__tab:hover { color: var(--paper); }
.cs-connect__tab.is-active { background: var(--pink); color: var(--ink); }
.cs-connect__tab.is-active .cs-themes__slash { color: var(--ink); }

.cs-connect__board { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-7); }
.cs-connect__card {
	background: var(--body); box-shadow: var(--bevel-raised);
	padding: var(--sp-4); display: grid; gap: var(--sp-2);
}
.cs-connect__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.cs-connect__badge {
	flex: 0 0 auto; padding: 2px var(--sp-2);
	font-family: var(--font); font-size: var(--fs-micro); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	color: var(--ink); background: var(--muted);
}
.cs-connect__badge--ideas   { background: var(--orange); }
.cs-connect__badge--jobs    { background: var(--pink); }
.cs-connect__badge--housing { background: var(--red); color: var(--paper); }
.cs-connect__title { font-size: var(--fs-section); font-weight: 700; line-height: 1.2; }
.cs-connect__contact { color: var(--muted); }

.cs-connect__post { margin-top: var(--sp-6); border-top: 1px solid var(--frame); padding-top: var(--sp-5); }
.cs-connect__post h2 {
	font-size: var(--fs-heading); font-weight: 800; text-transform: uppercase;
	letter-spacing: var(--tr-label); margin-bottom: var(--sp-4);
}

/* --- Cookie / consent banner --- */
.cs-consent {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
	display: flex; align-items: center; gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--frame); box-shadow: var(--bevel-raised);
	font-size: var(--fs-data);
}
/* [hidden] must win over the flex above (equal-or-higher specificity). */
.cs-consent[hidden] { display: none; }

/* --- Explore / Archive --- */
.cs-explore {
	max-width: 1100px; margin: 0 auto;
	padding: calc(var(--topbar-h) + var(--sp-5)) var(--sp-5) var(--sp-8);
}
.cs-explore__head { margin-bottom: var(--sp-5); }
.cs-filters {
	display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: end;
	background: var(--body); box-shadow: var(--bevel-raised);
	padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.cs-filters .cs-field { margin: 0; min-width: 160px; flex: 1 1 160px; }
.cs-filters__search { flex: 1 1 100% !important; }
.cs-filters__actions { display: flex; gap: var(--sp-2); flex: 0 0 auto; min-width: 0; }
/* Equal control height so the Filter/Reset buttons match the selects. */
.cs-filters .cs-cselect__btn,
.cs-filters .cs-input,
.cs-filters .cs-btn { height: 44px; }
.cs-filters .cs-btn { padding-top: 0; padding-bottom: 0; }
.cs-explore__count { margin-bottom: var(--sp-3); }
.cs-grid {
	display: grid; gap: var(--sp-4);
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.cs-grid .cs-card { margin: 0; }
.cs-explore__pager { margin-top: var(--sp-6); display: flex; justify-content: center; gap: var(--sp-2); }
.cs-explore__pager .page-numbers {
	display: inline-flex; padding: var(--sp-2) var(--sp-3);
	background: var(--frame); box-shadow: var(--bevel-raised);
	color: var(--paper); font-size: var(--fs-label);
}
.cs-explore__pager .page-numbers.current { background: var(--pink); color: var(--ink); }
.cs-explore__pager a.page-numbers:hover { background: var(--bevel-light); text-decoration: none; }

/* --- Agenda board --- */
.cs-agenda__section { margin-bottom: var(--sp-6); }
.cs-agenda__list { display: grid; gap: var(--sp-4); }
.cs-eventcard {
	display: flex; gap: var(--sp-4);
	background: var(--body); box-shadow: var(--bevel-raised); padding: var(--sp-3);
}
.cs-eventcard__poster { flex: 0 0 auto; width: 120px; }
.cs-eventcard__poster img { width: 120px; height: 120px; object-fit: cover; box-shadow: var(--bevel-pressed); }
.cs-eventcard__body { flex: 1 1 auto; min-width: 0; }
.cs-eventcard__when { color: var(--orange); margin-bottom: var(--sp-1); }
@media (max-width: 640px) {
	.cs-eventcard { flex-direction: column; }
	.cs-eventcard__poster, .cs-eventcard__poster img { width: 100%; height: auto; }
}

/* --- Notices --- */
.cs-notice {
	padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
	box-shadow: var(--bevel-raised); font-size: var(--fs-data);
	background: var(--body);
}
.cs-notice--ok { border-left: 3px solid var(--orange); }
.cs-notice--error { border-left: 3px solid var(--red); }

/* --- Account (sign in / register) — one form at a time, centered --- */
.cs-authpage {
	display: flex; align-items: flex-start; justify-content: center;
	padding-top: calc(var(--topbar-h) + var(--sp-5));
	padding-bottom: var(--sp-8);
}
.cs-authbox { width: 100%; max-width: 460px; margin: 0 auto; }
.cs-authswitch {
	margin-top: var(--sp-4); padding-top: var(--sp-4);
	border-top: 1px solid var(--frame);
	display: flex; align-items: center; gap: var(--sp-3);
}

/* --- Search form --- */
.cs-searchform { display: flex; gap: var(--sp-2); width: 100%; }
.cs-searchform .cs-input { flex: 1 1 auto; }

/* --- Submit guide (upload rules) --- */
.cs-guide {
	max-width: var(--measure);
	margin-bottom: var(--sp-5);
	padding: var(--sp-3) var(--sp-4);
	background: var(--body);
	box-shadow: var(--bevel-raised);
	border-left: 3px solid var(--orange);
}
.cs-guide__title {
	font-size: var(--fs-label); font-weight: 700;
	text-transform: uppercase; letter-spacing: var(--tr-label);
	color: var(--muted); margin-bottom: var(--sp-2);
}
.cs-guide__list { margin: 0; padding-left: var(--sp-4); color: var(--paper); }
.cs-guide__list li { margin: var(--sp-1) 0; }

/* --- Front-end forms (Submit / Profile) --- */
.cs-form { max-width: var(--measure); }
.cs-form .cs-input[type="file"] { padding: var(--sp-2); }
.cs-single__article + .cs-single__article { margin-top: var(--sp-4); }

/* Their posts list */
.cs-mine { list-style: none; margin: 0; padding: 0; }

/* Card-template picker */
.cs-cardpick { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.cs-cardpick__opt { display: flex; flex-direction: column; align-items: center; gap: var(--sp-1); cursor: pointer; }
.cs-cardpick__opt input { accent-color: var(--pink); }
.cs-profilecard--mini {
	width: 56px; height: 40px; padding: 0;
	display: grid; place-items: center; font-weight: 700; color: var(--muted);
}

/* Profile card head */
.cs-profilecard { margin-bottom: var(--sp-4); }
.cs-profilecard__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.cs-profilecard__avatar { box-shadow: var(--bevel-raised); display: block; }
.cs-profilecard__links a { display: inline-block; margin-right: var(--sp-3); }

/* --- Profile card templates (4 — vary colour / frame / background) --- */
.cs-profilecard {
	box-shadow: var(--bevel-raised);
	padding: var(--sp-4);
	background: var(--body);
}
.cs-profilecard[data-template="2"] { background: var(--ink); box-shadow: var(--bevel-pressed); }
.cs-profilecard[data-template="3"] { background: var(--body); border-top: 4px solid var(--pink); }
.cs-profilecard[data-template="4"] { background: var(--body); border-top: 4px solid var(--orange); }

@media (max-width: 1023.98px) {
	.cs-themes { position: static; width: 100%; }
	.cs-themes__logo { display: none; }          /* logo already sits in the top bar */
	.cs-themes__body { overflow: visible; }       /* the page scrolls, not an inner list */
	.cs-cat__chev { display: block; }             /* categories expand into subcategories on tap */
	.cs-topnav { position: static; }

	/* Mobile header: logo top-left (smaller), Submit + Menu pinned right,
	   the rest (Home/About/Explore/Search + Sign in) inside a full-screen burger. */
	.cs-topnav__brand { display: inline-flex; }             /* show logo even on home */
	.cs-topnav--home .cs-topnav__brand { display: inline-flex; }
	.cs-topnav__logo { height: 34px; background: none; box-shadow: none; }                      /* scaled down proportionally */

	.cs-topnav__links { margin-left: auto; }                /* keep bar cluster on the right */
	.cs-topnav__persist { display: flex; gap: var(--sp-2); align-items: center; }
	.cs-navtoggle { display: inline-flex; }

	/* Burger: full width + full height overlay. */
	.cs-topnav__collapse { display: none; }
	.cs-topnav__links.is-open .cs-topnav__collapse {
		display: flex; flex-direction: column;
		gap: var(--sp-3); align-items: stretch; justify-content: center;
		position: fixed; inset: 0; z-index: 900;
		padding: var(--topbar-h) var(--sp-5) var(--sp-5);
		background: var(--ink); overflow: auto;
	}
	.cs-topnav__links.is-open .cs-navclose {
		display: inline-flex; align-items: center; justify-content: center;
		position: absolute; top: var(--sp-4); right: var(--sp-4);
		width: 44px; height: 44px; padding: 0;
		background: var(--frame); box-shadow: var(--bevel-raised); border: 0;
		color: var(--paper); font-size: 1.5rem; line-height: 1; cursor: pointer;
	}
	.cs-topnav__collapse a {
		width: 100%; justify-content: center; text-align: center;
		font-size: var(--fs-wintitle); padding: var(--sp-3) var(--sp-4);
	}
}
html.cs-navopen { overflow: hidden; }

/* --- Longform documents (About, Privacy, Terms) ------------------------- */
/* page.php renders any WordPress page through .cs-longform. Base styles cover
   headings and links; these add the vertical rhythm and lists that policy
   documents need without touching the rest of the theme. */
.cs-longform h2 { margin-top: var(--sp-6); }
.cs-longform h3 { margin-top: var(--sp-5); }
.cs-longform > :first-child { margin-top: 0; }
.cs-longform ul,
.cs-longform ol {
	max-width: var(--measure);
	margin: 0 0 var(--sp-4);
	padding-left: var(--sp-5);
}
.cs-longform ul { list-style: square; }
.cs-longform li { margin-bottom: var(--sp-2); }
.cs-longform li::marker { color: var(--faint); }
.cs-longform strong { color: var(--paper); font-weight: 700; }

/* --- Policy links ------------------------------------------------------- */
/* Quiet grey row. In the left menu panel it sits directly above the Radio tile
   (front page); on inner pages, where the panel is absent, it closes the
   document instead. Never both — footer.php skips the front page. */
.cs-footlinks {
	display: flex; flex-wrap: wrap; gap: var(--sp-3);
	font-size: var(--fs-micro); line-height: 1.3;
}
.cs-footlinks a { color: var(--muted); text-decoration: none; }
.cs-footlinks a:hover,
.cs-footlinks a:focus-visible { color: var(--orange); text-decoration: none; }

/* In-panel: stacked and centred over the Radio tile. Full width with no top
   margin and the same --body ground as .cs-themes__body above it, so the dark
   area reads as one block that simply continues past the categories. */
.cs-themes .cs-footlinks {
	flex-direction: column; align-items: center; gap: var(--sp-1);
	margin: 0;
	padding: var(--sp-3) var(--sp-2);
	background: var(--body);
	text-align: center;
}
/* On a document page there is no menu panel, so they pin to the bottom-left
   corner instead — the same place they occupy on the front page. Fixed, so
   they stay put while the document scrolls; --ink ground (the page's own)
   keeps them legible over anything passing underneath. .cs-toasts and
   .cs-winbar own the opposite corner, so nothing collides. */
.cs-footlinks--page {
	position: fixed; left: 0; bottom: 0; z-index: 550;
	padding: var(--sp-3) var(--sp-4);
	background: var(--ink);
}

.cs-consent__more { margin-left: var(--sp-2); }