/*
Theme Name: Redshift
Theme URI: https://bredixx.com
Author: Bredixx
Author URI: https://bredixx.com
Description: A fast, modern black-and-red magazine theme. Classic WordPress structure — header and footer menus, widget areas, sidebar, archives, comments — with a configurable homepage of category blocks, a featured slider, live search that answers as you type, and advertising zones that serve separate desktop and mobile creatives.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: redshift
Tags: blog, news, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--rs-accent: #e01b2d;
	--rs-accent-ink: #ffffff;
	--rs-accent-soft: rgba(224, 27, 45, .14);

	--rs-bg: #0a0a0c;
	--rs-bg-2: #0f0f13;
	--rs-surface: #151519;
	--rs-surface-2: #1c1c22;
	--rs-fg: #f3f3f6;
	--rs-fg-soft: #e2e2e8;
	--rs-muted: #9a9aa6;
	--rs-border: #26262f;
	--rs-border-strong: #3a3a46;

	/* Chrome that is not simply a surface: the translucent header, the
	   overlay behind the drawer, and the slider's dots. */
	--rs-header-bg: rgba(10, 10, 12, .92);
	--rs-scrim: rgba(0, 0, 0, .6);
	--rs-dot: rgba(255, 255, 255, .4);

	/* Accent as text. The fill colour is legible with white on it, but the
	   same red on a light page is not legible as body text, so light mode
	   darkens this one while leaving buttons and chips at full strength.
	   PHP recalculates it whenever the accent is changed. */
	--rs-accent-text: var(--rs-accent);

	--rs-radius: 12px;
	--rs-radius-sm: 8px;
	--rs-radius-pill: 999px;

	--rs-wrap: 1260px;
	--rs-gutter: clamp(16px, 4vw, 40px);
	--rs-gap: clamp(16px, 2.2vw, 28px);
	--rs-sidebar: 320px;

	/* Both are overridden from PHP when a typeface is chosen under
	   Customize → Redshift — Typography. This is the fallback stack:
	   the best face already on the machine, newest first. */
	--rs-font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--rs-font-head: var(--rs-font);

	/* Headings are heavier and tighter than the body, which is what makes
	   a page read as edited rather than typed. */
	--rs-weight-head: 800;
	--rs-track-head: -.022em;

	--rs-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .28);
	--rs-shadow-hover: 0 2px 6px rgba(0, 0, 0, .45), 0 18px 40px rgba(0, 0, 0, .40);
	--rs-header-h: 64px;

	/* Motion.
	 *
	 * Hover is asymmetric on purpose. Arriving is the slower half — it is
	 * the part the eye follows, so it gets a long decelerating curve that
	 * settles rather than stops. Leaving is quicker and plainer, because a
	 * pointer that has already moved on should not drag a 300ms animation
	 * behind it; that lag is most of what reads as "choppy" when several
	 * elements are crossed in a row.
	 *
	 * The two pairs are held in --rs-t and --rs-t-slow, which every
	 * transition below uses. The resting value is the leaving pair; a
	 * :hover, :focus-within or .is-open rule swaps in the arriving pair.
	 * Custom properties inherit, so setting it once on a card also covers
	 * its image, its title and its meta — the whole card moves as one
	 * thing instead of several parts on their own clocks.
	 *
	 * --rs-dur is also what theme.js waits out before hiding the search
	 * panel. It reads the value from here rather than repeating it. */
	--rs-ease: cubic-bezier(.22, .68, .28, 1);
	--rs-ease-exit: cubic-bezier(.4, 0, .6, 1);
	--rs-dur: .28s;
	--rs-dur-fast: .15s;
	--rs-dur-slow: .55s;

	--rs-t: var(--rs-dur-fast) var(--rs-ease-exit);
	--rs-t-slow: var(--rs-dur-slow) var(--rs-ease-exit);

	/* Article width. Widened automatically when the sidebar is empty —
	   see body.rs-no-sidebar below. */
	--rs-single-max: 820px;

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   Light scheme
   --------------------------------------------------------------------------
   Set from Customize → Redshift — Appearance → Colour scheme, which puts
   .rs-light on <html>. Only tokens change: not one component rule is
   duplicated, so anything added later inherits both schemes for free.

   The lightness order is deliberately not a mirror of the dark palette.
   In the dark theme the page is the darkest thing and surfaces come
   forward by getting lighter; on a white page that direction has nowhere
   to go, so the page is a light grey and the surfaces are pure white,
   lifted by a shadow. The accent stays exactly the red it is — only the
   variant used for *text* is darkened, far enough to clear 4.5:1 against
   the page, since #e01b2d as body text on white does not.
   -------------------------------------------------------------------------- */
.rs-light {
	--rs-bg: #f4f4f7;
	--rs-bg-2: #ffffff;
	--rs-surface: #ffffff;
	--rs-surface-2: #ececf2;

	--rs-fg: #15151a;
	--rs-fg-soft: #33333c;
	--rs-muted: #5b5b68;
	--rs-border: #e1e1e8;
	--rs-border-strong: #c4c4d0;

	--rs-accent-soft: rgba(224, 27, 45, .10);
	--rs-accent-text: #b3111d;

	--rs-header-bg: rgba(255, 255, 255, .88);
	--rs-scrim: rgba(18, 18, 26, .42);

	/* Light shadows are about contact, not depth: short, soft, and tinted
	   towards the page rather than pure black, which looks like soot. */
	--rs-shadow: 0 1px 2px rgba(18, 18, 32, .06), 0 6px 18px rgba(18, 18, 32, .07);
	--rs-shadow-hover: 0 2px 4px rgba(18, 18, 32, .08), 0 14px 32px rgba(18, 18, 32, .13);

	color-scheme: light;
}

/* The slider is the exception. Its text sits on a photograph under a dark
   veil in both schemes, so the veil — not the page — decides what is
   readable on top of it, and these keep the white they need. Same for the
   media placeholder used when a post has no image: it is a stand-in for a
   photograph, so it stays dark and the caption stays light. */
.rs-light .rs-slide-body,
.rs-light .rs-slider-btn,
.rs-light .rs-slider-dots {
	--rs-fg: #ffffff;
	--rs-fg-soft: #e8e8ee;
	--rs-muted: #d6d6de;
	color: #ffffff;
}
.rs-light .rs-card-placeholder {
	background:
		radial-gradient(circle at 30% 20%, rgba(224, 27, 45, .28), transparent 60%),
		#1b1b22;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* The page colour lives on <html> as well, so a document shorter than the
   viewport does not show the browser's default white below the footer. */
html { background: var(--rs-bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; }
.rs-menu, .rs-footer-menu, .rs-comment-list, .rs-breadcrumbs ol, .rs-share-buttons { list-style: none; }

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

body {
	margin: 0;
	background: var(--rs-bg);
	color: var(--rs-fg);
	font-family: var(--rs-font);
	font-size: 16.5px;
	line-height: 1.62;
	font-weight: 450;
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-variant-numeric: tabular-nums;
}

/* 450 only exists in a variable face; everything else rounds it to 400,
   which is the intended fallback. */
@supports not (font-variation-settings: "wght" 450) {
	body { font-weight: 400; }
}

h1, h2, h3, h4 {
	font-family: var(--rs-font-head);
	font-weight: var(--rs-weight-head);
	line-height: 1.14;
	letter-spacing: var(--rs-track-head);
	text-wrap: balance;
}

/* A condensed display face needs its own rhythm: less negative tracking,
   a touch of width, and capitals where the theme sets headings in caps. */
.rs-font-oswald {
	--rs-weight-head: 700;
	--rs-track-head: .002em;
}
.rs-font-playfair {
	--rs-weight-head: 800;
	--rs-track-head: -.012em;
}
.rs-font-playfair h1, .rs-font-playfair h2, .rs-font-playfair h3, .rs-font-playfair h4 { line-height: 1.12; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rs-skip-link {
	position: absolute;
	top: -100px; left: 12px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--rs-accent);
	color: var(--rs-accent-ink);
	border-radius: var(--rs-radius-sm);
	transition: top var(--rs-t);
}
.rs-skip-link:focus { top: 12px; }

:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* The arriving half of every hover. Because --rs-t inherits, naming the
   outermost element that changes is enough: a hovered card hands the
   slower curve to its own image, title and meta, so they start together
   and settle together. Anything not listed here still transitions — it
   just uses the quicker resting pair in both directions, which is right
   for small colour-only changes. */
.rs-card:hover, .rs-card:focus-within,
.rs-postnav-item:hover, .rs-postnav-item:focus-visible,
.rs-icon-btn:hover, .rs-icon-btn:focus-visible,
.rs-menu > li:hover, .rs-menu > li:focus-within,
.rs-menu .sub-menu a:hover, .rs-menu .sub-menu a:focus-visible,
.rs-chip:hover, .rs-chip:focus-visible,
.rs-share-btn:hover, .rs-share-btn:focus-visible,
.rs-slider-btn:hover, .rs-slider-btn:focus-visible,
.rs-result:hover, .rs-result:focus-visible, .rs-result.is-active,
.rs-block-more:hover, .rs-breadcrumbs a:hover, .rs-admin-note-link:hover,
.rs-entry a:hover, .widget a:hover, .rs-footer a:hover,
a.page-numbers:hover, .rs-to-top:hover,
.comment-form .submit:hover, .rs-searchform button:hover,
.rs-nav-wrap.is-open, .rs-search-panel.is-open {
	--rs-t: var(--rs-dur) var(--rs-ease);
	--rs-t-slow: var(--rs-dur-slow) var(--rs-ease);
}

/* Nothing animates for a visitor who has asked for less motion — the
   tokens are emptied at the source rather than unset one rule at a time. */
@media (prefers-reduced-motion: reduce) {
	:root, .rs-card:hover, .rs-card:focus-within {
		--rs-t: 0s linear;
		--rs-t-slow: 0s linear;
	}
}

.rs-accent { color: var(--rs-accent-text); }
.rs-meta-sep { margin: 0 .5em; color: var(--rs-border); }

.rs-wrap {
	width: 100%;
	max-width: var(--rs-wrap);
	margin: 0 auto;
	padding: 0 var(--rs-gutter);
}

.rs-layout { display: block; }
.rs-main { min-width: 0; }

@media (min-width: 1000px) {
	body.rs-has-sidebar .rs-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--rs-sidebar);
		gap: clamp(28px, 3vw, 52px);
		align-items: start;
	}
	body.rs-sidebar-left .rs-layout { grid-template-columns: var(--rs-sidebar) minmax(0, 1fr); }
	body.rs-sidebar-left .rs-main { order: 2; }
	body.rs-sidebar-left .rs-sidebar { order: 1; }
}

.rs-content { padding-bottom: clamp(40px, 6vw, 80px); }

/* ==========================================================================
   3. Header
   ========================================================================== */

.rs-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--rs-header-bg);
	border-bottom: 1px solid var(--rs-border);
}

/* The frosted backdrop lives on a pseudo-element on purpose. Putting
   backdrop-filter on .rs-header itself would make the header a
   containing block for its position:fixed children — the mobile drawer
   and the full-screen search would then be trapped inside the 64px
   header bar instead of covering the viewport. */
.rs-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: saturate(140%) blur(10px);
	pointer-events: none;
}

.rs-header-inner {
	max-width: var(--rs-wrap);
	margin: 0 auto;
	padding: 0 var(--rs-gutter);
	min-height: var(--rs-header-h);
	display: flex;
	align-items: center;
	gap: clamp(12px, 3vw, 32px);
}

.rs-brand { display: flex; align-items: center; flex-shrink: 0; }
.rs-brand img { max-height: 40px; width: auto; }
.rs-site-title {
	font-weight: 800;
	font-size: 1.15rem;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.rs-site-title::after {
	content: '';
	display: inline-block;
	width: 7px; height: 7px;
	margin-left: 5px;
	border-radius: 50%;
	background: var(--rs-accent);
	vertical-align: middle;
}

.rs-nav-wrap { flex: 1; min-width: 0; }
.rs-nav { display: flex; }

.rs-menu {
	display: flex;
	align-items: center;
	gap: clamp(6px, 1.4vw, 22px);
	margin: 0;
	flex-wrap: wrap;
}
.rs-menu li { position: relative; }

/* The label and its arrow are one row: the arrow to the right of the
   text, on the same baseline. Without this the item is an inline run
   inside a flex item, so a narrow column wraps the arrow onto a second
   line underneath the label. */
.rs-menu > li {
	display: flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
}

.rs-menu > li > a {
	display: block;
	padding: 8px 2px;
	font-size: .92rem;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--rs-muted);
	transition: color var(--rs-t);
}
.rs-menu > li > a:hover,
.rs-menu > li > a:focus-visible { color: var(--rs-fg); }

.rs-menu > li.current-menu-item > a,
.rs-menu > li.current-menu-parent > a,
.rs-menu > li.current-menu-ancestor > a { color: var(--rs-fg); }

.rs-menu > li.current-menu-item > a::after,
.rs-menu > li.current-menu-parent > a::after {
	content: '';
	display: block;
	height: 2px;
	margin-top: 4px;
	border-radius: 2px;
	background: var(--rs-accent);
}

/* Dropdown */
.rs-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -12px;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-sm);
	box-shadow: var(--rs-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity var(--rs-t), transform var(--rs-t), visibility var(--rs-dur);
	z-index: 10;
}
.rs-menu li:hover > .sub-menu,
.rs-menu li:focus-within > .sub-menu,
.rs-menu li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.rs-menu .sub-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	font-size: .9rem;
	color: var(--rs-muted);
}
.rs-menu .sub-menu a:hover,
.rs-menu .sub-menu a:focus-visible { background: var(--rs-surface-2); color: var(--rs-fg); }

/* The disclosure button is also the arrow that marks an item as having
   children, so it is visible at every width — small and quiet beside a
   desktop menu item, a proper tap target inside the drawer. */
.rs-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	margin-left: 1px;
	color: var(--rs-muted);
	border-radius: 5px;
	vertical-align: middle;
	transition: transform var(--rs-t), color var(--rs-t), background var(--rs-t);
}
.rs-submenu-toggle:hover { color: var(--rs-fg); }

/* The arrow points down when closed, up when open — on hover too, since
   hovering is what opens the dropdown on a desktop. */
.rs-submenu-toggle[aria-expanded="true"],
.rs-menu li:hover > .rs-submenu-toggle,
.rs-menu li:focus-within > .rs-submenu-toggle { transform: rotate(180deg); }

.rs-menu li:hover > .rs-submenu-toggle,
.rs-menu li.is-open > .rs-submenu-toggle { color: var(--rs-accent-text); }

.rs-header-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-shrink: 0; }

.rs-icon-btn {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--rs-radius-sm);
	color: var(--rs-fg);
	transition: background var(--rs-t), color var(--rs-t), transform var(--rs-t);
}
.rs-icon-btn:hover { background: var(--rs-surface-2); color: var(--rs-accent-text); }
.rs-icon-btn:active { transform: scale(.93); }

.rs-burger { display: block; width: 18px; }
.rs-burger span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--rs-t), opacity var(--rs-t);
}
.rs-burger span + span { margin-top: 4px; }
.rs-drawer-open .rs-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.rs-drawer-open .rs-burger span:nth-child(2) { opacity: 0; }
.rs-drawer-open .rs-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.rs-menu-toggle { display: none; }

/* Mobile drawer */
@media (max-width: 860px) {
	.rs-menu-toggle { display: inline-flex; }

	/* The drawer is a child of the header, and once open it is wide enough
	   to reach across the burger. At z-index 90 it covered the very button
	   that closes it: the X animated, the tap did nothing. Raising the
	   header as a whole would not help — same stacking context — so the
	   logo and the header buttons are lifted above the drawer.
	   Only while the drawer is open: left on permanently they punch
	   through the full-screen search panel, which is what put the logo and
	   the burger on top of the search field. */
	.rs-drawer-open .rs-brand,
	.rs-drawer-open .rs-header-actions { position: relative; z-index: 96; }

	.rs-nav-wrap {
		position: fixed;
		top: 0; right: 0; bottom: 0;
		width: min(86vw, 340px);
		z-index: 90;
		padding: calc(var(--rs-header-h) + 20px) 20px 32px;
		background: var(--rs-bg-2);
		border-left: 1px solid var(--rs-border);
		transform: translateX(100%);
		transition: transform var(--rs-t-slow);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.rs-nav-wrap.is-open { transform: translateX(0); }

	.rs-nav { display: block; }
	.rs-menu { display: block; }
	.rs-menu li { display: flex; flex-wrap: wrap; align-items: center; }
	/* Long labels have to wrap inside a 340px drawer, unlike in the bar. */
	.rs-menu > li { white-space: normal; gap: 0; }
	.rs-menu > li { border-bottom: 1px solid var(--rs-border); }
	.rs-menu > li > a { flex: 1; padding: 14px 2px; font-size: 1.02rem; color: var(--rs-fg); }
	.rs-menu > li.current-menu-item > a::after { display: none; }

	/* In the drawer the arrow has to be a tap target, and read as a
	   control rather than a decoration. */
	.rs-submenu-toggle {
		width: 38px; height: 38px;
		margin-left: 4px;
		border: 1px solid var(--rs-border);
		background: var(--rs-surface);
		color: var(--rs-fg);
		border-radius: 8px;
	}
	.rs-submenu-toggle[aria-expanded="true"] {
		border-color: var(--rs-accent-text);
		color: var(--rs-accent-text);
	}
	/* Hover opens nothing on a touch screen, and tapping the button leaves
	   it focused, so neither may turn the arrow — only the real open state
	   does. This rule comes last on purpose: it has to outrank the
	   :focus-within one above, which is otherwise just as specific. */
	.rs-menu li:hover > .rs-submenu-toggle { transform: none; }
	.rs-menu li:focus-within > .rs-submenu-toggle { transform: none; }
	.rs-menu li.is-open > .rs-submenu-toggle { transform: rotate(180deg); }

	.rs-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		width: 100%;
		margin: 0 0 8px;
		padding: 0 0 0 12px;
		background: none;
		border: 0;
		border-left: 2px solid var(--rs-accent);
		border-radius: 0;
		box-shadow: none;
	}
	.rs-menu li.is-open > .sub-menu { display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.rs-nav-wrap { transition: none; }
}

/* Deliberately below the header (60): the desktop search panel lives
   inside the header, and a scrim above it would swallow clicks on the
   field and the close button. Dismissing by tapping away does not depend
   on this element anyway — that runs from a document-level handler, so a
   plugin's fixed bar covering the scrim cannot trap the drawer open. */
.rs-scrim {
	position: fixed;
	inset: 0;
	z-index: 55;
	background: var(--rs-scrim);
	backdrop-filter: blur(2px);
}
.rs-scrim[hidden] { display: none; }
@media (min-width: 861px) {
	.rs-drawer-open .rs-scrim { display: none; }
}

/* ==========================================================================
   4. Search panel
   ========================================================================== */

.rs-search-panel {
	border-top: 1px solid var(--rs-border);
	background: var(--rs-bg-2);
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity var(--rs-t), transform var(--rs-t);
}
.rs-search-panel[hidden] { display: none; }
.rs-search-panel.is-open { opacity: 1; transform: translateY(0); }

.rs-search-inner {
	max-width: var(--rs-wrap);
	margin: 0 auto;
	padding: 16px var(--rs-gutter) 20px;
}

.rs-search-form {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
}
.rs-search-form:focus-within { border-color: var(--rs-accent-text); }
.rs-search-icon { color: var(--rs-muted); flex-shrink: 0; }
.rs-search-input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: none;
	font-size: 1.02rem;
	color: var(--rs-fg);
}
.rs-search-input::placeholder { color: var(--rs-muted); }
/* The browser's own clear cross lands right beside the theme's close
   button, which reads as two X's arguing. Escape and the close button
   both clear the field already. */
.rs-search-input::-webkit-search-cancel-button,
.rs-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.rs-search-close { width: 34px; height: 34px; }

.rs-search-results { margin-top: 10px; display: grid; gap: 4px; }
.rs-search-results:empty { display: none; }

.rs-result {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: var(--rs-radius-sm);
	transition: background var(--rs-t);
}
.rs-result:hover,
.rs-result:focus-visible,
.rs-result.is-active { background: var(--rs-surface-2); }

.rs-result-thumb {
	width: 52px; height: 52px;
	object-fit: cover;
	border-radius: var(--rs-radius-sm);
	flex-shrink: 0;
}
.rs-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rs-result-title { font-weight: 600; line-height: 1.3; }
.rs-result-title mark { background: var(--rs-accent-soft); color: var(--rs-accent-text); padding: 0 2px; border-radius: 3px; }
.rs-result-meta { font-size: .8rem; color: var(--rs-muted); }
.rs-result-more { justify-content: center; font-weight: 600; color: var(--rs-accent-text); }

.rs-search-hint { margin-top: 10px; font-size: .84rem; color: var(--rs-muted); }
.rs-search-hint[hidden] { display: none; }

/* Full screen on phones */
@media (max-width: 860px) {
	/* On a phone this is the whole screen, so it has to replace the header
	   rather than sit under it. It covers everything the header draws —
	   nothing from behind is allowed to show through, which is what made
	   the logo and the burger land on top of the search field. */
	.rs-search-panel {
		position: fixed;
		inset: 0;
		z-index: 97;
		border-top: 0;
		background: var(--rs-bg);
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateY(-14px);
	}

	.rs-search-inner {
		padding: 0;
		min-height: 100%;
	}

	/* The field becomes the top bar of its own screen: full width, its own
	   safe-area padding, and a rule under it that separates it from the
	   results the way a header would. */
	.rs-search-form {
		position: sticky;
		top: 0;
		z-index: 1;
		gap: 12px;
		padding: max(14px, env(safe-area-inset-top)) 14px 14px;
		padding-left: max(14px, env(safe-area-inset-left));
		padding-right: max(14px, env(safe-area-inset-right));
		background: var(--rs-bg);
		border: 0;
		border-bottom: 1px solid var(--rs-border);
		border-radius: 0;
	}
	.rs-search-form:focus-within { border-color: var(--rs-border); }
	.rs-search-form:focus-within .rs-search-icon { color: var(--rs-accent-text); }

	.rs-search-input { font-size: 1.1rem; padding: 6px 0; }
	.rs-search-icon { width: 20px; height: 20px; }

	/* A proper tap target, and clearly the thing that closes the screen. */
	.rs-search-close {
		width: 42px; height: 42px;
		flex-shrink: 0;
		border: 1px solid var(--rs-border);
		border-radius: var(--rs-radius-sm);
		background: var(--rs-surface);
		color: var(--rs-fg);
	}

	.rs-search-results { margin-top: 0; padding: 8px 10px; gap: 2px; }
	.rs-search-hint { margin: 0; padding: 14px; }
	.rs-result-thumb { width: 60px; height: 60px; }
}

/* ==========================================================================
   5. Cards
   ========================================================================== */

.rs-grid { display: grid; gap: var(--rs-gap); }
.rs-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }

.rs-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
	overflow: hidden;
	transition: border-color var(--rs-t),
	            transform var(--rs-t),
	            box-shadow var(--rs-t);
	will-change: transform;
}
.rs-card:hover,
.rs-card:focus-within {
	border-color: var(--rs-border-strong);
	transform: translateY(-3px);
	box-shadow: var(--rs-shadow-hover);
}
@media (prefers-reduced-motion: reduce) { .rs-card:hover, .rs-card:focus-within { transform: none; } }

.rs-card-media {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--rs-surface-2);
}
.rs-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--rs-t-slow); }
.rs-card:hover .rs-card-media img,
.rs-card:focus-within .rs-card-media img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .rs-card:hover .rs-card-media img { transform: none; } }

.rs-card-placeholder {
	display: block;
	width: 100%; height: 100%;
	background:
		radial-gradient(circle at 30% 20%, rgba(224, 27, 45, .22), transparent 60%),
		var(--rs-surface-2);
}

.rs-card-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.rs-card--small .rs-card-body,
.rs-card--list .rs-card-body { padding: 16px; }

.rs-card-cat {
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--rs-accent-text);
}
.rs-card-title { font-size: 1.06rem; line-height: 1.3; }
.rs-card-title a { transition: color var(--rs-t); }
.rs-card-cat { transition: color var(--rs-t); }
.rs-card-title a:hover, .rs-card-title a:focus-visible { color: var(--rs-accent-text); }
.rs-card-excerpt { color: var(--rs-muted); font-size: .92rem; }
.rs-card-meta { font-size: .78rem; color: var(--rs-muted); margin-top: auto; }

/* list variant: image left, text right */
.rs-card--list { flex-direction: row; align-items: stretch; }
.rs-card--list .rs-card-media { flex: 0 0 34%; max-width: 260px; aspect-ratio: 3 / 2; }
.rs-card--list .rs-card-title { font-size: 1.18rem; }
.rs-card--list.rs-card--noimg .rs-card-media { display: none; }

@media (max-width: 620px) {
	.rs-card--list { flex-direction: column; }
	.rs-card--list .rs-card-media { flex: none; max-width: none; width: 100%; }
}

/* feature variant */
.rs-card--feature .rs-card-media { aspect-ratio: 16 / 9; }
.rs-card--feature .rs-card-title { font-size: clamp(1.4rem, 2.6vw, 2rem); }
.rs-card--feature .rs-card-body { padding: 0 20px 20px; gap: 10px; }

/* small variant: no image, compact row */
.rs-card--small { background: none; border: 0; border-bottom: 1px solid var(--rs-border); border-radius: 0; }
.rs-card--small:hover { transform: none; border-color: var(--rs-border); }
.rs-card--small .rs-card-body { padding: 14px 0; }
.rs-card--small .rs-card-title { font-size: 1rem; }
.rs-card--small:last-child { border-bottom: 0; }

/* ==========================================================================
   6. Homepage blocks & slider
   ========================================================================== */

.rs-shortcode-area {
	border-bottom: 1px solid var(--rs-border);
	background: var(--rs-bg-2);
}
.rs-shortcode-area .rs-wrap { padding-top: 16px; padding-bottom: 16px; }
.rs-shortcode-area:empty { display: none; }

/* The slider sits above the shortcode area by default, full width of the
   page rather than inside the content column. It keeps its own spacing so
   that an empty slider leaves no gap behind. */
.rs-slider-area .rs-wrap { padding-top: var(--rs-gap); padding-bottom: var(--rs-gap); }

/* A note only administrators see, explaining why a homepage block is
   missing. Deliberately plain: it is a message from the theme, not part
   of the design. */
.rs-admin-note {
	border: 1px dashed var(--rs-accent);
	border-radius: var(--rs-radius);
	background: var(--rs-accent-soft);
	padding: clamp(16px, 2.4vw, 24px);
	font-size: .92rem;
}
.rs-admin-note-title { font-size: 1.05rem; }
.rs-admin-note-lead { margin-top: 6px; color: var(--rs-muted); }
.rs-admin-note-list { margin-top: 12px; padding-left: 1.1em; list-style: disc; }
.rs-admin-note-list li + li { margin-top: 4px; }
.rs-admin-note-reason { color: var(--rs-muted); }
.rs-admin-note-reason::before { content: " — "; }
.rs-admin-note-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--rs-accent-text);
	font-weight: 600;
	transition: color var(--rs-t);
}
.rs-admin-note-link:hover { color: var(--rs-fg); }

.rs-home > * + * { margin-top: clamp(36px, 5vw, 64px); }
.rs-block-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rs-border);
}
.rs-section-title {
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.rs-section-title::before {
	content: '';
	display: inline-block;
	width: 10px; height: 10px;
	margin-right: 10px;
	background: var(--rs-accent);
	border-radius: 2px;
	vertical-align: baseline;
}
.rs-block-more { font-size: .86rem; color: var(--rs-muted); white-space: nowrap; transition: color var(--rs-t); }
.rs-block-more:hover { color: var(--rs-accent-text); }

.rs-block-feature { display: grid; gap: var(--rs-gap); }
@media (min-width: 880px) {
	.rs-block-feature { grid-template-columns: 1.55fr 1fr; align-items: start; }
}
.rs-feature-list {
	display: flex;
	flex-direction: column;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
	padding: 4px 16px;
}

.rs-block-list { display: flex; flex-direction: column; gap: var(--rs-gap); }

/* Slider */
.rs-slider { position: relative; }
.rs-slider-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--rs-radius);
	outline-offset: 3px;
}
.rs-slider-track::-webkit-scrollbar { display: none; }

.rs-slide { scroll-snap-align: start; position: relative; }
.rs-slide-link { position: relative; display: block; aspect-ratio: 16 / 7; background: var(--rs-surface-2); }
@media (max-width: 700px) { .rs-slide-link { aspect-ratio: 4 / 3; } }

.rs-slide-link img,
.rs-slide-link .rs-card-placeholder { width: 100%; height: 100%; object-fit: cover; }

.rs-slide-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: clamp(18px, 4vw, 40px);
	background: linear-gradient(to top, rgba(6, 6, 8, .95) 10%, rgba(6, 6, 8, .65) 50%, transparent);
}
.rs-slide-cat {
	display: inline-block;
	margin-bottom: 10px;
	padding: 4px 10px;
	background: var(--rs-accent);
	color: var(--rs-accent-ink);
	border-radius: var(--rs-radius-pill);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.rs-slide-title { font-size: clamp(1.3rem, 3.4vw, 2.4rem); max-width: 22ch; }
.rs-slide-excerpt {
	margin-top: 10px;
	max-width: 56ch;
	color: #d6d6de;
	font-size: .95rem;
}
@media (max-width: 560px) { .rs-slide-excerpt { display: none; } }

.rs-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: rgba(10, 10, 12, .6);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-pill);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background var(--rs-t), border-color var(--rs-t), transform var(--rs-t);
}
/* The base transform centres the button, so the hover state has to carry
   it too — dropping it would snap the arrow half its height down the
   moment the pointer arrives. */
.rs-slider-btn:hover {
	background: var(--rs-accent);
	border-color: var(--rs-accent-text);
	transform: translateY(-50%) scale(1.08);
}
.rs-slider-btn:active { transform: translateY(-50%) scale(.96); }
.rs-slider-prev { left: 12px; }
.rs-slider-next { right: 12px; }
/* The arrows stay on phones. Without them a scroll-snap track looks like
   a plain picture — nothing on screen says it can be swiped. They shrink
   and hug the edges instead of disappearing. */
@media (max-width: 700px) {
	.rs-slider-btn {
		width: 36px; height: 36px;
		background: rgba(10, 10, 12, .62);
		backdrop-filter: blur(4px);
	}
	.rs-slider-btn svg { width: 17px; height: 17px; }
	.rs-slider-prev { left: 6px; }
	.rs-slider-next { right: 6px; }
}

.rs-slider-dots {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
}
/* The active dot stretches into a pill. The element keeps its full width
   at rest and is squashed back with a transform, so the change is a
   composited scale rather than a width animation relaying out the row
   on every frame. */
.rs-slider-dot {
	width: 22px; height: 8px;
	border-radius: var(--rs-radius-pill);
	background: var(--rs-dot);
	transform: scaleX(.364);
	transform-origin: center;
	transition: background var(--rs-t), transform var(--rs-t);
}
.rs-slider-dot.is-active { background: var(--rs-accent); transform: scaleX(1); }

/* ==========================================================================
   7. Archives
   ========================================================================== */

.rs-main { padding-top: clamp(24px, 4vw, 40px); }

.rs-archive-head { margin-bottom: clamp(20px, 3vw, 32px); }
.rs-archive-title { font-size: clamp(1.6rem, 4vw, 2.6rem); }
/* No measure cap here. The description sits in the same column as the
   post list beneath it, and capping it left a short line of text with
   dead space beside it while everything below spanned the full width. */
.rs-archive-desc { margin-top: 10px; color: var(--rs-muted); font-size: 1.02rem; }
.rs-archive-desc > * + * { margin-top: .9em; }
.rs-archive-count { margin-top: 8px; font-size: .86rem; color: var(--rs-muted); }

.rs-archive-list { display: flex; flex-direction: column; gap: var(--rs-gap); }

.rs-empty { padding: 60px 0; color: var(--rs-muted); text-align: center; }

.rs-breadcrumbs { margin-bottom: 16px; font-size: .82rem; color: var(--rs-muted); }
.rs-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.rs-breadcrumbs li + li::before { content: '/'; margin-right: 6px; color: var(--rs-border); }
.rs-breadcrumbs a { transition: color var(--rs-t); }
.rs-breadcrumbs a:hover { color: var(--rs-accent-text); }
.rs-breadcrumbs [aria-current] { color: var(--rs-fg); }

/* Pagination */
.pagination, .navigation.pagination, .comments-pagination {
	margin-top: clamp(28px, 4vw, 44px);
	display: flex;
	justify-content: center;
}
.pagination .nav-links, .comments-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 12px;
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-sm);
	font-size: .9rem;
	color: var(--rs-muted);
	transition: border-color var(--rs-t), color var(--rs-t);
}
a.page-numbers:hover { color: var(--rs-fg); border-color: var(--rs-accent-text); }
.page-numbers.current { background: var(--rs-accent); border-color: var(--rs-accent-text); color: var(--rs-accent-ink); }
.page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   8. Single post
   ========================================================================== */

/* With no widgets in the sidebar there is no second column to leave room
   for, so the article, its comments and the related row all widen instead
   of sitting pinched in the middle of an empty page. */
body.rs-no-sidebar { --rs-single-max: var(--rs-wide-max, 1040px); }

.rs-single,
.rs-comments,
.rs-related,
.rs-page { max-width: var(--rs-single-max); }

body.rs-no-sidebar .rs-single,
body.rs-no-sidebar .rs-comments,
body.rs-no-sidebar .rs-related,
body.rs-no-sidebar .rs-page { margin-inline: auto; }

/* The text uses the same width as everything else in the column. An
   earlier version capped paragraphs to a reading measure, which left
   the copy hugging the left edge while images and ads spanned the full
   width — it read as broken rather than as a deliberate measure. The
   type is stepped up slightly instead, which keeps the line length
   comfortable at the wider column. */
body.rs-no-sidebar .rs-entry { font-size: 1.12rem; line-height: 1.8; }

.rs-single-head { margin-bottom: 22px; }
/* Categories used to sit above the title in accent chips. They now live
   under the article beside the tags, in the same quiet grey — see
   .rs-tags below. */

.rs-chip {
	display: inline-block;
	padding: 5px 11px;
	background: var(--rs-accent-soft);
	color: var(--rs-accent-text);
	border-radius: var(--rs-radius-pill);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	transition: background var(--rs-t);
}
.rs-chip:hover { background: var(--rs-accent); color: var(--rs-accent-ink); }
.rs-chip--tag {
	background: var(--rs-surface-2);
	color: var(--rs-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}
.rs-chip--tag:hover { background: var(--rs-surface-2); color: var(--rs-accent-text); }

.rs-single-title { font-size: clamp(1.8rem, 4.6vw, 3rem); }
.rs-single-standfirst {
	margin-top: 14px;
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
	color: var(--rs-muted);
	line-height: 1.55;
}
.rs-meta { margin-top: 16px; font-size: .85rem; color: var(--rs-muted); }
.rs-meta-cat { color: var(--rs-accent-text); font-weight: 600; }

.rs-single-media { margin: 0 0 28px; }
.rs-single-media img { width: 100%; border-radius: var(--rs-radius); }
.rs-single-media figcaption { margin-top: 8px; font-size: .82rem; color: var(--rs-muted); }

/* Article typography */
.rs-entry { font-size: 1.06rem; line-height: 1.75; }
.rs-entry > * + * { margin-top: 1.15em; }
.rs-entry p { color: var(--rs-fg-soft); }
.rs-entry h2 { margin-top: 1.9em; font-size: clamp(1.3rem, 2.4vw, 1.65rem); }
.rs-entry h3 { margin-top: 1.6em; font-size: 1.22rem; }
/* text-decoration-thickness does not interpolate — the browser jumps
   straight to the new value, which is a visible tick in the middle of an
   otherwise smooth hover. The underline is painted as a background
   gradient instead, so it can grow. */
.rs-entry a {
	color: var(--rs-accent-text);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	padding-bottom: 1px;
	transition: color var(--rs-t), background-size var(--rs-t);
}
.rs-entry a:hover { background-size: 100% 2px; }
.rs-entry ul, .rs-entry ol { padding-left: 1.3em; }
.rs-entry ul { list-style: disc; }
.rs-entry ol { list-style: decimal; }
.rs-entry li + li { margin-top: .4em; }
.rs-entry img { border-radius: var(--rs-radius-sm); }
.rs-entry figure { margin: 1.6em 0; }
.rs-entry figcaption { margin-top: 8px; font-size: .82rem; color: var(--rs-muted); }

.rs-entry blockquote {
	margin: 1.7em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--rs-accent);
	font-size: 1.14rem;
	color: var(--rs-fg);
}
.rs-entry blockquote p + p { margin-top: .7em; }

.rs-entry pre {
	padding: 16px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-sm);
	overflow-x: auto;
	font-size: .9rem;
}
.rs-entry code { background: var(--rs-surface-2); padding: 2px 5px; border-radius: 4px; font-size: .92em; }
.rs-entry pre code { background: none; padding: 0; }
.rs-entry table { width: 100%; border-collapse: collapse; }
.rs-entry th, .rs-entry td { padding: 10px; border: 1px solid var(--rs-border); text-align: left; }

.rs-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 32px; }
/* Categories and tags read as one block, so the second row sits close. */
.rs-tags + .rs-tags { margin-top: 12px; }
.rs-tags-label {
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rs-muted);
	/* Both labels share a column so the chips line up under each other. */
	min-width: 5.5em;
}

/* Share row */
.rs-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding: 16px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
}
.rs-share-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rs-muted); }
.rs-share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.rs-share-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: var(--rs-surface-2);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-pill);
	font-size: .85rem;
	color: var(--rs-fg);
	transition: background var(--rs-t), border-color var(--rs-t), color var(--rs-t);
}
.rs-share-btn:hover { background: var(--rs-accent); border-color: var(--rs-accent-text); color: var(--rs-accent-ink); }
.rs-share-btn.is-copied { border-color: var(--rs-accent-text); color: var(--rs-accent-text); }
.rs-share-feedback { font-size: .82rem; color: var(--rs-accent-text); }
@media (max-width: 520px) { .rs-share-text { display: none; } .rs-share-btn { padding: 10px; } }

/* Prev / next */
.rs-postnav { display: grid; gap: 12px; margin-top: 36px; }
@media (min-width: 700px) { .rs-postnav { grid-template-columns: 1fr 1fr; } }
.rs-postnav-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
	transition: border-color var(--rs-t),
	            transform var(--rs-t),
	            box-shadow var(--rs-t);
}
.rs-postnav-item:hover { border-color: var(--rs-accent-text); transform: translateY(-2px); box-shadow: var(--rs-shadow-hover); }
.rs-postnav-next { text-align: right; }
.rs-postnav-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--rs-accent-text); }
.rs-postnav-title { font-weight: 600; line-height: 1.35; }

.rs-related { margin-top: clamp(40px, 5vw, 64px); }
.rs-related .rs-section-title { margin-bottom: 20px; }

/* ==========================================================================
   9. Comments
   ========================================================================== */

.rs-comments { margin-top: clamp(40px, 5vw, 64px); }
.rs-comments .rs-section-title { margin-bottom: 20px; }

.rs-comment-list, .rs-comment-list .children { margin: 0; padding: 0; list-style: none; }
.rs-comment-list .children { margin-top: 14px; padding-left: clamp(14px, 3vw, 32px); border-left: 1px solid var(--rs-border); }
.rs-comment { margin-bottom: 18px; }

.rs-comment-body {
	padding: 16px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
}
.rs-comment-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rs-avatar { border-radius: 50%; }
.rs-comment-author { display: block; font-weight: 600; font-size: .94rem; }
.rs-comment-date { font-size: .78rem; color: var(--rs-muted); }
.rs-comment-text { font-size: .96rem; }
.rs-comment-text p + p { margin-top: .8em; }
.rs-comment-actions { margin-top: 10px; font-size: .84rem; }
.rs-comment-actions a { color: var(--rs-accent-text); }
.rs-comment-pending { font-size: .84rem; color: var(--rs-muted); font-style: italic; }

.rs-comment-form, .comment-form { margin-top: 24px; display: grid; gap: 14px; }
.comment-form p { margin: 0; display: grid; gap: 6px; }
.comment-form label { font-size: .84rem; color: var(--rs-muted); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea,
.rs-searchform input[type="search"] {
	width: 100%;
	padding: 11px 13px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius-sm);
	color: var(--rs-fg);
	outline: none;
}
.comment-form input:focus,
.comment-form textarea:focus,
.rs-searchform input:focus { border-color: var(--rs-accent-text); }
.comment-form textarea { min-height: 150px; resize: vertical; }
.rs-form-notes, .comment-notes { font-size: .84rem; color: var(--rs-muted); }

.comment-form .submit,
.rs-searchform button,
.rs-btn {
	justify-self: start;
	padding: 12px 22px;
	background: var(--rs-accent);
	color: var(--rs-accent-ink);
	border: 0;
	border-radius: var(--rs-radius-sm);
	font-weight: 600;
	cursor: pointer;
	transition: filter var(--rs-t);
}
.comment-form .submit:hover, .rs-searchform button:hover { filter: brightness(1.1); }

.rs-searchform { display: flex; gap: 8px; }
.rs-searchform input { flex: 1; }
.rs-comments-closed { color: var(--rs-muted); font-size: .9rem; }

/* ==========================================================================
   10. Sidebar & widgets
   ========================================================================== */

.rs-sidebar {
	padding-top: clamp(24px, 4vw, 40px);
	display: flex;
	flex-direction: column;
	gap: var(--rs-gap);
}
@media (min-width: 1000px) { .rs-sidebar { position: sticky; top: calc(var(--rs-header-h) + 20px); } }

.widget {
	padding: 18px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-border);
	border-radius: var(--rs-radius);
}
.widget-title {
	margin-bottom: 14px;
	font-size: .84rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--rs-muted);
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget li { padding: 7px 0; border-bottom: 1px solid var(--rs-border); font-size: .93rem; }
.widget li:last-child { border-bottom: 0; }
.widget a { transition: color var(--rs-t); }
.widget a:hover { color: var(--rs-accent-text); }
.widget select { width: 100%; padding: 10px; background: var(--rs-surface-2); border: 1px solid var(--rs-border); border-radius: var(--rs-radius-sm); }

/* ==========================================================================
   11. Footer
   ========================================================================== */

.rs-footer { border-top: 1px solid var(--rs-border); background: var(--rs-bg-2); }
.rs-footer-widgets {
	max-width: var(--rs-wrap);
	margin: 0 auto;
	padding: clamp(32px, 5vw, 56px) var(--rs-gutter);
	display: grid;
	gap: var(--rs-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.rs-footer-widgets .widget { background: none; border: 0; padding: 0; }

.rs-footer-bar {
	max-width: var(--rs-wrap);
	margin: 0 auto;
	padding: 18px var(--rs-gutter);
	border-top: 1px solid var(--rs-border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: .85rem;
	color: var(--rs-muted);
}
.rs-footer-menu { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.rs-footer-menu a { transition: color var(--rs-t); }
.rs-footer-menu a:hover { color: var(--rs-accent-text); }

/* ==========================================================================
   12. Ads
   ========================================================================== */

.rs-ad {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: var(--rs-gap) auto;
	max-width: var(--rs-wrap);
	padding: 0 var(--rs-gutter);
	/* A creative wider than its slot must never push the page sideways. */
	overflow: hidden;
}
.rs-ad:not(.is-filled) { display: none; }
.rs-ad > *, .rs-ad img, .rs-ad iframe { max-width: 100%; }
.rs-ad img { border-radius: var(--rs-radius-sm); height: auto; }
.rs-ad--single_inline { margin: 2em auto; }
.rs-ad--sidebar, .rs-ad--archive_inline { padding: 0; margin: 0; }
.rs-ad--archive_inline { margin: calc(var(--rs-gap) / 2) 0; }

/* ==========================================================================
   13. 404 & back to top
   ========================================================================== */

.rs-404 { text-align: center; padding-bottom: clamp(40px, 6vw, 80px); }
.rs-404-code {
	font-size: clamp(4rem, 16vw, 9rem);
	font-weight: 800;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px var(--rs-accent);
	letter-spacing: .02em;
}
.rs-404-title { margin-top: 10px; font-size: clamp(1.4rem, 3.4vw, 2.1rem); }
.rs-404-text { margin: 12px auto 24px; max-width: 52ch; color: var(--rs-muted); }
.rs-404 .rs-searchform { max-width: 420px; margin: 0 auto; }
.rs-404-recent { margin-top: clamp(40px, 6vw, 64px); text-align: left; }
.rs-404-recent .rs-section-title { margin-bottom: 20px; }

.rs-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 50;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	background: var(--rs-accent);
	color: var(--rs-accent-ink);
	border-radius: var(--rs-radius-pill);
	box-shadow: var(--rs-shadow);
	transition: transform var(--rs-t), filter var(--rs-t);
}
.rs-to-top[hidden] { display: none; }
.rs-to-top:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: var(--rs-shadow-hover); }

/* ==========================================================================
   14. WordPress core classes
   ========================================================================== */

.alignleft { float: left; margin: .4em 1.4em 1em 0; }
.alignright { float: right; margin: .4em 0 1em 1.4em; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide { width: min(100vw - 2 * var(--rs-gutter), 1100px); margin-left: 50%; transform: translateX(-50%); max-width: none; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { font-size: .82rem; color: var(--rs-muted); }
.sticky .rs-card-title::before { content: '★ '; color: var(--rs-accent-text); }
.bypostauthor > .rs-comment-body { border-color: var(--rs-accent-text); }

/* ==========================================================================
   15. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.rs-card:hover, .rs-card:focus-within,
	.rs-postnav-item:hover, .rs-to-top:hover { transform: none; }
	.rs-card:hover .rs-card-media img,
	.rs-card:focus-within .rs-card-media img { transform: none; }
}

/* ==========================================================================
   16. Admin-only notices
   ========================================================================== */

.rs-notice {
	padding: 14px 16px;
	border-radius: var(--rs-radius-sm);
	font-size: .9rem;
	line-height: 1.5;
}
.rs-notice--error {
	background: var(--rs-accent-soft);
	border: 1px solid var(--rs-accent);
	color: var(--rs-fg);
}
.rs-notice small { color: var(--rs-muted); word-break: break-all; }