/*
Theme Name: RollingVibe
Theme URI: https://rollingvibe.com/
Author: RollingVibe
Description: Editorial magazine theme for RollingVibe.com — music, artist spotlights, features, culture, fashion and interviews. Built around seven fixed categories with a spotlight-led homepage, category-locked sections and a Top 5 This Week rail.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
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: rollingvibe
Tags: news, blog, magazine, two-columns, custom-logo, custom-menu, featured-images, editor-style, translation-ready
*/

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

/* Values below were measured from a 1436px-wide rendering of the reference
   layout, so proportions and type scale match rather than approximate. */

:root {
	--rv-black: #000000;
	--rv-ink: #000000;
	--rv-muted: #767676;
	--rv-red: #e04040;
	--rv-red-dark: #b93333;
	--rv-line: #d9d9d9;
	--rv-line-soft: #ececec;
	/* Measured on the reference: both the vertical column rules and the
	   horizontal separators between list items are pure black hairlines. */
	--rv-divider: #000000;
	--rv-rule: #000000;
	--rv-bg: #ffffff;
	--rv-band: #f1f1f1;
	--rv-band-dark: #ebebeb;

	/* Headlines: Big Shoulders Text, heavy weights. */
	--rv-font-head: 'Big Shoulders Text', 'Oswald', 'Arial Narrow', Impact, sans-serif;
	/* Menu, category labels, buttons. */
	--rv-font-ui: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	/* Dates, read time, bylines. */
	--rv-font-meta: 'Work Sans', 'Open Sans', Arial, sans-serif;
	/* Body copy. */
	--rv-font-body: Verdana, 'Open Sans', BlinkMacSystemFont, -apple-system, 'Segoe UI', sans-serif;
	/* Logo wordmark only — deliberately not the headline face. */
	--rv-font-logo: 'Archivo Black', 'Big Shoulders Text', Impact, sans-serif;

	--rv-max: 1440px;
	--rv-pad: 24px;
	--rv-gap: 41px;      /* measured gutter between columns */
	--rv-gap-sm: 24px;   /* gutter inside a grid of cards */
}

/* =========================================================================
   2. Reset / base
   ====================================================================== */

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

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

body {
	margin: 0;
	background: var(--rv-bg);
	color: var(--rv-ink);
	font-family: var(--rv-font-body);
	font-size: 14px;
	line-height: 21px;
}

img,
svg,
video,
iframe {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--rv-red);
}

button {
	font: inherit;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rv-font-head);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: normal;
	margin: 0 0 10px;
	color: var(--rv-black);
}

p {
	margin: 0 0 1em;
}

.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;
}

.skip-link:focus {
	position: absolute;
	left: 12px;
	top: 12px;
	z-index: 999;
	background: #fff;
	padding: 10px 16px;
	clip: auto;
	width: auto;
	height: auto;
	border: 2px solid var(--rv-red);
}

:focus-visible {
	outline: 2px solid var(--rv-red);
	outline-offset: 2px;
}

.rv-container {
	width: 100%;
	max-width: var(--rv-max);
	margin: 0 auto;
	padding: 0 var(--rv-pad);
}

.rv-section {
	padding: 28px 0;
	border-bottom: 1px solid var(--rv-line-soft);
}

.rv-section:last-of-type {
	border-bottom: 0;
}

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

.rv-header {
	background: #fff;
}

.rv-header-bar__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding-top: 18px;
	padding-bottom: 18px;
}

.rv-subscribe {
	display: inline-block;
	background: var(--rv-red);
	color: #fff;
	font-family: var(--rv-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
	padding: 11px 18px;
}

.rv-subscribe:hover,
.rv-subscribe:focus {
	background: var(--rv-black);
	color: #fff;
}

.rv-header-bar__brand {
	text-align: center;
}

.rv-logo {
	margin: 0;
	font-family: var(--rv-font-head);
	font-weight: 700;
	font-size: clamp(28px, 5vw, 46px);
	letter-spacing: -0.03em;
	line-height: 1;
	text-transform: lowercase;
}

.rv-logo a:hover,
.rv-logo a:focus {
	color: var(--rv-black);
}

/* Mark + wordmark lockup, centred in the header bar. */
.rv-lockup {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.rv-mark {
	display: block;
	width: 52px;
	height: 52px;
	flex: 0 0 52px;
}

.rv-mark__svg {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * The mark rolls in from the left edge and settles beside the wordmark.
 * Rotation and travel are tied together so it reads as rolling rather than
 * sliding-and-spinning: 2 turns over roughly half the viewport.
 */
@keyframes rv-roll-in {
	0% {
		transform: translateX(-44vw) rotate(-720deg);
		opacity: 0;
	}
	18% {
		opacity: 1;
	}
	100% {
		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

.rv-mark {
	animation: rv-roll-in 1.15s cubic-bezier(.2, .75, .25, 1) both;
	transform-origin: 50% 50%;
	will-change: transform;
}

/* Wordmark uses its own face — a wide grotesque, distinct from the
   condensed headline font, so the logo reads as a mark and not a headline. */
.rv-lockup__text {
	display: inline-block;
}

.rv-wm {
	display: inline-flex;
	align-items: baseline;
	font-family: var(--rv-font-logo);
	font-weight: 400;
	font-size: 0.72em;
	letter-spacing: -0.02em;
	text-transform: lowercase;
}

.rv-wm__space {
	width: 0.26em;
}

/*
 * Letters arrive one after another as the mark decelerates, each tipping
 * upright from a slight lean — echoing the bars in the mark. The delay
 * starts at 0.58s so the first letter lands while the mark is still settling.
 */
@keyframes rv-wm-in {
	0% {
		opacity: 0;
		transform: translateY(0.42em) rotate(-12deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotate(0deg);
	}
}

.rv-wm__ch {
	display: inline-block;
	transform-origin: 50% 90%;
	animation: rv-wm-in 0.46s cubic-bezier(.22, .9, .26, 1) both;
	/* --rv-i is set inline per letter; the fallback keeps the animation
	   valid if the index is ever missing. */
	animation-delay: calc(0.58s + var(--rv-i, 0) * 0.042s);
}

/* Motion is decorative here, so honour the system preference completely. */
@media (prefers-reduced-motion: reduce) {
	.rv-mark,
	.rv-lockup__text,
	.rv-wm__ch {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 640px) {
	.rv-mark {
		width: 38px;
		height: 38px;
		flex-basis: 38px;
	}

	.rv-lockup {
		gap: 10px;
	}
}

.custom-logo-link img {
	margin: 0 auto;
	max-height: 60px;
	width: auto;
}

.rv-header-bar__right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.rv-search-toggle {
	display: none;
	background: none;
	border: 1px solid var(--rv-line);
	padding: 8px;
	color: var(--rv-black);
}

.rv-search-form {
	display: flex;
	border: 1px solid var(--rv-black);
}

.rv-search-form__field {
	border: 0;
	padding: 8px 10px;
	width: 190px;
	font-size: 14px;
	background: #fff;
	color: var(--rv-ink);
}

.rv-search-form__field:focus {
	outline: none;
}

.rv-search-form__submit {
	border: 0;
	border-left: 1px solid var(--rv-black);
	background: var(--rv-band);
	font-family: var(--rv-font-ui);
	font-size: 13px;
	font-weight: 700;
	padding: 8px 14px;
	color: var(--rv-black);
}

.rv-search-form__submit:hover {
	background: var(--rv-black);
	color: #fff;
}

/* Nav */

/* Black rule sits above the nav and is inset to the content width. */
.rv-nav-bar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-top: 3px solid var(--rv-black);
}

.rv-nav-toggle {
	display: none;
	background: none;
	border: 0;
	padding: 12px 0;
	color: var(--rv-black);
}

.rv-nav-toggle__bars span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	margin: 4px 0;
}

.rv-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
}

.rv-menu li {
	position: relative;
}

.rv-menu a {
	display: block;
	font-family: var(--rv-font-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	padding: 15px 0;
	color: var(--rv-black);
}

.rv-menu a:hover,
.rv-menu a:focus,
.rv-menu .current-menu-item > a,
.rv-menu .current-cat > a {
	color: var(--rv-red);
}

.rv-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 190px;
	background: #fff;
	border: 1px solid var(--rv-line);
	display: none;
	z-index: 40;
}

.rv-menu li:hover > .sub-menu,
.rv-menu li:focus-within > .sub-menu {
	display: block;
}

.rv-menu .sub-menu a {
	padding: 8px 14px;
}

/* =========================================================================
   4. Shared pieces: meta, thumbs, section titles, cards, rows
   ====================================================================== */

.rv-meta {
	font-family: var(--rv-font-meta);
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--rv-muted);
	margin: 8px 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	line-height: 1.4;
}

.rv-cat {
	font-family: var(--rv-font-ui);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--rv-red);
}

.rv-cat:hover,
.rv-cat:focus {
	color: var(--rv-black);
}

.rv-meta__author {
	font-weight: 700;
	color: var(--rv-ink);
}

/* Author and date read as one line, separated by a dash. */
.rv-meta__author + time::before {
	content: "- ";
	color: var(--rv-muted);
}

.rv-thumb {
	width: 100%;
	object-fit: cover;
	background: var(--rv-band);
}

.rv-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: repeating-linear-gradient(135deg, #f3f3f3 0 10px, #ececec 10px 20px);
	color: #b5b5b5;
	font-family: var(--rv-font-head);
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	padding: 8px;
}

/* 5:3 throughout, matching rollingvibe-thumb. */
.rv-thumb--small {
	width: 100px;
	height: 60px;
	flex: 0 0 100px;
	object-fit: cover;
	object-position: center 30%;
}

.rv-thumb--small.rv-thumb--placeholder {
	aspect-ratio: auto;
	font-size: 9px;
}

.rv-section-title {
	border-bottom: 1px solid var(--rv-rule);
	margin: 0 0 16px;
	padding-bottom: 4px;
	text-align: center;
}

/* Measured on the reference column headings: 32px / 48px, weight 800,
   in the headline face — not the small UI label I had here. */
.rv-section-title h1,
.rv-section-title h2 {
	margin: 0;
	font-family: var(--rv-font-head);
	font-size: 32px;
	line-height: 1.5;
	font-weight: 800;
	letter-spacing: normal;
	text-transform: uppercase;
}

.rv-section-title--band {
	background: var(--rv-band);
	border-bottom: 0;
	padding: 12px 16px;
	text-align: center;
	margin-bottom: 20px;
}

.rv-section-title--band h2 {
	font-family: var(--rv-font-head);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: .04em;
}

.rv-section-title--side h2 {
	font-size: 28px;
}

.rv-grid {
	display: grid;
	gap: var(--rv-gap-sm);
}

.rv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Thin vertical rules between grid columns, as on the reference layout.
   Applied to the card grids only, not to list stacks. */
.rv-grid--dividers > * {
	position: relative;
}

.rv-grid--dividers > *::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(var(--rv-gap-sm) / -2);
	width: 1px;
	background: var(--rv-divider);
}

.rv-grid--dividers.rv-grid--4 > *:nth-child(4n)::after,
.rv-grid--dividers.rv-grid--2 > *:nth-child(2n)::after,
.rv-grid--dividers > *:last-child::after {
	display: none;
}

/* Card — borderless image with the headline in a white box that overlaps
   the bottom of the image, everything centred. */

.rv-card {
	display: flex;
	flex-direction: column;
	background: transparent;
	height: 100%;
}

.rv-card__media {
	display: block;
	overflow: hidden;
}

/* 5:3 — matches the rollingvibe-card crop, so no second crop happens.
   Position is biased above centre because faces sit high in most
   editorial photography; dead-centre cropping decapitates portraits. */
.rv-card__media img,
.rv-card__media .rv-thumb--placeholder {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	object-position: center 30%;
}

.rv-card__body {
	position: relative;
	z-index: 2;
	margin: -38px 14px 0;
	padding: 10px 8px 0;
	background: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.rv-card__title {
	font-size: 26px;
	line-height: 1.12;
	font-weight: 800;
	margin: 0;
}

.rv-card--compact .rv-card__title {
	font-size: 22px;
}

.rv-card__excerpt {
	font-family: var(--rv-font-body);
	font-size: 13px;
	line-height: 1.5;
	color: var(--rv-muted);
	margin: 8px 0 0;
	overflow-wrap: anywhere;
}

.rv-card__body .rv-meta {
	justify-content: center;
	margin-top: 6px;
}

/* Row — thumbnail left, headline right, horizontal rule between rows. */

.rv-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rv-rule);
	text-align: left;
}

.rv-row--thumb-first .rv-row__media {
	order: -1;
}

.rv-row__media {
	order: -1;
	flex: 0 0 100px;
}

.rv-row--thumb-right .rv-row__media {
	order: 2;
}

.rv-row__body {
	flex: 1;
	min-width: 0;
}

.rv-row__title {
	font-size: 19px;
	line-height: 1.15;
	font-weight: 800;
	margin: 0;
}

.rv-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* The last row in a list keeps its rule — the reference closes every
   column with a line rather than trailing off. */

/* =========================================================================
   5. Homepage — Artist Spotlights hero (item 2)
   ====================================================================== */

.rv-spotlights {
	padding-top: 24px;
}

.rv-spotlights__top {
	margin-bottom: var(--rv-gap);
}

.rv-card--lead .rv-card__title {
	font-size: 26px;
}

/* =========================================================================
   6. Homepage — Top 5 | features | News (item 3)
   ====================================================================== */

/* Measured: 313 / 665 / 313 columns with 41px gutters inside a 1373px area.
   Columns stretch so the vertical rules run the full height of the row
   rather than stopping where the shortest column's content ends. */
.rv-triple__inner {
	display: grid;
	grid-template-columns: 313fr 665fr 313fr;
	gap: var(--rv-gap);
	align-items: stretch;
}

.rv-top5 {
	border: 1px solid var(--rv-line);
}

.rv-top5__title {
	background: var(--rv-red);
	color: #fff;
	margin: 0;
	padding: 10px 12px;
	font-family: var(--rv-font-head);
	font-size: 20px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.rv-top5__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rvtop;
}

/* Measured against the reference rail: rows run ~130-146px tall with
   20-24px headlines. Undersized rows here left the whole left column
   far shorter than the two beside it. */
.rv-top5__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 12px;
	border-bottom: 1px solid var(--rv-rule);
	position: relative;
	min-height: 118px;
}

.rv-top5__item:last-child {
	border-bottom: 0;
}

.rv-top5__media {
	flex: 0 0 80px;
}

.rv-top5__media .rv-thumb--small {
	width: 80px;
	height: 72px;
	flex-basis: 80px;
}

.rv-top5__body {
	flex: 1;
	min-width: 0;
}

/* Numeral gutter is only reserved when numerals are actually shown,
   otherwise the headline column loses width and wraps far more.
   The exact value is set with the rest of the numbered-rail sizing below. */

/* Category names here are longer than the reference's ("ARTIST SPOTLIGHTS"
   vs "MUSIC"), so the label is smaller and never breaks across lines —
   otherwise the closing pipe orphans onto a line of its own. */
.rv-top5 .rv-cat {
	font-size: 12px;
	white-space: nowrap;
}

.rv-top5 .rv-meta {
	gap: 6px;
	overflow: hidden;
}

/* Measured on the reference rail: 24px / 28.8px at weight 700. */
.rv-top5__headline {
	font-size: 24px;
	line-height: 1.2;
	font-weight: 700;
	margin: 0;
}

/* Numeral sits large and low on the right. Size estimated from the
   reference screenshot — the element resists measurement, so this is the
   one value here not taken from computed styles. */
.rv-top5__num {
	position: absolute;
	right: 10px;
	bottom: 2px;
	font-family: var(--rv-font-head);
	font-size: 54px;
	line-height: 1;
	font-weight: 800;
	color: #dcdcdc;
	pointer-events: none;
}

/* The numbered rail (category + single) sits in a 313px column. A 94px
   thumbnail plus a 46px numeral gutter left only ~140px for the headline,
   which wrapped almost every word onto its own line. Smaller thumbnail,
   tighter gutter and a smaller headline give the text roughly 175px. */
.rv-top5--numbered .rv-top5__item {
	padding: 12px 10px;
	min-height: 104px;
}

.rv-top5--numbered .rv-top5__headline {
	font-size: 19px;
	line-height: 1.15;
}

.rv-top5--numbered .rv-top5__body {
	padding-right: 30px;
}

.rv-top5--numbered .rv-top5__media {
	flex: 0 0 78px;
}

.rv-top5--numbered .rv-top5__media .rv-thumb--small {
	width: 78px;
	height: 70px;
	flex-basis: 78px;
}

.rv-top5--numbered .rv-top5__num {
	font-size: 44px;
	right: 6px;
}

.rv-triple__center {
	display: flex;
	flex-direction: column;
	gap: 26px;
}

/* 2:1 — matches the rollingvibe-hero crop. */
.rv-feature__media img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	object-position: center 30%;
}

/* Measured: 45px with a notably airy 59.4px line-height (1.32). */
.rv-feature__title {
	font-size: clamp(30px, 3.4vw, 45px);
	line-height: 1.32;
	font-weight: 800;
	margin: 16px 0 0;
}

.rv-feature .rv-meta {
	margin-top: 10px;
}

.rv-triple__right .rv-row {
	padding-bottom: 16px;
}

/* Measured on the reference news column: 22px / 24.2px at weight 800. */
.rv-triple__right .rv-row__title {
	font-size: 22px;
	line-height: 1.1;
	font-weight: 800;
}

/* Dates in the list columns are black, not muted grey. */
.rv-row .rv-meta time {
	color: var(--rv-ink);
}

/* Vertical rules separating the three columns. The parent uses
   align-items: stretch so these run the full height of the row. */
.rv-triple__left,
.rv-triple__center {
	position: relative;
}

.rv-triple__left::after,
.rv-triple__center::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(var(--rv-gap) / -2);
	width: 1px;
	background: var(--rv-divider);
}

/* Same treatment on the Features / Fashion / Culture row. The Fashion
   column carries its own box border, so rules go outside it. */
.rv-cols3__col {
	position: relative;
}

.rv-cols3__col:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(var(--rv-gap) / -2);
	width: 1px;
	background: var(--rv-divider);
}

.rv-cols3__col--fashion::after,
.rv-cols3__col--fashion + .rv-cols3__col::after {
	display: none;
}

/* Rules between the two content columns and to the left of the sidebar.
   Hung off the content columns, which stretch to the full row height —
   the sidebar itself is align-self:start so that it can stick. */
.rv-latest__cola,
.rv-latest__colb {
	position: relative;
}

.rv-latest__cola::after,
.rv-latest__colb::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: calc(var(--rv-gap) / -2);
	width: 1px;
	background: var(--rv-divider);
}

/* =========================================================================
   7. Homepage — Music (item 4)
   ====================================================================== */

/* Measured: two equal 666/667 columns with a 41px gutter. */
.rv-music__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--rv-gap);
	align-items: start;
}

/* Measured in the Music section: grid cards crop at 1.25 (323x258),
   while the side list crops at 1.67 (333x200) with the thumbnail taking
   half the column. These are the opposite way round from the hero grid. */
.rv-music__cards .rv-card__media img,
.rv-music__cards .rv-card__media .rv-thumb--placeholder {
	aspect-ratio: 5 / 4;
}

.rv-music__cards .rv-card__title {
	font-size: 22px;
	line-height: 1.2;
}

/* First row of cards carries a rule beneath it. */
.rv-music__cards > *:nth-child(-n+2) {
	border-bottom: 1px solid var(--rv-rule);
	padding-bottom: 20px;
}

/* Side list: half-width thumbnail at 1.67, 28px headline, left aligned. */
.rv-music__list .rv-row {
	gap: 20px;
	padding-bottom: 20px;
}

.rv-music__list .rv-row__media {
	flex: 0 0 50%;
}

.rv-music__list .rv-thumb--small {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 3;
	flex-basis: auto;
}

.rv-music__list .rv-row__title {
	font-size: 28px;
	line-height: 1.1;
}

/* =========================================================================
   8. Homepage — Features | Fashion | Culture (item 5)
   ====================================================================== */

/* Measured: 397 / 557 / 378 columns on ~21px gutters — this row uses a
   tighter gutter than the Top 5 row above it, and a wider centre. */
.rv-cols3__inner {
	display: grid;
	grid-template-columns: 397fr 557fr 378fr;
	gap: 21px;
	align-items: stretch;
}

/* Centre column sits inside a boxed border, as on the reference layout. */
.rv-cols3__col--fashion {
	border: 1px solid var(--rv-black);
	padding: 16px 18px 20px;
}

/* Headings in this row are centred. */
.rv-cols3 .rv-section-title {
	text-align: center;
}

.rv-cols3__col--fashion .rv-section-title h2 {
	color: var(--rv-red);
}

.rv-cols3__col--fashion .rv-section-title h2 a {
	color: inherit;
}

/* Side columns: no category label, thumbnail right. Headlines here are
   full size (22px), not the compact treatment I had them at. */
.rv-cols3__col .rv-row__title {
	font-size: 22px;
	line-height: 1.2;
	font-weight: 800;
}

.rv-cols3__col .rv-row {
	gap: 14px;
	padding-bottom: 16px;
}

.rv-cols3__col .rv-thumb--small {
	width: 113px;
	height: 68px;
	flex-basis: 113px;
}

.rv-cols3__col .rv-row__media {
	flex: 0 0 113px;
}

.rv-slider__nav {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
}

.rv-slider__nav button {
	border: 1px solid var(--rv-line);
	background: #fff;
	width: 30px;
	height: 26px;
	line-height: 1;
	font-size: 18px;
	color: var(--rv-black);
}

.rv-slider__nav button:hover {
	background: var(--rv-black);
	color: #fff;
}

/* Measured: 516x309 image (1.67, not square) under a 48px/62.4px title. */
.rv-slide__media img,
.rv-slide__media .rv-thumb--placeholder {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	object-position: center 30%;
}

.rv-slide__title {
	font-size: 48px;
	line-height: 1.3;
	font-weight: 800;
	margin: 18px 0 0;
	text-align: center;
}

.rv-slide .rv-meta {
	justify-content: center;
}

.rv-slide__excerpt {
	font-size: 13px;
	color: var(--rv-muted);
	margin: 10px 0 0;
	text-align: center;
	overflow-wrap: anywhere;
}

/* =========================================================================
   9. Homepage — Latest Posts + Artist Interviews (item 6)
   ====================================================================== */

/* Measured: 666 / 340 / 285 columns on 41px gutters. The left column runs
   wide rows, the middle stacks cards, the sidebar is a plain list. */
.rv-latest__inner {
	display: grid;
	grid-template-columns: 666fr 340fr 285fr;
	gap: var(--rv-gap);
	align-items: stretch;
}

.rv-latest__head {
	grid-column: 1 / 3;
}

.rv-latest__cola { grid-column: 1; }
.rv-latest__colb { grid-column: 2; display: flex; flex-direction: column; gap: 22px; }

/* Sidebar follows the scroll: align-self:start keeps the grid item from
   stretching, which is what makes position:sticky able to move at all.
   The offset clears the WordPress admin bar when it's present. */
/* Rows 1-2 only, deliberately excluding the button row. A sticky element
   can travel to the bottom of its grid area, so if this spanned the button
   row too it would slide below the content columns and end out of line. */
.rv-latest__side {
	grid-column: 3;
	grid-row: 1 / 3;
	align-self: start;
	position: sticky;
	top: 24px;
}

.admin-bar .rv-latest__side {
	top: 56px;
}

/* "LATEST POSTS" is the largest heading on the page: 54px / 64.8px in red. */
.rv-latest__head .rv-section-title {
	border-bottom: 0;
	text-align: center;
	margin-bottom: 22px;
}

.rv-latest__head .rv-section-title h2 {
	font-size: 54px;
	line-height: 1.2;
	color: var(--rv-red);
	letter-spacing: .02em;
}

/* Left column: thumbnail takes half the column, 28px headline, and the
   text block sits vertically centred against the image rather than
   top-aligned like the narrower list rows elsewhere. */
.rv-latest__cola .rv-row {
	align-items: center;
}

.rv-latest__cola .rv-row__media {
	flex: 0 0 50%;
}

.rv-latest__cola .rv-thumb--small {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	flex-basis: auto;
}

.rv-latest__cola .rv-row__title {
	font-size: 28px;
	line-height: 1.1;
}

/* Middle column cards crop at 1.25 with a 22px centred headline. */
.rv-latest__colb .rv-card__media img,
.rv-latest__colb .rv-card__media .rv-thumb--placeholder {
	aspect-ratio: 5 / 4;
}

.rv-latest__colb .rv-card__title {
	font-size: 22px;
	line-height: 1.2;
}

/* Cards in this column close with a rule too, matching the rows beside them. */
.rv-latest__colb .rv-card {
	border-bottom: 1px solid var(--rv-rule);
	padding-bottom: 20px;
}

.rv-latest__side .rv-section-title {
	text-align: center;
	border-bottom: 0;
	margin-bottom: 0;
}

/* Red sub-label band under the sidebar heading. */
.rv-side-band {
	margin: 0 0 14px;
	padding: 11px 12px;
	background: var(--rv-red);
	color: #fff;
	font-family: var(--rv-font-head);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}

.rv-latest__side .rv-row__title {
	font-size: 22px;
	line-height: 1.1;
}

.rv-row--latest {
	padding-bottom: 18px;
}


.rv-button {
	display: inline-block;
	background: var(--rv-black);
	color: #fff;
	font-family: var(--rv-font-ui);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	padding: 12px 26px;
	border: 0;
}

.rv-button:hover,
.rv-button:focus {
	background: var(--rv-red);
	color: #fff;
}

.rv-side-lead {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rv-rule);
}

.rv-side-lead__media img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	object-position: center 30%;
}

.rv-side-lead__title {
	font-size: 17px;
	margin: 12px 0 0;
}

.rv-empty {
	font-size: 14px;
	color: var(--rv-muted);
}

/* Visible only to logged-in editors — flags a block with no content. */
.rv-admin-note {
	margin: 12px 0;
	padding: 10px 14px;
	border-left: 4px solid var(--rv-red);
	background: #fff6f6;
	font-family: var(--rv-font-ui);
	font-size: 13px;
	line-height: 1.5;
	color: #5a2020;
}

.rv-admin-note strong {
	color: var(--rv-red);
}

/* =========================================================================
   9b. Homepage about block
   ====================================================================== */

/* Sits in a narrower 1068px column than the article grid above it. */
.rv-about {
	padding: 44px 0 52px;
	border-bottom: 0;
}

.rv-about__inner {
	max-width: 1068px;
	margin: 0 auto;
}

/* The rule runs the full column width; the black chip sits on top of it. */
.rv-about__title {
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 2px solid #222222;
	font-size: 0;
	line-height: 0;
}

.rv-about__chip {
	display: inline-block;
	background: #222222;
	color: #ffffff;
	font-family: var(--rv-font-ui);
	font-size: 14px;
	line-height: 17px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	padding: 7px 12px 4px;
}

.rv-about__text p {
	font-family: var(--rv-font-body);
	font-size: 17px;
	line-height: 1.7;
	color: var(--rv-ink);
	margin: 0 0 1em;
}

.rv-about__text p:last-child {
	margin-bottom: 0;
}

@media (max-width: 900px) {
	.rv-about {
		padding: 32px 0 36px;
	}

	.rv-about__text p {
		font-size: 15px;
	}
}

/* =========================================================================
   9c. Category archive
   ====================================================================== */

/* Full-bleed grey band. Measured: #ededed, 234px tall. */
.rv-cat-band {
	background: #ededed;
	padding: 52px 0 46px;
	margin-bottom: 40px;
	text-align: center;
}

.rv-cat-band__title {
	margin: 0;
	font-family: var(--rv-font-head);
	font-size: 42px;
	line-height: 1.2;
	font-weight: 800;
	color: #111111;
	text-transform: uppercase;
}

.rv-cat-band__nav ul {
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px;
}

.rv-cat-band__nav a {
	font-family: var(--rv-font-head);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #000000;
	text-transform: uppercase;
}

.rv-cat-band__nav a:hover,
.rv-cat-band__nav a:focus {
	color: var(--rv-red);
}

.rv-cat-band__desc {
	max-width: 760px;
	margin: 18px auto 0;
	font-size: 14px;
	color: #444444;
}

.rv-cat-lead {
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

/* Measured: 1020px main column beside a 313px rail. The top gap separates
   the lead card row from the list below it. */
.rv-cat-body {
	display: grid;
	grid-template-columns: 1020fr 313fr;
	gap: var(--rv-gap);
	align-items: start;
	padding-top: 64px;
	padding-bottom: 40px;
}

/* Rail follows the scroll, as on the homepage. align-self:start keeps the
   grid item from stretching, which is what lets sticky move at all. */
.rv-cat-side {
	align-self: start;
	position: sticky;
	top: 24px;
}

.admin-bar .rv-cat-side {
	top: 56px;
}

/* Two columns of wide rows inside the main column. */
.rv-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 30px;
}

.rv-row--cat .rv-row__media {
	flex: 0 0 196px;
}

.rv-row--cat .rv-thumb--small {
	width: 196px;
	height: 157px;
	flex-basis: 196px;
	aspect-ratio: auto;
}

.rv-row--cat .rv-row__title {
	font-size: 24px;
	line-height: 1.1;
}

/* Paging sits under the article column only. Spanning both columns put it
   in the same horizontal band as the rail, so on short pages — where the
   rail runs longer than the list — the two overlapped. */
.rv-cat-foot {
	grid-column: 1;
	margin-top: 8px;
}

/* Compact outlined control, centred under the list — not the full-width
   black bar I had. My earlier measurement picked up the wrapper element
   rather than the button itself. */
.rv-cat-more {
	margin-top: 34px;
	text-align: center;
}

/* Numbered paging aligns right. */
.rv-cat-foot .pagination {
	margin-top: 30px;
}

.rv-cat-foot .pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 6px;
}

.rv-cat-foot .pagination .page-numbers {
	margin: 0;
}

/* The screen-reader heading WordPress prints above paging links. */
.rv-cat-foot .pagination .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.rv-cat-more a {
	display: inline-block;
	background: #ffffff;
	color: var(--rv-black);
	border: 2px solid var(--rv-black);
	font-family: var(--rv-font-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	padding: 15px 30px;
}

.rv-cat-more a:hover,
.rv-cat-more a:focus {
	background: var(--rv-red);
	color: #ffffff;
}

@media (max-width: 900px) {
	.rv-cat-band {
		padding: 34px 0 30px;
		margin-bottom: 28px;
	}

	.rv-cat-band__title {
		font-size: 32px;
	}

	.rv-cat-band__nav a {
		font-size: 17px;
	}

	.rv-cat-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-cat-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-row--cat .rv-row__media {
		flex: 0 0 130px;
	}

	.rv-row--cat .rv-thumb--small {
		width: 130px;
		height: 104px;
		flex-basis: 130px;
	}

	.rv-row--cat .rv-row__title {
		font-size: 19px;
	}
}

/* =========================================================================
   10. Single post (item 8) + archives
   ====================================================================== */

.rv-single,
.rv-archive {
	display: grid;
	grid-template-columns: 313px minmax(0, 1fr);
	gap: var(--rv-gap);
	align-items: start;
	padding-top: 32px;
	padding-bottom: 40px;
}

.rv-archive {
	grid-template-columns: minmax(0, 1fr) 313px;
}

/* Article page rail follows the scroll, same as the homepage and category
   rails. align-self:start stops the grid item stretching, which is what
   allows sticky to travel at all. */
.rv-single__side,
.rv-archive__side {
	align-self: start;
	position: sticky;
	top: 24px;
}

.admin-bar .rv-single__side,
.admin-bar .rv-archive__side {
	top: 56px;
}

.rv-article__title {
	font-size: clamp(30px, 4.4vw, 50px);
	line-height: 1.05;
	margin: 0 0 12px;
}

.rv-article__cat {
	margin: 0 0 10px;
	font-family: var(--rv-font-meta);
	font-size: 13px;
	letter-spacing: .08em;
}

.rv-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-family: var(--rv-font-meta);
	font-size: 13px;
	color: var(--rv-muted);
	text-transform: none;
	letter-spacing: normal;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rv-line-soft);
}

.rv-article__avatar {
	border-radius: 50%;
}

.rv-article__author {
	font-weight: 700;
	color: var(--rv-ink);
}

.rv-article__sep {
	color: var(--rv-line);
}

.rv-article__figure {
	margin: 22px 0;
}

.rv-article__figure img {
	width: 100%;
	height: auto;
}

.rv-article__figure figcaption {
	font-size: 12px;
	color: var(--rv-muted);
	margin-top: 6px;
}

.rv-article__content {
	font-size: 15px;
	line-height: 1.7;
}

.rv-article__content h2 { font-size: 28px; margin-top: 34px; }
.rv-article__content h3 { font-size: 23px; margin-top: 28px; }

.rv-article__content a {
	color: var(--rv-red);
	text-decoration: underline;
}

.rv-article__content blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 4px solid var(--rv-red);
	font-size: 19px;
	font-style: italic;
	color: var(--rv-black);
}

.rv-article__content img {
	height: auto;
}

.rv-article__content ul,
.rv-article__content ol {
	padding-left: 22px;
}

.rv-article__content figure {
	margin: 22px 0;
}

.rv-article__content table {
	width: 100%;
	border-collapse: collapse;
}

.rv-article__content th,
.rv-article__content td {
	border: 1px solid var(--rv-line);
	padding: 8px 10px;
	text-align: left;
}

.rv-article__tags {
	margin: 24px 0;
	font-family: var(--rv-font-meta);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.rv-article__tags a {
	display: inline-block;
	border: 1px solid var(--rv-line);
	padding: 4px 10px;
	margin: 0 6px 6px 0;
}

.rv-author-box {
	display: flex;
	gap: 16px;
	padding: 18px;
	background: var(--rv-band);
	margin: 28px 0;
}

.rv-author-box img {
	border-radius: 50%;
	flex: 0 0 auto;
}

.rv-author-box__name {
	font-size: 18px;
	margin: 0 0 4px;
}

.rv-author-box__bio {
	margin: 0;
	font-size: 14px;
	color: var(--rv-muted);
}

.rv-post-nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin: 28px 0;
	padding-top: 20px;
	border-top: 1px solid var(--rv-line-soft);
	font-family: var(--rv-font-head);
	font-size: 16px;
}

.rv-post-nav span {
	display: block;
	font-family: var(--rv-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--rv-red);
	margin-bottom: 4px;
}

.rv-post-nav__next {
	text-align: right;
}

.rv-related {
	margin: 36px 0 10px;
}

.rv-page,
.rv-404 {
	padding: 34px 0 50px;
	max-width: 820px;
}

.rv-archive__desc {
	margin-bottom: 20px;
	color: var(--rv-muted);
}

.pagination,
.navigation.pagination {
	margin-top: 30px;
	font-family: var(--rv-font-ui);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 13px;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 8px 13px;
	border: 1px solid var(--rv-line);
	margin: 0 3px 6px 0;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--rv-black);
	color: #fff;
	border-color: var(--rv-black);
}

/* Comments */

.rv-comments {
	margin-top: 40px;
}

.rv-comment-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.rv-comment-list ol.children {
	list-style: none;
	padding-left: 26px;
}

.rv-comment-list .comment-body {
	padding: 14px 0;
	border-bottom: 1px solid var(--rv-line-soft);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--rv-line);
	font: inherit;
	font-size: 15px;
}

.comment-form .submit {
	background: var(--rv-black);
	color: #fff;
	border: 0;
	font-family: var(--rv-font-meta);
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 11px 26px;
}

/* =========================================================================
   11. Footer (item 7)
   ====================================================================== */

.rv-footer {
	margin-top: 30px;
	border-top: 3px solid var(--rv-black);
	background: #fff;
}

.rv-footer-brand {
	background: var(--rv-band);
	border-bottom: 1px solid var(--rv-line);
}

.rv-footer-brand__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-top: 14px;
	padding-bottom: 14px;
	flex-wrap: wrap;
}

.rv-logo--footer {
	font-size: 32px;
}

.rv-menu--footer {
	gap: 18px;
	justify-content: flex-end;
}

.rv-menu--footer a {
	padding: 4px 0;
	font-size: 12px;
}

/* Three columns: About, Submit, Important Pages. Latest Articles and
   Most Popular were struck out in the brief and are gone from the markup. */
.rv-footer-cols {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1.1fr;
	gap: 48px;
	padding-top: 34px;
	padding-bottom: 34px;
}

.rv-footer-heading {
	font-family: var(--rv-font-ui);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: uppercase;
	border-bottom: 2px solid var(--rv-black);
	padding-bottom: 6px;
	margin-bottom: 14px;
}

.rv-footer-about p {
	font-size: 13.5px;
	color: var(--rv-muted);
	line-height: 1.65;
}

.rv-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rv-footer-list > li > a {
	font-family: var(--rv-font-head);
	font-weight: 800;
	font-size: 17px;
	line-height: 1.2;
	display: block;
}

.rv-footer-list .rv-meta {
	margin-top: 4px;
}

.rv-footer-list--pages {
	gap: 9px;
}

.rv-footer-list--pages > li > a {
	font-family: var(--rv-font-ui);
	font-size: 14px;
	font-weight: 700;
}

/* Now its own column, so no divider rule above it. */
.rv-footer-submit p {
	font-size: 13.5px;
	line-height: 1.65;
	margin: 0 0 14px;
	color: var(--rv-muted);
}

.rv-footer-submit a {
	color: var(--rv-red);
	font-weight: 700;
}

.rv-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 10px;
}

.rv-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--rv-line);
	color: var(--rv-black);
}

.rv-social a:hover,
.rv-social a:focus {
	background: var(--rv-red);
	border-color: var(--rv-red);
	color: #fff;
}

.rv-footer-bottom {
	border-top: 1px solid var(--rv-line);
	padding: 16px 0;
	text-align: center;
}

.rv-footer-bottom p {
	margin: 0;
	font-family: var(--rv-font-meta);
	font-size: 13px;
	color: var(--rv-muted);
}

.rv-back-to-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--rv-red);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
	z-index: 50;
}

.rv-back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.rv-back-to-top:hover,
.rv-back-to-top:focus {
	background: var(--rv-black);
	color: #fff;
}

/* =========================================================================
   12. WordPress core classes
   ====================================================================== */

.alignleft { float: left; margin: 6px 20px 12px 0; }
.alignright { float: right; margin: 6px 0 12px 20px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-block-image figcaption {
	font-size: 12px;
	color: var(--rv-muted);
}
.sticky .rv-card { border-color: var(--rv-red); }

/* =========================================================================
   13. Responsive
   ====================================================================== */

@media (max-width: 1080px) {
	.rv-triple__inner {
		grid-template-columns: 220px minmax(0, 1fr);
	}
	.rv-triple__right {
		grid-column: 1 / -1;
	}
	.rv-triple__right .rv-stack {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 28px;
	}
	.rv-footer-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	:root {
		--rv-gap: 28px;
		--rv-gap-sm: 20px;
		--rv-pad: 16px;
	}

	.rv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rv-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.rv-music__inner,
	.rv-latest__inner,
	.rv-single,
	.rv-archive {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-single__side {
		order: 2;
	}

	.rv-cols3__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-cols3__col--fashion {
		border: 0;
		padding: 0;
	}

	/*
	 * Collapsing a grid needs the explicit item placements cleared too.
	 * Setting grid-template-columns to a single column is not enough: any
	 * child still asking for column 2 or 3 makes the browser create implicit
	 * columns, which is what squeezed Latest Posts into slivers on phones.
	 */
	.rv-latest__head,
	.rv-latest__cola,
	.rv-latest__colb,
	.rv-latest__side {
		grid-column: 1 / -1;
		grid-row: auto;
	}

	/* Sticky rails behave as normal blocks once stacked. */
	.rv-latest__side,
	.rv-cat-side,
	.rv-single__side,
	.rv-archive__side {
		position: static;
		top: auto;
	}

	/* Vertical rules make no sense in a stacked layout. */
	.rv-grid--dividers > *::after,
	.rv-triple__left::after,
	.rv-triple__center::after,
	.rv-cols3__col::after,
	.rv-latest__cola::after,
	.rv-latest__colb::after {
		display: none;
	}

	/* Wide half-column thumbnails get too small once stacked. */
	.rv-latest__cola .rv-row__media,
	.rv-music__list .rv-row__media {
		flex: 0 0 40%;
	}

	.rv-latest__grid,
	.rv-cat-body {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-header-bar__inner {
		grid-template-columns: auto 1fr auto;
	}

	.rv-search-toggle {
		display: inline-flex;
	}

	.rv-search {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		padding: 12px 20px;
		background: #fff;
		border-top: 1px solid var(--rv-line);
		z-index: 30;
	}

	.rv-search.is-open {
		display: block;
	}

	.rv-header-bar__inner {
		position: relative;
	}

	.rv-search-form__field {
		width: 100%;
	}

	.rv-nav-bar__inner {
		justify-content: flex-start;
		flex-direction: column;
		align-items: stretch;
	}

	.rv-nav-toggle {
		display: block;
		align-self: flex-start;
	}

	.rv-nav {
		display: none;
	}

	.rv-nav.is-open {
		display: block;
		padding-bottom: 10px;
	}

	.rv-nav .rv-menu {
		flex-direction: column;
		gap: 0;
		align-items: stretch;
	}

	.rv-nav .rv-menu a {
		padding: 10px 0;
		border-bottom: 1px solid var(--rv-line-soft);
	}

	.rv-nav .rv-menu .sub-menu {
		position: static;
		border: 0;
		display: block;
		padding-left: 14px;
	}

	.rv-menu--footer {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	.rv-triple__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-triple__right .rv-stack,
	.rv-latest__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-grid--4,
	.rv-grid--3,
	.rv-grid--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-footer-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.rv-post-nav {
		grid-template-columns: minmax(0, 1fr);
	}

	.rv-post-nav__next {
		text-align: left;
	}

	.rv-subscribe {
		font-size: 11px;
		padding: 6px 10px;
	}
}

@media print {
	.rv-header, .rv-footer, .rv-single__side, .rv-back-to-top, .rv-related {
		display: none !important;
	}
}