/*
Theme Name: ShekharrTV
Author: Aathi Kesavan
Description: Custom movie review theme for ShekharrTV. Noir editorial.
Version: 0.2.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shekharrtv
*/

/* ============================================
   TOKENS
   ============================================ */
:root {
	--noir: #0c0c0d;
	--noir-2: #141416;
	--noir-3: #1b1b1e;
	--cream: #ece6da;
	--cream-2: #f4efe6;
	--dim: #8f887b;
	--gold: #c9a227;
	--gold-lt: #e4c874;
	--line: rgba(236, 230, 218, 0.13);

	/* verdict — muted so they sit with the gold, not against it */
	--watch: #4a7a52;
	--watch-lt: #7fae86;
	--skip: #9b3a32;
	--skip-lt: #d0796f;

	--f-display: "Bodoni Moda", Georgia, serif;
	--f-body: "Archivo", "Helvetica Neue", sans-serif;
	--f-mono: "DM Mono", ui-monospace, monospace;

	--wrap: 1280px;
	--gut: 32px;
}

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

body {
	margin: 0;
	background: var(--noir);
	color: var(--cream);
	font-family: var(--f-body);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.01em;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; margin: 0; line-height: 1.1; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--gut);
}

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

/* ============================================
   VERDICT BADGE
   ============================================ */
.verdict {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--f-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 6px 10px;
	border: 1px solid;
	white-space: nowrap;
	backdrop-filter: blur(6px);
}
.verdict::before {
	content: "";
	width: 5px; height: 5px;
	border-radius: 50%;
	background: currentColor;
}
.verdict.is-watch {
	color: var(--watch-lt);
	border-color: rgba(127, 174, 134, 0.4);
	background: rgba(74, 122, 82, 0.22);
}
.verdict.is-skip {
	color: var(--skip-lt);
	border-color: rgba(208, 121, 111, 0.4);
	background: rgba(155, 58, 50, 0.22);
}

/* ============================================
   HEADER
   ============================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(12, 12, 13, 0.82);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 76px;
}

.brand {
	font-family: var(--f-display);
	font-size: 26px;
	letter-spacing: 0.02em;
	color: var(--cream-2);
	line-height: 1;
}
.brand:hover { color: var(--gold-lt); }

.site-nav ul {
	display: flex;
	gap: 34px;
	align-items: center;
}
.site-nav a {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	padding: 6px 0;
	border-bottom: 1px solid transparent;
}
.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--cream);
	border-bottom-color: var(--gold);
}

.header-tools { display: flex; align-items: center; gap: 14px; }

.icon-btn {
	width: 38px; height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	color: var(--dim);
}
.icon-btn:hover { color: var(--gold-lt); border-color: rgba(201, 162, 39, 0.45); }
.icon-btn svg { width: 15px; height: 15px; }

.nav-toggle { display: none; }

/* search drawer */
.search-drawer {
	display: none;
	border-bottom: 1px solid var(--line);
	background: var(--noir-2);
}
.search-drawer.is-open { display: block; }
.search-drawer form {
	display: flex;
	gap: 12px;
	padding: 22px 0;
}
.search-drawer input[type="search"] {
	flex: 1;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	color: var(--cream);
	font-family: var(--f-display);
	font-size: 24px;
	padding: 8px 0;
	outline: none;
}
.search-drawer input[type="search"]::placeholder { color: var(--dim); }
.search-drawer input[type="search"]:focus { border-bottom-color: var(--gold); }
.search-drawer button[type="submit"] {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-lt);
	padding: 0 8px;
}

/* ============================================
   SECTION FURNITURE
   ============================================ */
.section { padding: 96px 0; }
.section + .section { border-top: 1px solid var(--line); }

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
}

.eyebrow {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0 0 14px;
}
.eyebrow em {
	font-style: normal;
	color: var(--gold);
}

.section-title {
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -0.01em;
}

.link-more {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	border-bottom: 1px solid var(--line);
	padding-bottom: 4px;
	white-space: nowrap;
}
.link-more:hover { color: var(--gold-lt); border-bottom-color: var(--gold); }

/* ============================================
   HERO
   ============================================ */
.hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	filter: grayscale(0.35) contrast(1.05);
}
.hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--noir) 4%, rgba(12,12,13,0.72) 42%, rgba(12,12,13,0.35) 100%),
		linear-gradient(to right, rgba(12,12,13,0.85) 0%, rgba(12,12,13,0.1) 65%);
}

.hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 140px;
	padding-bottom: 72px;
}

.hero-copy { max-width: 720px; }

.hero-title {
	font-size: clamp(44px, 7vw, 88px);
	letter-spacing: -0.02em;
	margin: 18px 0 20px;
	color: var(--cream-2);
}
.hero-title a:hover { color: var(--gold-lt); }

.hero-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
}

.hero-hook {
	font-size: 18px;
	line-height: 1.65;
	color: var(--cream);
	opacity: 0.86;
	max-width: 560px;
	margin-bottom: 30px;
}

.hero-foot {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
}

.byline {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}
.byline strong { color: var(--cream); font-weight: 500; }

.btn {
	display: inline-block;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 14px 26px;
	border: 1px solid var(--gold);
	color: var(--gold-lt);
}
.btn:hover { background: var(--gold); color: var(--noir); }

/* ============================================
   NEW REVIEWS — indexed list
   ============================================ */
.index-list { border-top: 1px solid var(--line); }

.index-row {
	display: grid;
	grid-template-columns: 60px 1fr auto auto;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}
.index-row:hover .index-title { color: var(--gold-lt); }

.index-num {
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--dim);
}

.index-title {
	font-family: var(--f-display);
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: 1.2;
}

.index-by {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

/* ============================================
   POSTER GRID
   ============================================ */
.grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 34px 26px;
}

.card-media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--noir-3);
	border: 1px solid var(--line);
}
.card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card:hover .card-media img { opacity: 0.82; }

.card-media .verdict {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
}

.card-noimg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	background:
		repeating-linear-gradient(45deg, transparent 0 12px, rgba(236,230,218,0.03) 12px 24px);
}

.card-body { padding-top: 14px; }

.card-title {
	font-size: 19px;
	line-height: 1.25;
	margin-bottom: 8px;
}
.card:hover .card-title { color: var(--gold-lt); }

.card-meta {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0;
}
.card-meta span + span::before {
	content: "·";
	margin: 0 7px;
	color: var(--line);
}

/* ============================================
   GENRE TILES
   ============================================ */
.genre-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}

.genre-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 150px;
	padding: 20px;
	border: 1px solid var(--line);
	background: var(--noir-2);
}
.genre-tile:hover {
	border-color: rgba(201, 162, 39, 0.5);
	background: var(--noir-3);
}

.genre-name {
	font-family: var(--f-display);
	font-size: 26px;
	line-height: 1.1;
}
.genre-tile:hover .genre-name { color: var(--gold-lt); }

.genre-count {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

/* ============================================
   FOOTER
   ============================================ */
.site-footer {
	border-top: 1px solid var(--line);
	background: var(--noir-2);
	padding: 72px 0 34px;
	margin-top: 0;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 48px;
	border-bottom: 1px solid var(--line);
}

.footer-brand {
	font-family: var(--f-display);
	font-size: 30px;
	color: var(--cream-2);
	margin-bottom: 14px;
	display: inline-block;
}

.footer-blurb {
	color: var(--dim);
	font-size: 14px;
	max-width: 380px;
	margin: 0;
}

.footer-h {
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 18px;
}

.footer-list li { margin-bottom: 10px; }
.footer-list a {
	font-size: 14px;
	color: var(--dim);
}
.footer-list a:hover { color: var(--cream); }

.socials { display: flex; gap: 10px; }
.socials a {
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	color: var(--dim);
}
.socials a:hover { color: var(--gold-lt); border-color: rgba(201,162,39,0.45); }
.socials svg { width: 15px; height: 15px; }

.footer-base {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 26px;
	font-family: var(--f-mono);
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dim);
}
.footer-base a:hover { color: var(--cream); }
.footer-legal { display: flex; gap: 20px; }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty {
	padding: 60px 0;
	font-family: var(--f-mono);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
	.grid { grid-template-columns: repeat(3, 1fr); }
	.genre-grid { grid-template-columns: repeat(3, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
	:root { --gut: 20px; }

	.nav-toggle { display: grid; }

	.site-nav {
		display: none;
		position: absolute;
		top: 76px;
		left: 0;
		right: 0;
		background: var(--noir-2);
		border-bottom: 1px solid var(--line);
		padding: 12px 20px 22px;
	}
	.site-nav.is-open { display: block; }
	.site-nav ul { flex-direction: column; align-items: flex-start; gap: 0; }
	.site-nav li { width: 100%; border-bottom: 1px solid var(--line); }
	.site-nav a { display: block; padding: 15px 0; font-size: 12px; border-bottom: 0; }

	.section { padding: 64px 0; }
	.hero { min-height: 74vh; }
	.hero-inner { padding-top: 110px; padding-bottom: 52px; }
	.hero-bg::after {
		background: linear-gradient(to top, var(--noir) 6%, rgba(12,12,13,0.78) 48%, rgba(12,12,13,0.45) 100%);
	}

	.grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
	.genre-grid { grid-template-columns: repeat(2, 1fr); }

	.index-row {
		grid-template-columns: 34px 1fr;
		gap: 14px;
		padding: 18px 0;
	}
	.index-row .index-by { display: none; }
	.index-row .verdict { grid-column: 2; justify-self: start; }

	.footer-grid { grid-template-columns: 1fr; gap: 36px; }
	.footer-base { flex-direction: column; align-items: flex-start; gap: 14px; }
}

@media (max-width: 420px) {
	.grid { grid-template-columns: 1fr 1fr; gap: 22px 12px; }
	.card-title { font-size: 16px; }
}
/* =================================================
 * SINGLE REVIEW  —  append to style.css
 * Uses existing tokens only. No new colours.
 * ================================================= */

.rv-single {
	max-width: 1120px;
	margin: 0 auto;
	padding: 4rem 1.5rem 6rem;
}

/* ---- Header: poster + details ---- */

.rv-hd {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: 3.5rem;
	align-items: start;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--line);
}

.rv-poster {
	position: relative;
	margin: 0;
	aspect-ratio: 2 / 3;
	background: var(--noir-2);
	border: 1px solid var(--line);
	overflow: hidden;
}

.rv-poster-img,
.rv-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rv-poster-none {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background:
		repeating-linear-gradient(
			135deg,
			var(--noir-2) 0 10px,
			var(--noir-3) 10px 20px
		);
}

.rv-poster-none span {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dim);
}

/* Badge — top-right, per locked decision.
   .verdict / .is-watch / .is-skip already styled globally;
   this only positions it. */
.rv-poster .verdict,
.rv-card-poster .verdict {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

.rv-eyebrow {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0 0 1.25rem;
}

.rv-title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.4rem, 5vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -0.015em;
	color: var(--cream-2);
	margin: 0 0 1.25rem;
}

.rv-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
}

.rv-genres a {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-lt);
	text-decoration: none;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--line);
	transition: border-color 0.25s ease, color 0.25s ease;
}

.rv-genres a:hover,
.rv-genres a:focus-visible {
	border-color: var(--gold);
	color: var(--gold);
}

/* ---- Meta table ---- */

.rv-meta {
	margin: 0;
	border-top: 1px solid var(--line);
}

.rv-meta-row {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 1.5rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--line);
}

.rv-meta-row dt {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	padding-top: 0.12rem;
}

.rv-meta-row dd {
	margin: 0;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.95rem;
	color: var(--cream);
}

/* Cast names, separated by a hairline bullet */
.rv-meta-row dd span + span::before {
	content: "·";
	color: var(--dim);
	margin: 0 0.5rem;
}

/* ---- Body copy ---- */

.rv-body {
	max-width: 68ch;
	margin: 3rem 0 0;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 1.06rem;
	line-height: 1.75;
	color: var(--cream);
}

.rv-body > * + * {
	margin-top: 1.4em;
}

.rv-body p:first-of-type::first-letter {
	float: left;
	font-family: var(--f-display);
	font-size: 3.6em;
	line-height: 0.82;
	padding: 0.06em 0.12em 0 0;
	color: var(--gold);
}

.rv-body h2,
.rv-body h3 {
	font-family: var(--f-display);
	font-weight: 400;
	color: var(--cream-2);
	line-height: 1.2;
	margin-top: 2.4em;
}

.rv-body h2 { font-size: 1.9rem; }
.rv-body h3 { font-size: 1.4rem; }

.rv-body a {
	color: var(--gold-lt);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--line);
	transition: text-decoration-color 0.25s ease;
}

.rv-body a:hover { text-decoration-color: var(--gold); }

.rv-body blockquote {
	margin-left: 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--gold);
	font-family: var(--f-display);
	font-size: 1.3rem;
	line-height: 1.45;
	color: var(--cream-2);
}

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

/* ---- Tail ---- */

.rv-tail {
	margin-top: 5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
}

.rv-tail-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.75rem;
}

.rv-card-link {
	display: block;
	text-decoration: none;
}

.rv-card-poster {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--noir-2);
	border: 1px solid var(--line);
	overflow: hidden;
	margin-bottom: 0.9rem;
}

.rv-card-poster img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease, opacity 0.4s ease;
}

.rv-card-link:hover .rv-card-poster img {
	transform: scale(1.04);
	opacity: 0.86;
}

.rv-card-title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.15rem;
	line-height: 1.25;
	color: var(--cream-2);
	margin: 0 0 0.35rem;
}

.rv-card-meta {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	color: var(--dim);
	margin: 0;
}

/* ---- Prev / next fallback ---- */

.rv-adjacent-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.rv-adjacent-link {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--line);
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.rv-adjacent-link:hover { border-color: var(--gold); }

.rv-adjacent-link.is-next {
	text-align: right;
	grid-column: 2;
}

.rv-adjacent-dir {
	display: block;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 0.4rem;
}

.rv-adjacent-title {
	font-family: var(--f-display);
	font-size: 1.2rem;
	color: var(--cream-2);
}

/* ---- Back link ---- */

.rv-back {
	margin-top: 3.5rem;
	text-align: center;
}

.rv-back a {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 0.25rem;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.rv-back a:hover {
	color: var(--gold);
	border-color: var(--gold);
}

/* ---- Responsive ---- */

@media (max-width: 860px) {
	.rv-hd {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.rv-poster {
		max-width: 260px;
	}

	.rv-tail-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.rv-single { padding: 2.5rem 1.25rem 4rem; }

	.rv-meta-row {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}

	.rv-tail-grid { grid-template-columns: 1fr; }

	.rv-adjacent-row { grid-template-columns: 1fr; }

	.rv-adjacent-link.is-next {
		grid-column: 1;
		text-align: left;
	}
}
/* =================================================
 * HEADER + NAV PANEL  —  append to style.css
 * Step 2. Uses existing tokens only.
 *
 * Reuses .site-header, .wrap, .brand, .icon-btn from
 * the existing stylesheet. Everything else is new.
 *
 * Now orphaned in style.css (no markup matches them):
 *   .header-inner  .header-tools  .site-nav  .search-drawer
 * Harmless. Delete them in step 14.
 * ================================================= */

/* ---- Bar layout: brand | search | hamburger ---- */

.hdr-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	min-height: 72px;
}

/* ---- Search, centred ---- */

.hdr-search {
	justify-self: center;
	width: 100%;
	max-width: 420px;
}

.hdr-search form {
	position: relative;
	display: flex;
	align-items: center;
}

.hdr-search-icon {
	position: absolute;
	left: 0.85rem;
	width: 16px;
	height: 16px;
	color: var(--dim);
	pointer-events: none;
	transition: color 0.25s ease;
}

.hdr-search input[type="search"] {
	width: 100%;
	padding: 0.6rem 1rem 0.6rem 2.5rem;
	background: var(--noir-2);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.88rem;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.hdr-search input[type="search"]::placeholder {
	color: var(--dim);
}

.hdr-search input[type="search"]:focus {
	outline: none;
	border-color: var(--gold);
	background: var(--noir-3);
}

.hdr-search form:focus-within .hdr-search-icon {
	color: var(--gold);
}

/* Kill Chrome's default clear button — it fights the pill shape */
.hdr-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ---- Hamburger ---- */

.nav-toggle {
	justify-self: end;
}

/* ---- Scrim ---- */

.nav-scrim {
	position: fixed;
	inset: 0;
	z-index: 90;
	background: rgba(6, 6, 7, 0.72);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.nav-scrim.is-open {
	opacity: 1;
}

/* ---- Off-canvas panel ---- */

.nav-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	width: min(340px, 86vw);
	padding: 1.25rem 2rem 2rem;
	background: var(--noir-2);
	border-left: 1px solid var(--line);
	transform: translateX(100%);
	transition: transform 0.36s cubic-bezier(0.32, 0.72, 0, 1);
	overflow-y: auto;
}

.nav-panel.is-open {
	transform: translateX(0);
}

.nav-close {
	display: block;
	margin-left: auto;
	margin-bottom: 2.5rem;
}

/* ---- Menu items ---- */

.nav-panel-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-panel-nav li {
	border-bottom: 1px solid var(--line);
}

.nav-panel-nav li:first-child {
	border-top: 1px solid var(--line);
}

.nav-panel-nav a {
	display: block;
	padding: 1.15rem 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--cream-2);
	text-decoration: none;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.nav-panel-nav a:hover,
.nav-panel-nav a:focus-visible {
	color: var(--gold);
	padding-left: 0.6rem;
}

/* Staggered reveal — only once the panel is open */
.nav-panel-nav li {
	opacity: 0;
	transform: translateX(12px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-panel.is-open .nav-panel-nav li {
	opacity: 1;
	transform: translateX(0);
}

.nav-panel.is-open .nav-panel-nav li:nth-child(1) { transition-delay: 0.10s; }
.nav-panel.is-open .nav-panel-nav li:nth-child(2) { transition-delay: 0.16s; }
.nav-panel.is-open .nav-panel-nav li:nth-child(3) { transition-delay: 0.22s; }

/* ---- Lock scroll behind the panel ---- */

body.nav-open {
	overflow: hidden;
}

/* ---- Skip link ---- */

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 200;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 0.7rem 1.1rem;
	background: var(--gold);
	color: var(--noir);
	font-family: var(--f-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
}

/* ---- Responsive: search drops to its own row ---- */

@media (max-width: 720px) {
	.hdr-inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
		gap: 0.9rem 1rem;
		padding-top: 0.9rem;
		padding-bottom: 0.9rem;
	}

	.hdr-search {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: none;
	}
}

/* ---- Respect reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	.nav-panel,
	.nav-scrim,
	.nav-panel-nav li {
		transition: none;
	}
}
/* =================================================
 * HEADER PATCH — append to style.css
 *
 * The old .icon-btn rules were scoped to .header-tools,
 * which step 2 removed. These buttons now style themselves
 * and don't depend on anything in the old stylesheet.
 * ================================================= */

.hdr-inner .nav-toggle,
.nav-panel .nav-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hdr-inner .nav-toggle svg,
.nav-panel .nav-close svg {
	display: block;
	width: 20px;
	height: 20px;
	flex: none;
}

.hdr-inner .nav-toggle:hover,
.hdr-inner .nav-toggle:focus-visible,
.nav-panel .nav-close:hover,
.nav-panel .nav-close:focus-visible {
	border-color: var(--gold);
	color: var(--gold);
}
/* =================================================
 * REVIEW CARD  —  append to style.css
 * Two variants: .rcard--banner (16:9) · .rcard--poster (2:3)
 * Uses existing tokens only.
 * ================================================= */

.rcard {
	position: relative;
}

.rcard-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* Badge — top-right on both variants (locked client decision) */
.rcard .verdict {
	position: absolute;
	top: 0.7rem;
	right: 0.7rem;
	z-index: 3;
}

/* ---------- BANNER (16:9, overlaid) ---------- */

.rcard--banner .rcard-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--line);
}

.rcard--banner .rcard-media img,
.rcard--banner .rcard-media .img-none {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rcard--banner .rcard-media img {
	transition: transform 0.5s ease;
}

.rcard--banner .rcard-link:hover img {
	transform: scale(1.04);
}

/* Gradient so overlaid text stays legible on any still */
.rcard-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to top,
		rgba(6, 6, 7, 0.92) 0%,
		rgba(6, 6, 7, 0.55) 32%,
		rgba(6, 6, 7, 0.05) 62%,
		rgba(6, 6, 7, 0) 100%
	);
}

.rcard-overlay {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 1.1rem 1.2rem;
}

.rcard--banner .rcard-title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.4rem;
	line-height: 1.15;
	color: var(--cream-2);
}

.rcard--banner .rcard-author {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-lt);
}

/* ---------- POSTER (2:3, text below) ---------- */

.rcard--poster .rcard-media {
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--line);
	margin-bottom: 0.85rem;
}

.rcard--poster .rcard-media img,
.rcard--poster .rcard-media .img-none {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rcard--poster .rcard-media img {
	transition: transform 0.5s ease, opacity 0.4s ease;
}

.rcard--poster .rcard-media:hover img {
	transform: scale(1.04);
	opacity: 0.9;
}

.rcard--poster .rcard-title {
	margin: 0 0 0.35rem;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.2;
	color: var(--cream-2);
}

.rcard--poster .rcard-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.rcard--poster .rcard-title a:hover {
	color: var(--gold);
}

.rcard--poster .rcard-meta {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	color: var(--dim);
}

/* ---------- Shared placeholder text ---------- */

.rcard .img-none {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		repeating-linear-gradient(
			135deg,
			var(--noir-2) 0 10px,
			var(--noir-3) 10px 20px
		);
}

.rcard .img-none span {
	font-family: var(--f-mono);
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
}
/* =================================================
 * RECENT REVIEWS GRID  —  append to style.css
 * 3×3 banner cards. Card styling lives in the
 * review-card block; this only lays out the grid.
 * ================================================= */

.recent-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media (max-width: 860px) {
	.recent-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.recent-grid {
		grid-template-columns: 1fr;
	}
}
/* =================================================
 * COLLECTIONS  —  append to style.css
 * Replaces the old genre-tile section on the home page.
 * Collection card = banner (16:9) + title below. No badge.
 * ================================================= */

.collection-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.ccard.is-hidden {
	display: none;
}

.ccard-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.ccard-media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--line);
	margin-bottom: 0.9rem;
}

.ccard-media img,
.ccard-media .img-none {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ccard-media img {
	transition: transform 0.5s ease, opacity 0.4s ease;
}

.ccard-link:hover .ccard-media img {
	transform: scale(1.04);
	opacity: 0.9;
}

.ccard-title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--cream-2);
	transition: color 0.25s ease;
}

.ccard-link:hover .ccard-title {
	color: var(--gold);
}

/* ---- View more ---- */

.collection-more {
	margin-top: 2.5rem;
	text-align: center;
}

.btn-outline {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cream);
	background: transparent;
	border: 1px solid var(--line);
	padding: 0.85rem 2.2rem;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.btn-outline:hover,
.btn-outline:focus-visible {
	border-color: var(--gold);
	color: var(--gold);
}

/* ---- Responsive ---- */

@media (max-width: 860px) {
	.collection-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 540px) {
	.collection-grid {
		grid-template-columns: 1fr;
	}
}
/* =================================================
 * INTER — global font override. Append LAST to style.css.
 * Client request: everything in Inter, drop Bodoni + DM Mono.
 *
 * CSS custom properties resolve at use-time, so redefining
 * the tokens here (after their original :root block) wins the
 * cascade — every --f-display / --f-body / --f-mono reference
 * across the theme switches with these three lines.
 *
 * The weight bumps below exist because Inter 400 at display
 * sizes reads like body text — Bodoni 400 didn't. This keeps
 * the title/heading hierarchy from flattening.
 * ================================================= */

:root {
	--f-display: "Inter", "Helvetica Neue", Arial, sans-serif;
	--f-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
	--f-mono:    "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Display faces — give Inter the weight + tracking Bodoni carried by shape.
   Grouped so any title that uses --f-display stays substantial. */
.hero-title,
.section-title,
.rcard--banner .rcard-title,
.rcard--poster .rcard-title,
.ccard-title,
.nav-panel-nav a,
.rv-title,
.rv-body h2,
.rv-body h3,
.rv-adjacent-title,
.rv-card-title {
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* Hero title is the biggest — a touch tighter still. */
.hero-title {
	font-weight: 700;
	letter-spacing: -0.03em;
}

/* Mono was used for labels (eyebrows, badges, meta). Inter handles
   these fine via the existing letter-spacing rules; just make sure
   the label weight reads as a label, not body. */
.eyebrow,
.verdict,
.rcard-author,
.rcard-meta,
.tag-promoted {
	font-weight: 500;
}

/* Body was Archivo 300; Inter 300 is a hair light for reading.
   Nudge the long-form single-review copy up to 400. */
.rv-body {
	font-weight: 400;
}

/* The single-review drop cap was a Bodoni flourish. In Inter it just
   looks like a big letter — keep it, but it no longer carries serif
   contrast. Left as-is; revisit in polish if the client dislikes it. */
/* =================================================
 * HERO CAROUSEL  —  append to style.css
 * Wraps the existing .hero styling in a slidable track.
 * The inner .hero / .hero-title / .hero-meta etc. are
 * unchanged — this only adds the track, arrows, dots.
 * ================================================= */

.hero-carousel {
	position: relative;
	overflow: hidden;
}

.hero-track {
	display: flex;
	width: 100%;
	transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform;
}

.hero-slide {
	flex: 0 0 100%;
	min-width: 0;
}

/* The inner .hero already carries height + background. Just make sure
   a slide's .hero fills the slide and drops any stray bottom margin. */
.hero-slide .hero {
	height: 100%;
	margin: 0;
}

/* ---- Arrows ---- */

.hero-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: rgba(12, 12, 13, 0.45);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	cursor: pointer;
	backdrop-filter: blur(4px);
	transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hero-arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.hero-arrow:hover,
.hero-arrow:focus-visible {
	background: rgba(12, 12, 13, 0.75);
	border-color: var(--gold);
	color: var(--gold);
}

.hero-prev { left: 1.25rem; }
.hero-next { right: 1.25rem; }

/* ---- Dots ---- */

.hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1.5rem;
	z-index: 5;
	display: flex;
	justify-content: center;
	gap: 0.6rem;
}

.hero-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--cream);
	background: transparent;
	opacity: 0.55;
	cursor: pointer;
	transition: opacity 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.hero-dot:hover {
	opacity: 0.9;
}

.hero-dot.is-active {
	background: var(--gold);
	border-color: var(--gold);
	opacity: 1;
	transform: scale(1.15);
}

/* ---- Promoted tag (sits inline in the eyebrow row) ---- */

.tag-promoted {
	display: inline-block;
	margin-left: 0.75rem;
	padding: 0.15rem 0.6rem;
	background: var(--gold);
	color: var(--noir);
	font-size: 0.62rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 3px;
	vertical-align: middle;
}

/* ---- Reduced motion: no sliding animation ---- */

@media (prefers-reduced-motion: reduce) {
	.hero-track {
		transition: none;
	}
}

/* ---- Small screens: tuck arrows in a little ---- */

@media (max-width: 540px) {
	.hero-arrow {
		width: 38px;
		height: 38px;
	}
	.hero-prev { left: 0.6rem; }
	.hero-next { right: 0.6rem; }
}
/* =================================================
 * NEWSLETTER  —  REPLACES the earlier newsletter block
 * in style.css. Full-width band, wide form (RogerEbert-style).
 * Find the previous "NEWSLETTER" block you appended and
 * swap it for this one. Don't add a second copy.
 * ================================================= */

.newsletter .news-box {
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	padding: 4.5rem 1.5rem;
	/* card border/background removed — sits on the page's noir band */
}

.news-title {
	margin: 0 0 0.7rem;
	font-family: var(--f-display);
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--cream-2);
}

.news-sub {
	margin: 0 0 2.2rem;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 1.05rem;
	color: var(--dim);
}

/* Wide form — spans most of the content width, like the reference */
.news-form {
	display: flex;
	gap: 0.9rem;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

.news-form input[type="email"] {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.4rem;
	background: var(--noir-3);
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	font-family: var(--f-body);
	font-size: 0.95rem;
	transition: border-color 0.25s ease;
}

.news-form input[type="email"]::placeholder {
	color: var(--dim);
}

.news-form input[type="email"]:focus {
	outline: none;
	border-color: var(--gold);
}

.news-form .btn {
	flex: none;
	white-space: nowrap;
}

.news-note {
	min-height: 1.2em;
	margin: 1.1rem 0 0;
	font-family: var(--f-mono);
	font-size: 0.75rem;
	letter-spacing: 0.04em;
	color: var(--gold-lt);
}

@media (max-width: 560px) {
	.news-form {
		flex-direction: column;
	}
	.news-form input[type="email"],
	.news-form .btn {
		width: 100%;
	}
}
/* =================================================
 * SINGLE REVIEW  —  append to style.css
 * Banner-only, editorial. Uses existing tokens.
 * (This replaces the old on-hold single-review styles,
 *  which were poster-column based. If you never uploaded
 *  those, there's nothing to remove.)
 * ================================================= */

.sr {
	padding-bottom: 5rem;
}

/* Constrain the reading column; .wrap already centres. */
.sr-head {
	max-width: 820px;
	padding-top: 3.5rem;
	padding-bottom: 2rem;
	text-align: center;
}

.sr-title {
	margin: 0 0 1.25rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.6rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--cream-2);
}

.sr-meta-primary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
	margin-bottom: 0.9rem;
}

/* Verdict badge sits inline here, not absolutely positioned */
.sr-meta-primary .verdict {
	position: static;
}

.sr-genres {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.sr-genres a {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-lt);
	text-decoration: none;
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--line);
	border-radius: 3px;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.sr-genres a:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.sr-facts {
	font-family: var(--f-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: var(--dim);
}

.sr-meta-secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--dim);
}

.sr-author {
	color: var(--cream);
	font-weight: 500;
}

.sr-dot { color: var(--line); }

/* ---- Banner ---- */

.sr-banner-wrap {
	max-width: 1100px;
	margin-top: 1rem;
	margin-bottom: 3rem;
}

.sr-banner {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--line);
}

.sr-banner img,
.sr-banner .img-none {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Body ---- */

.sr-body {
	max-width: 700px;
	font-family: var(--f-body);
	font-weight: 400;
	font-size: 1.08rem;
	line-height: 1.75;
	color: var(--cream);
}

.sr-body > * + * { margin-top: 1.4em; }

.sr-body h2,
.sr-body h3 {
	font-family: var(--f-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--cream-2);
	line-height: 1.2;
	margin-top: 2.2em;
}

.sr-body h2 { font-size: 1.7rem; }
.sr-body h3 { font-size: 1.35rem; }

.sr-body a {
	color: var(--gold-lt);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--line);
	transition: text-decoration-color 0.25s ease;
}

.sr-body a:hover { text-decoration-color: var(--gold); }

.sr-body blockquote {
	margin-left: 0;
	padding-left: 1.4rem;
	border-left: 2px solid var(--gold);
	font-family: var(--f-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.45;
	color: var(--cream-2);
}

.sr-body img { max-width: 100%; height: auto; }

/* ---- Credits strip ---- */

.sr-credits {
	max-width: 700px;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
}

.sr-credit-label {
	display: block;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 0.35rem;
}

.sr-credit-value {
	font-family: var(--f-body);
	font-size: 0.95rem;
	color: var(--cream);
}

/* ---- Related ---- */

.sr-related {
	max-width: 1000px;
	margin-top: 4.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
}

.sr-related-title {
	margin: 0 0 1.75rem;
	font-family: var(--f-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-size: 1.6rem;
	color: var(--cream-2);
}

.sr-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* ---- Prev / next ---- */

.sr-adjacent {
	max-width: 1000px;
	margin-top: 4.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}

.sr-adj {
	display: block;
	padding: 1.5rem;
	border: 1px solid var(--line);
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.sr-adj:hover { border-color: var(--gold); }
.sr-adj.is-next { text-align: right; }

.sr-adj-dir {
	display: block;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 0.4rem;
}

.sr-adj-title {
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--cream-2);
}

/* ---- Back ---- */

.sr-back {
	max-width: 1000px;
	margin-top: 3.5rem;
	text-align: center;
}

.sr-back a {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	transition: color 0.25s ease;
}

.sr-back a:hover { color: var(--gold); }

/* ---- Responsive ---- */

@media (max-width: 720px) {
	.sr-related-grid { grid-template-columns: repeat(2, 1fr); }
	.sr-adjacent { grid-template-columns: 1fr; }
	.sr-adj.is-next { text-align: left; }
}

@media (max-width: 460px) {
	.sr-related-grid { grid-template-columns: 1fr; }
}
/* =================================================
 * VERDICT BADGES + HERO TITLE CLAMP
 * Append to style.css (LAST, so it overrides the
 * original .verdict rules from the initial build).
 * ================================================= */

/* ---- Verdict: solid, no transparency ---- */

.verdict {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-mono);
	font-weight: 600;
	border: none;
	color: #fff;
}

/* Kill any leading dot / pseudo from the original badge */
.verdict::before {
	content: none !important;
}

.verdict.is-watch { background: var(--watch); color: #fff; }
.verdict.is-skip  { background: var(--skip);  color: #fff; }

/* Letter mode — home cards: solid square, just W / S */
.verdict--letter {
	width: 30px;
	height: 30px;
	border-radius: 5px;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
	padding: 0;
}

/* Full mode — hero + review page: solid box, WATCH IT / SKIP IT */
.verdict--full {
	padding: 0.4rem 0.75rem;
	border-radius: 5px;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* ---- Hero title: clamp long titles to one line ---- */

.hero-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* The title is a link inside the h2; keep it on the same line */
.hero-title a {
	display: inline;
}
/* =================================================
 * HERO SLIDE = LINK  —  append to style.css
 * The whole slide is now an <a>. Keep it looking
 * like the old .hero block, just clickable.
 * ================================================= */

a.hero {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

/* Author line replaces the old byline/foot */
.hero-author {
	display: block;
	margin-top: 1.25rem;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}

.hero-author strong {
	color: var(--cream);
	font-weight: 600;
}

/* Verdict sits alone now — a little breathing room under the title */
.hero-meta {
	margin-top: 1rem;
}
/* =================================================
 * HERO COPY -> BOTTOM  —  append to style.css
 * Anchor the title/verdict/author near the bottom
 * of the hero box instead of vertically centred.
 * ================================================= */

a.hero {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;   /* push copy to the bottom */
}

.hero-inner {
	padding-bottom: 3.5rem;
}

@media (max-width: 540px) {
	.hero-inner {
		padding-bottom: 2.5rem;
	}
}
/* =================================================
 * VERDICT BADGES — final, context-driven.
 * Append to style.css LAST (overrides all earlier
 * verdict blocks). Letter shows inside cards; full
 * label shows on hero + review page.
 * ================================================= */

/* Default: full label visible, letter hidden */
.v-letter { display: none; }
.v-full   { display: inline; }

.verdict {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--f-mono);
	font-weight: 600;
	color: #fff;
	border: none;
	border-radius: 5px;
	/* full-label sizing (hero, review page) */
	padding: 0.4rem 0.75rem;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Remove any leading dot/pseudo from the original badge */
.verdict::before { content: none !important; }

.verdict.is-watch { background: var(--watch); color: #fff; }
.verdict.is-skip  { background: var(--skip);  color: #fff; }

/* Inside a card = single-letter solid square */
.rcard .verdict {
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 0.95rem;
	letter-spacing: 0;
	text-transform: none;
}

.rcard .v-full   { display: none; }
.rcard .v-letter { display: inline; }

/* =================================================
 * AUTHOR AVATARS + CARD TITLE CLAMP
 * Append to style.css.
 * ================================================= */

/* ---- Avatar base ---- */

.author-avatar {
	border-radius: 50%;
	object-fit: cover;
	display: inline-block;
	vertical-align: middle;
	flex: none;
}

.author-avatar--mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--noir-3);
	color: var(--cream);
	border: 1px solid var(--line);
	font-family: var(--f-mono);
	font-weight: 600;
	line-height: 1;
}

/* ---- Hero author line (avatar + name) ---- */

.hero-author {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.hero-author .author-avatar {
	width: 44px;
	height: 44px;
	font-size: 1rem;
}

.hero-author-name {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
}

.hero-author-name strong {
	color: var(--cream);
	font-weight: 600;
}

/* ---- Card author (banner overlay) ---- */

.rcard-author {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.rcard-author .author-avatar {
	width: 24px;
	height: 24px;
	font-size: 0.62rem;
}

/* keep existing .rcard-author text styling on the name span */
.rcard-author-name {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-lt);
}

/* ---- Single review author ---- */

.sr-author {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.sr-author .author-avatar {
	width: 28px;
	height: 28px;
	font-size: 0.72rem;
}

/* ---- Card titles: clamp long titles to one line ---- */

.rcard-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.rcard-title a {
	display: inline;
}
/* =================================================
 * SINGLE REVIEW — widen body to banner width
 * Append to style.css (after the single-review block).
 * Body text now runs edge-to-edge with the banner.
 * ================================================= */

.sr-body {
	max-width: 1100px;   /* was 700px — match the banner */
}

/* Keep credits aligned to the same column as body + banner */
.sr-credits {
	max-width: 1100px;
}
/* =================================================
 * AUTHOR BOX (single review) + AUTHOR PAGE
 * Append to style.css.
 * ================================================= */

/* ---- Author box in the single review ---- */

.sr-authorbox {
	max-width: 1100px;
	margin: 3.5rem auto 0;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.5rem;
	background: var(--noir-2);
	border: 1px solid var(--line);
	text-decoration: none;
	transition: border-color 0.25s ease;
}

.sr-authorbox:hover {
	border-color: var(--gold);
}

.sr-authorbox .author-avatar {
	width: 64px;
	height: 64px;
	font-size: 1.5rem;
	flex: none;
}

.sr-authorbox-text {
	display: block;
}

.sr-authorbox-name {
	display: block;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--cream-2);
}

.sr-authorbox-bio {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.5;
	color: var(--dim);
}

.sr-authorbox-link {
	display: inline-block;
	margin-top: 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-lt);
	transition: color 0.25s ease;
}

.sr-authorbox:hover .sr-authorbox-link {
	color: var(--gold);
}

/* ---- Author page ---- */

.author-hero {
	max-width: 760px;
	margin: 0 auto;
	padding: 4.5rem 1.5rem 2.5rem;
	text-align: center;
}

.author-hero .author-avatar {
	width: 96px;
	height: 96px;
	font-size: 2.2rem;
	margin: 0 auto 1rem;
}

.author-name {
	margin: 0 0 1rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(2rem, 4.5vw, 2.9rem);
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

.author-bio {
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--cream);
}

.author-bio > * + * { margin-top: 1.2em; }

.author-reviews {
	max-width: 1100px;
	margin: 3rem auto 5rem;
	padding: 0 1.5rem;
}

.author-reviews .section-title {
	margin-bottom: 1.75rem;
}

@media (max-width: 540px) {
	.sr-authorbox {
		flex-direction: column;
		text-align: center;
	}
}
/* =================================================
 * ARCHIVE PAGES — Movie/Series, Genre, All Categories
 * Append to style.css. Reuses .genre-grid/.genre-tile
 * from the original build for the category tiles.
 * ================================================= */

.archive-head {
	padding: 4rem 1.5rem 2rem;
}

.archive-eyebrow {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	margin: 0 0 0.75rem;
}

.archive-title {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	letter-spacing: -0.03em;
	color: var(--cream-2);
}

.archive-sub {
	margin: 0.6rem 0 0;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 1.05rem;
	color: var(--dim);
}

.archive-body {
	padding-bottom: 5rem;
}

/* ---- Poster grid ---- */

.poster-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1.5rem;
}

@media (max-width: 1000px) {
	.poster-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.poster-grid { grid-template-columns: repeat(2, 1fr); }
}

.empty {
	font-family: var(--f-body);
	color: var(--dim);
	padding: 2rem 0;
}

/* ---- Pagination ---- */

.pagination {
	margin-top: 3rem;
	display: flex;
	justify-content: center;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	font-family: var(--f-mono);
	font-size: 0.8rem;
	color: var(--cream);
	text-decoration: none;
	border: 1px solid var(--line);
	border-radius: 5px;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.pagination .page-numbers:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.pagination .page-numbers.current {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--noir);
	font-weight: 600;
}

.pagination .page-numbers.dots {
	border-color: transparent;
}
/* =================================================
 * NAV SUBMENU — All Categories genre expand
 * Append to style.css. The genre list lives inside
 * the hamburger and slides open in place.
 * ================================================= */

/* Toggle button styled like the other nav links */
.nav-sub-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1.15rem 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--cream-2);
	text-align: left;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.nav-sub-toggle:hover,
.nav-sub-toggle:focus-visible {
	color: var(--gold);
	padding-left: 0.6rem;
}

.nav-sub-caret {
	width: 22px;
	height: 22px;
	flex: none;
	transition: transform 0.3s ease;
}

.nav-has-sub.is-open .nav-sub-caret {
	transform: rotate(180deg);
}

/* The genre list — collapsed by default, expands on toggle */
.nav-sub {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.nav-has-sub.is-open .nav-sub {
	max-height: 640px;   /* generous ceiling for the animation */
}

/* Genre sub-items — indented, smaller than top-level */
.nav-sub li {
	border: none;
}

.nav-sub li:first-child {
	border-top: none;
}

.nav-sub a {
	display: block;
	padding: 0.7rem 0 0.7rem 1rem;
	font-family: var(--f-body);
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--dim);
	text-decoration: none;
	transition: color 0.25s ease, padding-left 0.25s ease;
}

.nav-sub a:hover,
.nav-sub a:focus-visible {
	color: var(--gold);
	padding-left: 1.4rem;
}

/* Slight inset line so the genre group reads as nested */
.nav-sub {
	border-left: 1px solid var(--line);
	margin-left: 0.2rem;
}
/* =================================================
 * POSTER BOX — force strict 2:3 height
 * Append to style.css LAST. Uses padding-top trick
 * as a fallback for aspect-ratio, so every poster
 * box is identical height regardless of source image.
 * ================================================= */

.rcard--poster .rcard-media {
	position: relative;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 150%;          /* 2:3 ratio = 3/2 = 150% */
	aspect-ratio: auto;         /* neutralise any conflicting rule */
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--line);
}

.rcard--poster .rcard-media img,
.rcard--poster .rcard-media .img-none {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Card as a column so bodies align even if content differs */
.rcard--poster {
	display: flex;
	flex-direction: column;
}
/* =================================================
 * EQUAL GRID COLUMNS — append to style.css LAST
 *
 * Cause of the misalignment: card titles use
 * white-space:nowrap, which makes their min-content
 * width the full title. Plain `1fr` is really
 * minmax(auto, 1fr) and refuses to shrink below
 * min-content, so long-titled cards widened their
 * column — and a wider 2:3 box is a taller box.
 *
 * minmax(0, 1fr) lets columns be exactly equal and
 * lets text-overflow:ellipsis do its job.
 * ================================================= */

.poster-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.recent-grid,
.collection-grid,
.sr-related-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Titles/meta must be allowed to shrink inside the cell */
.rcard-title,
.rcard-meta,
.ccard-title {
	min-width: 0;
}

.rcard,
.ccard {
	min-width: 0;
}

/* ---- Responsive: keep the same minmax(0,…) pattern ---- */

@media (max-width: 1000px) {
	.poster-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.recent-grid,
	.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
	.sr-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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

@media (max-width: 540px) {
	.recent-grid,
	.collection-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
	.sr-related-grid { grid-template-columns: minmax(0, 1fr); }
}
/* =================================================
 * FILTER BAR — append to style.css
 * Sits above the poster grid on review archives.
 * ================================================= */

.filterbar {
	margin: 0 0 2.5rem;
	padding: 1.5rem 0 1.75rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.fb-row {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 1.5rem;
	align-items: flex-end;
}

.fb-row-top {
	justify-content: space-between;
	align-items: center;
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
	border-bottom: 1px solid var(--line);
}

/* ---- Search ---- */

.fb-search {
	position: relative;
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 220px;
	max-width: 460px;
}

.fb-search svg {
	position: absolute;
	left: 0;
	width: 18px;
	height: 18px;
	color: var(--dim);
	pointer-events: none;
}

.fb-search input[type="search"] {
	width: 100%;
	padding: 0.5rem 0 0.5rem 1.9rem;
	background: transparent;
	border: none;
	border-bottom: 1px solid transparent;
	color: var(--cream);
	font-family: var(--f-body);
	font-size: 1.05rem;
	transition: border-color 0.25s ease;
}

.fb-search input[type="search"]::placeholder { color: var(--dim); }

.fb-search input[type="search"]:focus {
	outline: none;
	border-bottom-color: var(--gold);
}

.fb-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

/* ---- Fields ---- */

.fb-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	min-width: 0;
}

.fb-field label {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

.fb-field select,
.fb-year-inputs input {
	appearance: none;
	-webkit-appearance: none;
	padding: 0.7rem 2.2rem 0.7rem 1rem;
	background-color: var(--noir-2);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f887b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	font-family: var(--f-body);
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.25s ease;
	min-width: 170px;
}

.fb-field select:focus,
.fb-year-inputs input:focus {
	outline: none;
	border-color: var(--gold);
}

.fb-field select option {
	background: var(--noir-2);
	color: var(--cream);
}

/* ---- Year range ---- */

.fb-year-inputs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fb-year-inputs input {
	background-image: none;
	padding: 0.7rem 0.9rem;
	min-width: 0;
	width: 96px;
	text-align: center;
	cursor: text;
}

/* Hide number spinners */
.fb-year-inputs input::-webkit-outer-spin-button,
.fb-year-inputs input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.fb-year-inputs input { -moz-appearance: textfield; }

.fb-year-sep {
	color: var(--dim);
	font-size: 0.9rem;
}

/* ---- Actions ---- */

.fb-row-actions {
	margin-top: 1.25rem;
	align-items: center;
	gap: 1.25rem;
}

.fb-apply {
	padding: 0.75rem 1.9rem;
	background: var(--gold);
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--noir);
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.fb-apply:hover {
	background: transparent;
	color: var(--gold);
}

.fb-reset {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.fb-reset:hover {
	color: var(--gold);
	border-color: var(--gold);
}

/* ---- Responsive ---- */

@media (max-width: 720px) {
	.fb-row-top {
		flex-direction: column;
		align-items: stretch;
	}

	.fb-search { max-width: none; }

	.fb-field select { min-width: 0; width: 100%; }

	.fb-row-main .fb-field { flex: 1 1 100%; }
}
/* =================================================
 * FILTER BAR — Order by moved into the main row
 * Append to style.css AFTER the filter bar block.
 * ================================================= */

/* Top row is search only now — let it fill the width */
.fb-row-top {
	justify-content: flex-start;
}

.fb-row-top .fb-search {
	max-width: 560px;
}

/* Order sits with the other fields; give it its own min width */
.fb-order select {
	min-width: 150px;
}
/* =================================================
 * BANNER IMAGE CREDIT — append to style.css
 * Small, dimmed attribution line under the banner
 * on the single review page.
 * ================================================= */

.sr-banner-figure {
	margin: 0;
}

.sr-banner-credit {
	margin-top: 0.6rem;
	font-family: var(--f-body);
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--dim);
	opacity: 0.7;
	text-align: right;
}

@media (max-width: 640px) {
	.sr-banner-credit {
		font-size: 0.68rem;
		text-align: left;
	}
}
/* =================================================
 * COLLECTION PAGES — single + archive
 * Append to style.css.
 * Reuses .poster-grid, .collection-grid, .ccard,
 * .archive-head from earlier blocks.
 * ================================================= */

/* ---- Single collection ---- */

.collection {
	padding-bottom: 5rem;
}

.col-banner-wrap {
	max-width: 1100px;
	margin-top: 2.5rem;
	margin-bottom: 2rem;
}

.col-banner {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--noir-2);
	border: 1px solid var(--line);
}

.col-banner img,
.col-banner .img-none {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.col-head {
	max-width: 820px;
	margin-bottom: 3rem;
}

.col-eyebrow {
	margin: 0 0 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
}

.col-title {
	margin: 0 0 0.6rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--cream-2);
}

.col-count {
	margin: 0 0 1.5rem;
	font-family: var(--f-mono);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-lt);
}

.col-intro {
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--cream);
}

.col-intro > * + * {
	margin-top: 1.2em;
}

.col-body {
	max-width: 1100px;
}

.col-back {
	max-width: 1100px;
	margin-top: 3.5rem;
	text-align: center;
}

.col-back a {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	transition: color 0.25s ease;
}

.col-back a:hover {
	color: var(--gold);
}

/* ---- Archive: title count under each tile ---- */

.ccard-count {
	margin: 0.3rem 0 0;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dim);
}
/* =================================================
 * COLLECTION PAGE — banner removed
 * Append to style.css AFTER the collection-pages block.
 * Adds top spacing the banner used to provide.
 * ================================================= */

.col-head {
	padding-top: 4rem;
}

/* Banner styles no longer used on the single collection page.
   Left harmless; sweep in the polish pass. */
/* =================================================
 * ACCOUNTS — register, login, comments, nav account
 * Append to style.css.
 * ================================================= */

/* ---- Auth pages ---- */

.acct {
	max-width: 460px;
	padding: 4.5rem 1.5rem 6rem;
}

.acct-title {
	margin: 0 0 0.6rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(2rem, 4.5vw, 2.8rem);
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

.acct-sub {
	margin: 0 0 2.5rem;
	font-family: var(--f-body);
	font-weight: 300;
	color: var(--dim);
}

.acct-sub a,
.acct-alt a {
	color: var(--gold-lt);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	transition: border-color 0.25s ease;
}

.acct-sub a:hover,
.acct-alt a:hover {
	border-color: var(--gold);
}

.acct-error {
	margin: 0 0 1.75rem;
	padding: 0.9rem 1.1rem;
	background: rgba(155, 58, 50, 0.15);
	border: 1px solid var(--skip);
	border-radius: 5px;
	font-family: var(--f-body);
	font-size: 0.92rem;
	color: var(--skip-lt);
}

.acct-form {
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
}

.acct-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.acct-field label {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

.acct-field input,
.acct-field textarea {
	padding: 0.85rem 1.1rem;
	background: var(--noir-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--cream);
	font-family: var(--f-body);
	font-size: 0.98rem;
	transition: border-color 0.25s ease;
}

.acct-field input:focus,
.acct-field textarea:focus {
	outline: none;
	border-color: var(--gold);
}

.acct-hint {
	font-family: var(--f-body);
	font-size: 0.8rem;
	color: var(--dim);
}

.acct-check {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
}

.acct-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	accent-color: var(--gold);
	flex: none;
}

.acct-check label {
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--cream);
}

.acct-submit {
	padding: 0.95rem 1.5rem;
	background: var(--gold);
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--noir);
	font-family: var(--f-mono);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	text-align: center;
	transition: background 0.25s ease, color 0.25s ease;
}

.acct-submit:hover {
	background: transparent;
	color: var(--gold);
}

.acct-alt {
	margin: 0;
	font-family: var(--f-body);
	font-size: 0.9rem;
	color: var(--dim);
}

/* Honeypot — hidden from humans, visible to bots */
.acct-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Account block in the nav panel ---- */

.nav-account {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.nav-account-user {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
	margin-bottom: 0.4rem;
}

.nav-account-user .author-avatar {
	width: 36px;
	height: 36px;
	font-size: 0.9rem;
}

.nav-account-name {
	font-family: var(--f-body);
	font-size: 1rem;
	color: var(--cream-2);
}

.nav-account-link {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	transition: color 0.25s ease;
}

.nav-account-link:hover {
	color: var(--gold);
}

.nav-account-link.is-primary {
	color: var(--gold-lt);
}

/* ---- Comments ---- */

.sr-comments {
	max-width: 700px;
	margin-top: 4.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
}

.cmts-title {
	margin: 0 0 2rem;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

.cmts-list {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0;
}

.cmts-list .comment,
.cmts-list .pingback {
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--line);
}

.cmts-list .children {
	list-style: none;
	margin: 1.25rem 0 0 1.5rem;
	padding-left: 1.25rem;
	border-left: 1px solid var(--line);
}

.cmts-list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--f-body);
	font-size: 0.95rem;
	color: var(--cream-2);
}

.cmts-list .comment-author img {
	border-radius: 50%;
}

.cmts-list .comment-meta,
.cmts-list .comment-metadata {
	margin-top: 0.3rem;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	color: var(--dim);
}

.cmts-list .comment-meta a,
.cmts-list .comment-metadata a {
	color: var(--dim);
	text-decoration: none;
}

.cmts-list .comment-content {
	margin-top: 0.75rem;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--cream);
}

.cmts-list .reply {
	margin-top: 0.6rem;
}

.cmts-list .reply a {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-lt);
	text-decoration: none;
}

.cmts-list .reply a:hover {
	color: var(--gold);
}

/* Gate for logged-out visitors */

.cmts-gate {
	padding: 2rem;
	background: var(--noir-2);
	border: 1px solid var(--line);
	border-radius: 8px;
	text-align: center;
}

.cmts-gate p {
	margin: 0 0 1.25rem;
	font-family: var(--f-body);
	font-weight: 300;
	color: var(--cream);
}

.cmts-gate-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin: 0 !important;
}

.cmts-gate-login {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
}

.cmts-gate-login:hover {
	color: var(--gold);
}

.cmts-closed {
	font-family: var(--f-body);
	color: var(--dim);
}

/* Comment form */

.comment-respond {
	margin-top: 2rem;
}

.comment-reply-title {
	margin: 0 0 1.25rem;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--cream-2);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.comment-form .form-submit {
	margin: 0;
}
/* =================================================
 * AUTH UI — header account, auth card, account page
 * Append to style.css LAST (overrides the earlier
 * header grid and the plain .acct page styles).
 * ================================================= */

/* ---- Header: four columns now ---- */

.hdr-inner {
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	gap: 1.25rem;
}

.hdr-account {
	display: flex;
	align-items: center;
	justify-self: end;
}

.hdr-login {
	display: inline-block;
	padding: 0.55rem 1.3rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cream);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hdr-login:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.hdr-user {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	padding: 0.3rem 0.85rem 0.3rem 0.3rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	transition: border-color 0.25s ease;
}

.hdr-user:hover {
	border-color: var(--gold);
}

.hdr-user .author-avatar {
	width: 34px;
	height: 34px;
	font-size: 0.85rem;
}

.hdr-user-name {
	font-family: var(--f-body);
	font-size: 0.88rem;
	color: var(--cream);
	white-space: nowrap;
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 900px) {
	.hdr-user-name { display: none; }
	.hdr-user { padding: 0.3rem; }
}

@media (max-width: 720px) {
	.hdr-inner {
		grid-template-columns: auto auto auto;
		justify-content: space-between;
	}
	.hdr-search {
		grid-column: 1 / -1;
		grid-row: 2;
		max-width: none;
	}
}

/* ---- Auth page ---- */

.auth {
	display: flex;
	justify-content: center;
	padding: 4rem 1.5rem 6rem;
}

.auth-card {
	width: 100%;
	max-width: 440px;
	padding: 2.75rem 2.25rem;
	background: var(--noir-2);
	border: 1px solid var(--line);
	border-radius: 14px;
}

.auth-brand {
	text-align: center;
	margin-bottom: 1.75rem;
}

.auth-brand-mark {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

/* Tabs */

.auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem;
	padding: 0.35rem;
	background: var(--noir-3);
	border: 1px solid var(--line);
	border-radius: 999px;
	margin-bottom: 1.75rem;
}

.auth-tab {
	padding: 0.65rem 0.5rem;
	background: transparent;
	border: none;
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.auth-tab:hover { color: var(--cream); }

.auth-tab.is-active {
	background: var(--gold);
	color: var(--noir);
}

/* Panels */

.auth-panel { display: none; }
.auth-panel.is-active { display: block; }

.auth-lede {
	margin: 0 0 1.75rem;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--dim);
	text-align: center;
}

.auth-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.auth-minor {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	transition: color 0.25s ease;
}

.auth-minor:hover { color: var(--gold); }

.auth-swap {
	margin: 1.75rem 0 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--line);
	text-align: center;
	font-family: var(--f-body);
	font-size: 0.9rem;
	font-weight: 300;
	color: var(--dim);
}

.auth-swap-btn {
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	color: var(--gold-lt);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: var(--line);
	transition: text-decoration-color 0.25s ease;
}

.auth-swap-btn:hover { text-decoration-color: var(--gold); }

/* Social login slot — styled ahead of the plugin */

.auth-social {
	margin-bottom: 1.5rem;
}

.auth-social + .acct-form::before {
	content: "or";
	display: block;
	margin: 0 0 1.25rem;
	text-align: center;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dim);
}

/* ---- Account page ---- */

.account {
	max-width: 640px;
	padding: 4rem 1.5rem 6rem;
}

.account-head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--line);
}

.account-head .author-avatar {
	width: 88px;
	height: 88px;
	font-size: 2rem;
	flex: none;
}

.account-name {
	margin: 0 0 0.25rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

.account-email {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--dim);
}

.account-ok {
	margin: 0 0 2rem;
	padding: 0.9rem 1.1rem;
	background: rgba(74, 122, 82, 0.15);
	border: 1px solid var(--watch);
	border-radius: 8px;
	font-family: var(--f-body);
	font-size: 0.92rem;
	color: var(--watch-lt);
}

.account-form {
	display: flex;
	flex-direction: column;
	gap: 2.25rem;
}

.account-block {
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--noir-2);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.account-block legend {
	padding: 0 0.6rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-lt);
}

.account-note {
	margin: 0;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.85rem;
	color: var(--dim);
}

.account-block input[type="file"] {
	padding: 0.7rem;
	background: var(--noir-3);
	border: 1px dashed var(--line);
	border-radius: 8px;
	color: var(--dim);
	font-family: var(--f-body);
	font-size: 0.85rem;
}

.account-block input[type="file"]::file-selector-button {
	margin-right: 0.9rem;
	padding: 0.45rem 1rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}

.account-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.account-logout {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dim);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	padding-bottom: 2px;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.account-logout:hover {
	color: var(--skip-lt);
	border-color: var(--skip);
}

@media (max-width: 540px) {
	.account-head {
		flex-direction: column;
		text-align: center;
	}
	.auth-card {
		padding: 2rem 1.5rem;
	}
}
/* =================================================
 * ACCOUNT DASHBOARD + WATCHLIST BUTTON
 * Append to style.css LAST.
 * ================================================= */

/* ---- Watchlist button (single review) ---- */

.sr-actions {
	display: flex;
	justify-content: center;
	margin-top: 1.5rem;
}

.wl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.65rem 1.35rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.wl-btn:hover {
	border-color: var(--gold);
	color: var(--gold);
}

.wl-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.wl-star {
	display: inline-flex;
	width: 16px;
	height: 16px;
}

.wl-star svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linejoin: round;
	transition: fill 0.25s ease;
}

.wl-btn.is-saved {
	border-color: var(--gold);
	color: var(--gold);
	background: rgba(201, 162, 39, 0.08);
}

.wl-btn.is-saved .wl-star svg {
	fill: var(--gold);
}

/* ---- Account shell ---- */

.account {
	max-width: 1100px;
	padding: 3.5rem 1.5rem 6rem;
}

.account-head {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding-bottom: 2rem;
	margin-bottom: 2.5rem;
	border-bottom: 1px solid var(--line);
}

.account-head .author-avatar {
	width: 76px;
	height: 76px;
	font-size: 1.8rem;
	flex: none;
}

.account-name {
	margin: 0 0 0.25rem;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

.account-email {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--dim);
}

.account-shell {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}

/* ---- Sidebar ---- */

.account-nav {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	position: sticky;
	top: 100px;
}

.account-navlink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 8px;
	font-family: var(--f-body);
	font-size: 0.95rem;
	color: var(--dim);
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.account-navlink:hover {
	background: var(--noir-2);
	color: var(--cream);
}

.account-navlink.is-active {
	background: var(--noir-2);
	border-color: var(--line);
	color: var(--cream-2);
	font-weight: 500;
}

.account-navlink.is-active::before {
	content: "";
	position: absolute;
	left: 0;
}

.account-navcount {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
	background: var(--noir-3);
	border: 1px solid var(--line);
	color: var(--dim);
}

.account-navlink.is-active .account-navcount {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--noir);
}

.account-navlink--out {
	margin-top: 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	border-radius: 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.account-navlink--out:hover {
	background: transparent;
	color: var(--skip-lt);
}

/* ---- Panel ---- */

.account-panel {
	min-width: 0;
}

.account-panel-title {
	margin: 0 0 0.4rem;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.6rem;
	letter-spacing: -0.02em;
	color: var(--cream-2);
}

.account-panel-sub {
	margin: 0 0 2rem;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.95rem;
	color: var(--dim);
}

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

@media (max-width: 1000px) {
	.account-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Empty states ---- */

.account-empty {
	padding: 3rem 2rem;
	text-align: center;
	background: var(--noir-2);
	border: 1px dashed var(--line);
	border-radius: 12px;
}

.account-empty p {
	margin: 0 0 0.4rem;
	font-family: var(--f-body);
	font-size: 1.05rem;
	color: var(--cream);
}

.account-empty-sub {
	font-size: 0.9rem !important;
	font-weight: 300;
	color: var(--dim) !important;
	margin-bottom: 1.75rem !important;
}

/* ---- My comments ---- */

.account-comments {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.account-comment {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding: 1.35rem 1.5rem;
	background: var(--noir-2);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color 0.25s ease;
}

.account-comment:hover {
	border-color: var(--gold);
}

.account-comment-main {
	min-width: 0;
}

.account-comment-on {
	margin: 0 0 0.5rem;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dim);
}

.account-comment-on strong {
	color: var(--gold-lt);
	font-weight: 600;
}

.account-comment-text {
	margin: 0 0 0.5rem;
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--cream);
}

.account-comment-date {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.66rem;
	color: var(--dim);
}

.account-comment-open {
	flex: none;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-lt);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.25s ease;
}

.account-comment-open:hover {
	color: var(--gold);
}

/* ---- Responsive ---- */

@media (max-width: 860px) {
	.account-shell {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.account-nav {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0.5rem;
		padding-bottom: 1.5rem;
		border-bottom: 1px solid var(--line);
	}

	.account-navlink {
		padding: 0.6rem 1rem;
		font-size: 0.88rem;
	}

	.account-navlink--out {
		margin-top: 0;
		padding-top: 0.6rem;
		border-top: none;
		margin-left: auto;
	}

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

@media (max-width: 540px) {
	.account-head {
		flex-direction: column;
		text-align: center;
	}

	.account-comment {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* =================================================
 * COMMENTS — custom markup, staged reveal, delete
 * Append to style.css LAST.
 * ================================================= */

.cmts-list .cmt {
	padding: 1.4rem 0;
	border-bottom: 1px solid var(--line);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.cmts-list .cmt.is-hidden {
	display: none;
}

.cmts-list .cmt.is-removing {
	opacity: 0;
	transform: translateX(-8px);
}

.cmt-inner {
	display: block;
}

/* ---- Head: avatar, name, date, delete ---- */

.cmt-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.cmt-head .author-avatar {
	width: 40px;
	height: 40px;
	font-size: 0.95rem;
	flex: none;
}

.cmt-byline {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1;
}

.cmt-author {
	font-family: var(--f-body);
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--cream-2);
}

.cmt-date {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.06em;
	color: var(--dim);
}

.cmt-delete {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--dim);
	cursor: pointer;
	transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cmt-delete svg {
	width: 17px;
	height: 17px;
}

.cmt-delete:hover {
	color: var(--skip-lt);
	border-color: var(--skip);
	background: rgba(155, 58, 50, 0.12);
}

.cmt-delete:disabled {
	opacity: 0.5;
	cursor: default;
}

/* ---- Body ---- */

.cmt-body {
	padding-left: calc(40px + 0.75rem);
	font-family: var(--f-body);
	font-weight: 300;
	font-size: 0.98rem;
	line-height: 1.65;
	color: var(--cream);
}

.cmt-body p {
	margin: 0 0 0.8em;
}

.cmt-body p:last-child {
	margin-bottom: 0;
}

.cmt-pending {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-lt);
}

/* ---- Actions ---- */

.cmt-actions {
	padding-left: calc(40px + 0.75rem);
	margin-top: 0.6rem;
}

.cmt-actions a {
	font-family: var(--f-mono);
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-lt);
	text-decoration: none;
	transition: color 0.25s ease;
}

.cmt-actions a:hover {
	color: var(--gold);
}

/* ---- Nested replies ---- */

.cmts-list .children {
	list-style: none;
	margin: 1.25rem 0 0 0;
	padding-left: 1.5rem;
	border-left: 1px solid var(--line);
}

.cmts-list .children .cmt:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

/* ---- Show more ---- */

.cmts-more-wrap {
	margin-top: 1.75rem;
	text-align: center;
}

.cmts-more {
	padding: 0.75rem 1.9rem;
	background: transparent;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--cream);
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.cmts-more:hover {
	border-color: var(--gold);
	color: var(--gold);
}

@media (max-width: 540px) {
	.cmt-body,
	.cmt-actions {
		padding-left: 0;
	}
}
/* =================================================
 * AD BAND — minimal AdSense strip after the header
 * Append to style.css. Only renders when AdSense is
 * configured (see template-parts/ad-slot.php).
 * ================================================= */

.ad-band {
	width: 100%;
	background: var(--noir-2);
	border-bottom: 1px solid var(--line);
}

.ad-band-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	/* Minimal reserved height so the ad has room without
	   dominating. A leaderboard is ~90px; keep it modest. */
	min-height: 90px;
	justify-content: center;
}

.ad-band-label {
	font-family: var(--f-mono);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
	opacity: 0.6;
}

.ad-unit {
	width: 100%;
	max-width: 728px;   /* leaderboard cap on desktop */
	min-height: 60px;
	margin: 0 auto;
}

@media (max-width: 768px) {
	.ad-band-inner {
		min-height: 70px;
		padding-top: 0.7rem;
		padding-bottom: 0.7rem;
	}
	.ad-unit {
		max-width: 320px;   /* mobile banner */
		min-height: 50px;
	}
}
/* =================================================
 * HERO — MOBILE FIXES  ·  append to style.css LAST
 *
 * Fixes two things on phones:
 *  1. Hero image over-cropping — cap height, bias the
 *     crop toward the top so the subject stays in frame.
 *  2. Hero title clipping — allow it to wrap instead of
 *     truncating with an ellipsis.
 * ================================================= */

@media (max-width: 768px) {

	/* ---- Height: keep the hero tall enough to feel like a
	   hero, but not a full-screen crop. Roughly 4:5 of the
	   viewport width, clamped so it never gets extreme. ---- */
	.hero-carousel .hero,
	.hero-slide .hero {
		height: clamp(420px, 78vh, 620px);
	}

	/* ---- Crop bias: pull the visible area toward the top
	   of the image so faces/subjects (usually upper-centre)
	   don't get cut off at the chin. ---- */
	.hero-bg {
		background-position: center 30% !important;
	}

	/* If the hero uses an <img> inside .hero-bg rather than a
	   CSS background, cover the same case: */
	.hero-bg img {
		object-position: center 30%;
	}

	/* ---- Title: wrap instead of clip. Two lines max, then
	   ellipsis only if truly enormous. ---- */
	.hero-title {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: clamp(1.9rem, 8vw, 2.6rem);
		line-height: 1.08;
	}

	/* Give the copy a touch more breathing room from the
	   bottom so it clears the Safari toolbar area. */
	.hero-inner {
		padding-bottom: 3rem;
	}

	/* Keep the meta row (verdict badge) comfortably above
	   the title. */
	.hero-meta {
		margin-bottom: 0.75rem;
	}
}

/* Extra-small phones (~360px): a little tighter. */
@media (max-width: 400px) {
	.hero-carousel .hero,
	.hero-slide .hero {
		height: clamp(380px, 72vh, 540px);
	}
	.hero-title {
		font-size: clamp(1.7rem, 8.5vw, 2.2rem);
	}
}
/* =================================================
 * HERO — MOBILE FIXES  ·  append to style.css LAST
 * (Replaces the previous hero-mobile block. If the old
 *  one is already in style.css, delete it first — see note.)
 *
 * Fixes:
 *  1. Byline overlapping the title when it wraps to 3 lines
 *     — reserve a gap, let the overlay stack flow normally.
 *  2. Hero image crop framing on mobile — set height +
 *     object-position so the subject stays in frame.
 * ================================================= */

@media (max-width: 768px) {

	/* ---- Hero height: full-bleed but not absurd ---- */
	.hero-carousel .hero,
	.hero-slide .hero {
		height: auto;
		min-height: 72vh;
	}

	/* ---- Overlay stack: badge -> title -> byline flows
	   as a normal column with real gaps. No fixed heights,
	   no clamping that causes overlap. ---- */
	.hero-copy {
		display: flex;
		flex-direction: column;
	}

	.hero-meta {
		margin-bottom: 1rem;
	}

	/* Title wraps freely to as many lines as it needs, with
	   a guaranteed gap below before the byline. */
	.hero-title {
		white-space: normal !important;
		overflow: visible !important;
		text-overflow: clip !important;
		-webkit-line-clamp: none !important;
		display: block !important;
		font-size: clamp(1.7rem, 7.5vw, 2.4rem);
		line-height: 1.1;
		margin: 0 0 1.15rem 0 !important;
	}

	/* Byline + avatar sit cleanly below with their own row. */
	.hero-author {
		display: flex;
		align-items: center;
		gap: 0.6rem;
	}

	/* Breathing room at the bottom of the hero copy so the
	   stack clears the browser toolbar area. */
	.hero-inner {
		padding-bottom: 3rem;
	}

	/* ---- Image framing ---- */
	/* Covers both cases: CSS background-image on .hero-bg,
	   or an <img> inside it. object-position/background-position
	   biased slightly up so subjects stay framed. */
	.hero-bg {
		background-position: center 30% !important;
		background-size: cover !important;
	}

	.hero-bg img {
		object-fit: cover !important;
		object-position: center 30% !important;
		width: 100%;
		height: 100%;
	}
}

/* Extra-small phones (~360px) */
@media (max-width: 400px) {
	.hero-carousel .hero,
	.hero-slide .hero {
		min-height: 66vh;
	}
	.hero-title {
		font-size: clamp(1.55rem, 8vw, 2.1rem);
	}
}
/* =================================================
 * NAV PANEL — single divider before account block
 * The last menu item drew its own bottom border and
 * .nav-account draws a top border below it — two lines.
 * Drop the menu item's border so only the account
 * divider remains. Extra specificity so nothing overrides.
 * ================================================= */

.nav-panel .nav-panel-nav li:last-child {
	border-bottom: none;
}

/* =================================================
 * BRAND LOGO + WORDMARK
 * Custom logo (Customize → Site Identity) + ShekharrTV
 * text as one lockup in the header. Plain text is the
 * fallback when no logo is set.
 * Knobs: .brand-logo height, .brand-wordmark font-size.
 * ================================================= */

.brand--logo {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	line-height: 1;
}

.brand-logo {
	display: block;
	height: 46px;
	width: auto;
	flex: none;
}

.brand-wordmark {
	font-family: var(--f-display);
	font-size: 30px;
	letter-spacing: 0.01em;
	line-height: 1;
	color: var(--cream-2);
	white-space: nowrap;
}

@media (max-width: 720px) {
	.brand-logo {
		height: 38px;
	}
	.brand-wordmark {
		font-size: 22px;
	}
}

/* =================================================
 * HEADER APP BUTTON
 * Filled gold pill ("Our App") sitting left of the
 * profile/login link. Matches .acct-submit gold CTA.
 * Opens the client's app (seeti-app.vercel.app).
 * ================================================= */

.hdr-account {
	gap: 0.65rem;
}

.hdr-app {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: none;
	padding: 0.5rem 0.95rem;
	background: var(--gold);
	border: 1px solid var(--gold);
	border-radius: 999px;
	color: var(--noir);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.hdr-app svg {
	display: block;
	width: 15px;
	height: 15px;
	flex: none;
}

.hdr-app:hover,
.hdr-app:focus-visible {
	background: var(--gold-lt);
	border-color: var(--gold-lt);
	color: var(--noir);
}

@media (max-width: 720px) {
	.hdr-app {
		padding: 0.45rem 0.7rem;
		font-size: 0.66rem;
		letter-spacing: 0.1em;
	}
	.hdr-app svg {
		display: none;
	}
}

/* =================================================
 * HERO TITLE — descender room (desktop only)
 * The single-line hero title clips the bottom of
 * letters like "y" under overflow:hidden, and sits
 * close to the byline. Give the line box a little
 * more height + bottom padding on desktop so
 * descenders show and clear the author line.
 * (Scoped >=769px so the mobile hero blocks below
 *  are left exactly as tuned.)
 * ================================================= */

@media (min-width: 769px) {
	.hero-title {
		line-height: 1.18;
		padding-bottom: 0.2em;
	}
}

/* =================================================
 * Banner cards — small author avatar beside the name.
 * The avatar <img> lives inside .rcard-media, so the
 * full-bleed media-img rule was enlarging it. Lay the
 * author row out as avatar + name, and pin the avatar
 * to a 24px circle with extra specificity so it wins.
 * ================================================= */

.rcard--banner .rcard-author {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.rcard--banner .rcard-media .rcard-author .author-avatar {
	width: 24px;
	height: 24px;
	object-fit: cover;
	flex: none;
}

/* =================================================
 * Promoted tag in the hero — match the verdict badge.
 * The verdict badge (.verdict, full mode) is taller and
 * a touch larger; mirror its padding/font/weight/radius
 * so PROMOTED and WATCH IT read as an equal pair. Reset
 * the tag's own margin-left so .hero-meta's gap controls
 * the spacing.
 * ================================================= */

.hero-meta .tag-promoted {
	display: inline-flex;
	align-items: center;
	margin-left: 0;
	padding: 0.4rem 0.75rem;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	border-radius: 5px;
}
/* =================================================
 * Banner-card author avatar — FIX
 * (append; supersedes the earlier banner-avatar block)
 * The avatar <img> sits inside .rcard-media, where the
 * full-bleed rule sets position:absolute; inset:0; 100%.
 * Resizing alone left it pinned to the card corner —
 * reset position so it sits inline in the author row.
 * ================================================= */

.rcard--banner .rcard-author {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.rcard--banner .rcard-media .rcard-author .author-avatar {
	position: static;
	inset: auto;
	width: 24px;
	height: 24px;
	object-fit: cover;
	flex: none;
}
/* =================================================
 * SINGLE LIST — "Prepared by" credits (append)
 * Reuses the review author box (.sr-authorbox) for each
 * credited author, and stacks them when a list has two+.
 * ================================================= */

.list-credits {
	margin-top: 3.5rem;
}

.list-credits-title {
	max-width: 1100px;
	margin: 0 auto 1rem;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dim);
}

.list-credits .sr-authorbox.list-credit {
	margin-top: 0;
}

.list-credits .sr-authorbox.list-credit + .sr-authorbox.list-credit {
	margin-top: 1rem;
}
/* =================================================
 * HEADER TWEAKS (append)
 * 1) Logo only — drop the "ShekharrTV" wordmark.
 * 2) User chip — avatar only, no name.
 * 3) Hamburger — remove leftover space above account.
 * ================================================= */

/* 1 — logo only, centred, size locked */
.brand-wordmark {
	display: none;
}
.brand--logo {
	gap: 0;
	align-items: center;
}
.brand-logo {
	height: 46px;
	width: auto;
}
@media (max-width: 720px) {
	.brand-logo {
		height: 38px;
	}
}

/* 2 — user icon: avatar only, no name */
.hdr-user-name {
	display: none;
}
.hdr-user {
	padding: 0.25rem;
	gap: 0;
}

/* 3 — remove leftover free space above the account links */
.nav-account {
	margin-top: 0.5rem;
	padding-top: 1.5rem;
}
/* =================================================
 * IMAGE CAPTIONS as credits (append)
 * Gutenberg image blocks render their caption in a
 * <figcaption>. Style it like the review banner credit
 * so per-image captions read as photo credits.
 * Applies in .sr-body — list pages and review bodies.
 * ================================================= */

.sr-body figcaption,
.sr-body .wp-element-caption {
	margin-top: 0.5rem;
	font-family: var(--f-body);
	font-size: 0.72rem;
	font-weight: 300;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--dim);
	opacity: 0.7;
	text-align: right;
}

@media (max-width: 720px) {
	.sr-body figcaption,
	.sr-body .wp-element-caption {
		font-size: 0.68rem;
		text-align: left;
	}
}
/* =================================================
 * HOME SECTION DIVIDERS (append)
 * Remove the between-section lines — the hero's bottom
 * border (hero→recent) and the section→section top
 * border — and keep the divider only above the
 * newsletter.
 * ================================================= */

.hero {
	border-bottom: none;
}

.section + .section {
	border-top: none;
}

.section.newsletter {
	border-top: 1px solid var(--line);
}
/* =================================================
 * HOME SECTIONS — tighten vertical spacing (append)
 * Each .section had 96px top+bottom, stacking to ~192px
 * of empty space between sections. Halve it on desktop;
 * the mobile value (64px) stays as tuned.
 * ================================================= */

@media (min-width: 769px) {
	.section {
		padding: 48px 0;
	}
}
/* =================================================
 * MOBILE HERO — show the whole banner image (append)
 * Desktop untouched (everything is inside max-width:768px).
 * On phones the banner sits at its natural 16:9 up top with
 * no crop, and the copy stacks below it on the noir bg.
 * Carousel dots/arrows are re-anchored over the image
 * (a full-bleed 16:9 image is ≈ 56.25vw tall).
 * ================================================= */

@media (max-width: 768px) {

	.hero-carousel .hero,
	.hero-slide .hero {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}

	.hero-bg {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.hero-bg img {
		position: relative;
		width: 100%;
		height: 100%;
		object-fit: cover !important;
		object-position: center center !important;
	}

	.hero-bg::after {
		background: linear-gradient(to top, rgba(12, 12, 13, 0.45) 0%, rgba(12, 12, 13, 0) 35%);
	}

	.hero-inner {
		padding-top: 1.5rem;
		padding-bottom: 2.5rem;
	}

	.hero-arrow {
		top: 28vw;
	}

	.hero-dots {
		bottom: auto;
		top: calc(56.25vw - 2.2rem);
	}
}
/* =================================================
 * MOBILE HERO v2 — whole 16:9 image with the copy
 * overlaid inside it, like desktop (append; supersedes
 * the previous mobile-hero block). Desktop untouched.
 * ================================================= */

@media (max-width: 768px) {

	.hero-carousel .hero,
	.hero-slide .hero {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: stretch;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
		overflow: hidden;
	}

	.hero-bg {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.hero-bg img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover !important;
		object-position: center center !important;
	}

	/* Bottom scrim so the copy reads on the image */
	.hero-bg::after {
		display: block;
		background: linear-gradient(to top, rgba(12, 12, 13, 0.92) 6%, rgba(12, 12, 13, 0.55) 34%, rgba(12, 12, 13, 0) 62%);
	}

	.hero-inner {
		position: relative;
		z-index: 2;
		padding-top: 0;
		padding-bottom: 0.9rem;
	}

	.hero-meta {
		margin-bottom: 0.5rem;
	}

	.hero-title {
		font-size: clamp(1.15rem, 5.2vw, 1.7rem) !important;
		line-height: 1.08 !important;
		margin: 0 0 0.55rem 0 !important;
	}

	.hero-author {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.hero-author .author-avatar {
		width: 30px;
		height: 30px;
	}

	.hero-arrow {
		top: 50%;
	}

	/* Dots to the bottom-right, clear of the bottom-left copy */
	.hero-dots {
		top: auto;
		bottom: 0.7rem;
		left: auto;
		right: 1rem;
		justify-content: flex-end;
	}
}
/* =================================================
 * MOBILE HERO v2 — fine tune (append)
 * Kill the big title→author gap (the author carried a
 * 1.25rem top margin), shrink the verdict, shrink the
 * author name + avatar, and re-centre the dots.
 * Mobile only — desktop untouched.
 * ================================================= */

@media (max-width: 768px) {

	/* Verdict a little smaller */
	.hero-meta .verdict {
		padding: 0.3rem 0.6rem;
		font-size: 0.6rem;
	}
	.hero-meta {
		margin-bottom: 0.45rem;
	}

	/* Tight gap between title and author */
	.hero-title {
		margin: 0 0 0.4rem 0 !important;
	}
	.hero-author {
		margin-top: 0;
		gap: 0.45rem;
	}

	/* Smaller author name + avatar */
	.hero-author-name {
		font-size: 0.64rem;
	}
	.hero-author .author-avatar {
		width: 26px;
		height: 26px;
	}

	/* Room below the copy so centred dots don't overlap it */
	.hero-inner {
		padding-bottom: 1.9rem;
	}

	/* Dots back in the centre */
	.hero-dots {
		left: 0;
		right: 0;
		bottom: 0.7rem;
		top: auto;
		justify-content: center;
	}
}