/* ============================================================
   The Scope Verdict — homepage module
   Built to docs/references/scope-verdict-v2-board.jpg and the approved
   Aperture v2.4 prototype (docs/aperture-preview/preview.html).

   RESPONSIVE MODEL: @container, never @media. The block renders inside
   .tsp-eb-wrap, which carries container-type:inline-size. A container query
   matches DESCENDANTS only, so every rule below targets something inside the
   wrapper — never the wrapper itself. (This is the v1.9.0 three-column bug.)

   Container widths run narrower than the viewport: the site container caps
   around 1200px, so ~980cqw is roughly a 1024px screen and ~600cqw roughly
   a 640px one.

   TYPOGRAPHY: --ts-display (Georgia) for editorial titles, --ts-body
   (Source Serif 4) for critic prose, --ts-ui (Inter) for everything
   functional. No font is introduced here.
   ============================================================ */

/* v1.10.115 — the palette is declared for EVERY host of this view, not just
   the homepage block.

   Scope_Verdict_View renders the ring, the verdict pill and the sub-score
   meters in two places: the `telugu-scope/scope-verdict` block (root class
   `.tsp-sv`) and the single-review template (root `.tsp-rv-wrap`), which has no
   `.tsp-sv` ancestor. With the tokens scoped to `.tsp-sv` alone,
   `--tsp-sv-gold-*` were undefined on every review page, which made
   `background: linear-gradient(90deg, var(--tsp-sv-gold-lo), …)` an INVALID
   declaration — and an invalid gradient computes to transparent, not to a
   fallback colour.

   Measured on /dc-movie-review/ at both 390px and 1440px: the verdict pill
   rendered dark ink on a transparent background (invisible against the dark
   card) and all four meter fills had correct widths (60/60/80/80%) but no
   colour. The ring was unaffected because it paints with an SVG
   <linearGradient> whose stops are literals.

   Only the TOKENS are shared. The layout, colour and background below stay on
   `.tsp-sv`, because the review card draws its own. */
.tsp-sv,
.tsp-rv-wrap {
	--tsp-sv-gold: #D9B15C;
	--tsp-sv-gold-hi: #E8C97A;
	--tsp-sv-gold-lo: #B8892F;
	--tsp-sv-red: #C8102E;
	--tsp-sv-red-d: #A50D26;
	--tsp-sv-ink: #ffffff;
	--tsp-sv-dim: #9aa0ac;
	--tsp-sv-dim2: #7C8290;
	--tsp-sv-line: rgba(255, 255, 255, .12);
}

.tsp-sv {
	position: relative;
	color: var(--tsp-sv-ink);
	border-radius: 10px;
	overflow: hidden;
	font-family: var(--ts-ui);
	background:
		radial-gradient(640px 240px at 50% -80px, rgba(217, 177, 92, .14), transparent 62%),
		linear-gradient(160deg, #12141b, #1a1d26 55%, #15181f);
}

/* Film-strip perforation down both edges. Decorative only. */
.tsp-sv::before,
.tsp-sv::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 14px;
	z-index: 0;
	background-image: radial-gradient(circle at 7px 10px, rgba(255, 255, 255, .10) 2.6px, transparent 3px);
	background-size: 14px 22px;
	background-repeat: repeat-y;
}

.tsp-sv::before { left: 6px; }
.tsp-sv::after { right: 6px; }

.tsp-sv__in {
	position: relative;
	z-index: 1;
	padding: 26px 44px 20px;
}

/* ---------------- masthead ---------------- */

.tsp-sv__hd {
	position: relative;
	text-align: center;
	padding: 10px 0 14px;
	margin-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.tsp-sv__hd::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	border-top: 4px double rgba(217, 177, 92, .5);
}

.tsp-sv__trow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.tsp-sv .tsp-sv__title {
	font-family: var(--ts-display);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	margin: 0;
	color: var(--tsp-sv-ink);
}

.tsp-sv .tsp-sv__title i {
	font-style: normal;
	color: var(--tsp-sv-gold);
}

.tsp-sv__pill {
	font-size: 11px;
	font-weight: 700;
	color: var(--tsp-sv-gold);
	border: 1px solid rgba(217, 177, 92, .45);
	border-radius: 999px;
	padding: 3px 11px;
	line-height: 1.8;
	white-space: nowrap;
}

.tsp-sv__sub {
	display: block;
	font-family: var(--ts-body);
	font-style: italic;
	font-size: 12.5px;
	color: var(--tsp-sv-dim);
	margin-top: 6px;
}

/* v1.10.560 — 24px, the touch floor this project already holds everywhere else.
   Measured on the homepage: 20px tall, which is under it. The same floor was put
   on the article and category breadcrumbs in v1.10.450 and on a 22px category
   card link in v1.10.549; this was the last one below it.

   The box grows and the WORD DOES NOT MOVE. It was 20px with translateY(-38%),
   i.e. -7.6px, putting the text centre 24.09px below the header's top. The
   offset is written in pixels rather than as a percentage, because a percentage
   re-derives itself from the height and would move the word the next time the
   height changed.

   -8.1px is MEASURED, not modelled. The arithmetic said -9.6 (12px of centring
   where there had been 10); rendered, that put the text centre at 22.59 instead
   of 24.09, because the 20px block box never centred its line box at exactly
   half its height. The number that holds the word still is the one the browser
   agrees with, so it was taken from the browser.

   `inline-block` with a 24px line-height rather than a flex box. The first
   attempt used inline-flex, and the label read "ALL REVIEWS→" with the arrow
   jammed against the S: the markup separates the word from the arrow with a
   literal space, and a flex container discards a whitespace-only text node
   between two items. The line box gives the same 24px height and leaves inline
   layout — and that space — alone. */
.tsp-sv__all {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-8.1px);
	display: inline-block;
	line-height: 24px;
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #e0a3ac;
	white-space: nowrap;
	text-decoration: none;
}

.tsp-sv__all:hover,
.tsp-sv__all:focus-visible { color: #fff; }

/* ---------------- layout ---------------- */

.tsp-sv__grid {
	display: grid;
	grid-template-columns: 2.05fr 1fr;
	gap: 22px;
	align-items: stretch;
}

/* ---------------- featured scorecard ---------------- */

.tsp-sv-f {
	display: grid;
	grid-template-columns: 180px 1fr 184px;
	gap: 18px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 10px;
	padding: 16px;
	text-decoration: none;
	color: inherit;
	transition: border-color .18s, background .18s;
}

.tsp-sv-f:hover,
.tsp-sv-f:focus-visible {
	border-color: rgba(217, 177, 92, .5);
	background: rgba(255, 255, 255, .05);
}

.tsp-sv-f__poster {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .85);
	min-height: 280px;
	display: block;
	background: #22252e;
}

.tsp-sv-f__poster img,
.tsp-sv-c__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tsp-sv-f__poster .tsp-eb-placeholder,
.tsp-sv-c__poster .tsp-eb-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: inherit;
	background: linear-gradient(135deg, #2a2e39, #1b1e26);
}

.tsp-sv-f__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tsp-sv-kicker {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tsp-sv-gold);
}

.tsp-sv .tsp-sv-f__title {
	font-family: var(--ts-display);
	font-size: 23px;
	line-height: 1.13;
	font-weight: 700;
	margin: 6px 0 0;
	color: var(--tsp-sv-ink);
	/* Long and Telugu titles must wrap, never widen the grid column. */
	overflow-wrap: anywhere;
}

.tsp-sv-meta {
	display: block;
	font-size: 11.5px;
	color: var(--tsp-sv-dim);
	font-weight: 600;
	margin-top: 7px;
}

.tsp-sv-meta b { color: #d5d7de; }
.tsp-sv-sep,
.tsp-sv-pipe { color: var(--tsp-sv-dim2); }

.tsp-sv-credits {
	display: block;
	font-size: 11px;
	color: var(--tsp-sv-dim2);
	font-weight: 500;
	margin-top: 3px;
	overflow-wrap: anywhere;
}

.tsp-sv-credits b { color: #aab0bc; font-weight: 700; }

.tsp-sv-quote {
	display: block;
	font-family: var(--ts-body);
	font-style: italic;
	font-size: 14.5px;
	line-height: 1.5;
	color: #e8e9ee;
	margin-top: 12px;
	padding-left: 14px;
	border-left: 3px solid var(--tsp-sv-red);
}

/* ---------------- what works / what doesn't ---------------- */

.tsp-sv-wd {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 20px;
	margin-top: 13px;
}

.tsp-sv-wd__col { min-width: 0; }

.tsp-sv .tsp-sv-wd .tsp-sv-wd__h {
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tsp-sv-dim);
	margin: 0 0 2px;
	font-family: var(--ts-ui);
}

.tsp-sv-wd__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsp-sv-wd__list li {
	font-size: 12px;
	color: #c9ccd6;
	padding: 2.5px 0;
	line-height: 1.4;
}

.tsp-sv-wd__list--yes li::before { content: "+ "; color: var(--tsp-sv-gold); font-weight: 800; }
.tsp-sv-wd__list--no li::before { content: "\2013 "; color: #e0697c; font-weight: 800; }

/* ---------------- critic bar ---------------- */

.tsp-sv-f__bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 15px;
	flex-wrap: wrap;
}

.tsp-sv-critic {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.tsp-sv-critic__who {
	font-size: 11.5px;
	line-height: 1.35;
	min-width: 0;
}

.tsp-sv-critic__who b {
	display: block;
	font-size: 12.5px;
	color: #fff;
}

.tsp-sv-critic__who span {
	display: block;
	color: var(--tsp-sv-dim);
}

.tsp-sv-f__cta {
	margin-left: auto;
	background: var(--tsp-sv-red);
	color: #fff;
	font-weight: 700;
	font-size: 12.5px;
	padding: 10px 18px;
	border-radius: 6px;
	white-space: nowrap;
	transition: background .2s;
}

.tsp-sv-f:hover .tsp-sv-f__cta,
.tsp-sv-f:focus-visible .tsp-sv-f__cta { background: var(--tsp-sv-red-d); }

/* ---------------- score panel ---------------- */

.tsp-sv-f__score {
	border-left: 1px solid rgba(255, 255, 255, .1);
	padding-left: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.tsp-sv-ring {
	position: relative;
	flex: 0 0 auto;
	display: inline-block;
	line-height: 0;
}

.tsp-sv-ring svg { display: block; }

.tsp-sv-ring__num {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	line-height: 1;
}

.tsp-sv-ring__v {
	font-size: 25px;
	letter-spacing: -.02em;
	line-height: 1;
	text-shadow: 0 0 20px rgba(217, 177, 92, .45);
}

.tsp-sv-ring__v s {
	text-decoration: none;
	font-size: 12px;
	color: var(--tsp-sv-dim2);
	font-weight: 700;
}

.tsp-sv-ring__o {
	font-size: 7.5px;
	color: var(--tsp-sv-dim);
	font-weight: 800;
	margin-top: 3px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.tsp-sv-ring--sm .tsp-sv-ring__v { font-size: 15px; text-shadow: none; }
.tsp-sv-ring--sm .tsp-sv-ring__v s { font-size: 9px; }
/* v1.10.707 — a quarter point ("2.75") in the 54px ring. */
.tsp-sv-ring--sm.tsp-sv-ring--q .tsp-sv-ring__v { font-size: 12.5px; letter-spacing: -.02em; }
.tsp-sv-ring--sm.tsp-sv-ring--q .tsp-sv-ring__v s { font-size: 8px; }

/* ---------------- verdict badges ---------------- */

.tsp-sv-verdict {
	font-weight: 800;
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-block;
}

.tsp-sv-verdict--pill {
	margin-top: 10px;
	font-size: 10px;
	letter-spacing: .14em;
	color: #16181F;
	background: linear-gradient(120deg, var(--tsp-sv-gold-hi), var(--tsp-sv-gold));
	border-radius: 999px;
	padding: 4px 14px;
}

.tsp-sv-verdict--chip {
	font-size: 8.5px;
	letter-spacing: .06em;
	border-radius: 999px;
	padding: 2.5px 9px;
	color: #16181F;
	background: #e9dbb8;
}

.tsp-sv-verdict--stamp {
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%) rotate(-6deg);
	border: 2px solid var(--tsp-sv-gold);
	color: var(--tsp-sv-gold);
	font-size: 12px;
	letter-spacing: .16em;
	padding: 6px 13px;
	border-radius: 4px;
	background: rgba(16, 18, 24, .6);
	max-width: calc(100% - 16px);
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The lower bands must not read as a gold endorsement. Tier is carried by the
   word itself; colour only reinforces it.

   Gold follows the top two bands, which the stricter scale moved: it used to
   sit on must-watch and blockbuster when blockbuster meant 4.0. Blockbuster is
   now 3.5, so leaving the rule untouched would have gilded a 3.5 while a 4.0
   Outstanding rendered plain — the exact inversion this comment warns against. */
.tsp-sv-verdict--chip.tsp-sv-verdict--must-watch,
.tsp-sv-verdict--chip.tsp-sv-verdict--outstanding {
	background: linear-gradient(120deg, var(--tsp-sv-gold-hi), var(--tsp-sv-gold));
}

.tsp-sv-verdict--below-average,
.tsp-sv-verdict--skip-it {
	background: #3a3f4c;
	color: #e4e6ec;
}

.tsp-sv-verdict--stamp.tsp-sv-verdict--below-average,
.tsp-sv-verdict--stamp.tsp-sv-verdict--skip-it {
	background: rgba(16, 18, 24, .72);
	border-color: #8a9099;
	color: #d8dbe2;
}

/* ---------------- category meters ---------------- */

.tsp-sv-meters {
	width: 100%;
	margin-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-top: 12px;
	display: block;
}

.tsp-sv-meter {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3.5px 0;
}

.tsp-sv-meter__label {
	flex: 0 0 78px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--tsp-sv-dim);
	text-transform: uppercase;
}

.tsp-sv-meter__bar {
	flex: 1;
	height: 5px;
	border-radius: 99px;
	background: rgba(255, 255, 255, .12);
	overflow: hidden;
	min-width: 40px;
}

.tsp-sv-meter__fill {
	display: block;
	height: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--tsp-sv-gold-lo), var(--tsp-sv-gold-hi));
}

.tsp-sv-meter__value {
	flex: 0 0 24px;
	text-align: right;
	font-size: 10.5px;
	font-weight: 800;
	color: #d5d7de;
}

/* ---------------- compact supporting rows ---------------- */

.tsp-sv__stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.tsp-sv-c {
	position: relative;
	display: flex;
	gap: 14px;
	background: rgba(255, 255, 255, .045);
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: 10px;
	padding: 12px 14px;
	align-items: stretch;
	transition: transform .18s, border-color .18s, background .18s;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.tsp-sv-c:hover,
.tsp-sv-c:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(217, 177, 92, .5);
	background: rgba(255, 255, 255, .07);
}

.tsp-sv-c__poster {
	position: relative;
	width: 86px;
	border-radius: 6px;
	overflow: hidden;
	flex: 0 0 86px;
	border: 1px solid rgba(255, 255, 255, .14);
	min-height: 96px;
	background: #22252e;
}

.tsp-sv-c__mid {
	flex: 1;
	min-width: 0;
	align-self: center;
}

.tsp-sv .tsp-sv-c__title {
	font-family: var(--ts-display);
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
	color: var(--tsp-sv-ink);
	overflow-wrap: anywhere;
}

.tsp-sv-c__take {
	display: block;
	font-size: 11px;
	color: #aab0bc;
	line-height: 1.4;
	margin-top: 3px;
	font-style: italic;
	font-family: var(--ts-body);
}

.tsp-sv-c__mid .tsp-sv-meta {
	font-size: 10px;
	color: var(--tsp-sv-dim2);
	margin-top: 4px;
}

.tsp-sv-c__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	flex: 0 0 auto;
}

/* ---------------- focus ---------------- */

.tsp-sv a:focus-visible {
	outline: 2px solid var(--tsp-sv-gold-hi);
	outline-offset: 3px;
}

/* ---------------- motion ---------------- */

@media (prefers-reduced-motion: no-preference) {
	.tsp-sv-arc { animation: tsp-sv-draw 1.1s ease-out both; }
	@keyframes tsp-sv-draw { from { stroke-dashoffset: var(--tsp-sv-c); } }
	.tsp-sv-verdict--stamp { animation: tsp-sv-stamp .45s cubic-bezier(.2, 1.4, .4, 1) .35s both; }
	@keyframes tsp-sv-stamp { from { opacity: 0; transform: translateX(-50%) rotate(-6deg) scale(1.7); } }
}

/* ============================================================
   TABLET — the score panel moves under the featured card and lies flat,
   rather than surviving as a squeezed third column.
   ============================================================ */

@container (max-width: 1008px) {
	.tsp-sv__in { padding: 24px 30px 18px; }

	.tsp-sv__grid { grid-template-columns: 1fr; }

	.tsp-sv-f { grid-template-columns: 180px 1fr; }

	.tsp-sv-f__score {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
		padding-left: 0;
		padding-top: 14px;
		margin-top: 2px;
		flex-direction: row;
		align-items: center;
		gap: 20px;
	}

	.tsp-sv-verdict--pill { margin-top: 0; }

	.tsp-sv-meters {
		width: auto;
		flex: 1;
		margin-top: 0;
		border-top: 0;
		padding-top: 0;
	}

	/* Three across rather than a tall stack once it is full width. */
	.tsp-sv__stack {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 10px;
	}
}

/* ============================================================
   MOBILE — a deliberate single column, not a shrunken board.

   display:contents dissolves the body and score wrappers so their children
   become siblings in one flex column. That is what allows the ring to sit
   between the metadata and the quote — an order the desktop DOM cannot
   produce, and the reason this is not just a narrower grid.
   ============================================================ */

@container (max-width: 782px) {
	.tsp-sv__in { padding: 20px 18px 16px; }
	.tsp-sv::before { left: 2px; }
	.tsp-sv::after { right: 2px; }

	.tsp-sv .tsp-sv__title { font-size: 21px; }
	.tsp-sv__trow { flex-wrap: wrap; gap: 8px; }

	.tsp-sv__all {
		position: static;
		transform: none;
		display: inline-block;
		margin-top: 10px;
		font-size: 11px;
	}

	.tsp-sv-f {
		display: flex;
		flex-direction: column;
		padding: 14px;
		gap: 0;
	}

	.tsp-sv-f__body,
	.tsp-sv-f__score { display: contents; }

	.tsp-sv-f__poster {
		order: 1;
		min-height: 0;
		height: 215px;
		margin-bottom: 12px;
	}

	.tsp-sv-kicker { order: 2; }
	.tsp-sv .tsp-sv-f__title { order: 3; font-size: 21px; }
	.tsp-sv-f__body > .tsp-sv-meta { order: 4; }
	.tsp-sv-credits { order: 5; }

	.tsp-sv-f__score > .tsp-sv-ring {
		order: 6;
		align-self: center;
		margin-top: 16px;
	}

	.tsp-sv-verdict--pill {
		order: 7;
		align-self: center;
		margin-top: 10px;
	}

	.tsp-sv-quote { order: 8; margin-top: 16px; }
	.tsp-sv-wd { order: 9; }

	.tsp-sv-meters {
		order: 10;
		width: 100%;
		margin-top: 16px;
		border-top: 1px solid rgba(255, 255, 255, .1);
		padding-top: 12px;
	}

	.tsp-sv-f__bar { order: 11; }

	.tsp-sv-wd { grid-template-columns: 1fr; }

	.tsp-sv-f__bar {
		flex-wrap: wrap;
		gap: 12px;
		padding-top: 16px;
	}

	.tsp-sv-critic { flex: 1 1 auto; }

	.tsp-sv-f__cta {
		margin-left: 0;
		flex-basis: 100%;
		text-align: center;
		padding: 12px 14px;
		font-size: 13px;
	}

	/* Bumped from the desktop 10/10.5px — small dark-on-dark labels are the
	   first thing to become unreadable on a phone. */
	.tsp-sv-meter__label { flex-basis: 66px; font-size: 11px; }
	.tsp-sv-meter__value { font-size: 11.5px; }
	.tsp-sv-meta { font-size: 12px; }
	.tsp-sv-credits { font-size: 12px; }
	.tsp-sv-wd__list li { font-size: 12.5px; }

	.tsp-sv__stack { grid-template-columns: 1fr; }

	.tsp-sv-c { padding: 10px 12px; gap: 12px; }
	.tsp-sv-c__poster { width: 72px; flex-basis: 72px; min-height: 84px; }
	.tsp-sv .tsp-sv-c__title { font-size: 14px; }
	.tsp-sv-c__take { font-size: 12px; }
	.tsp-sv-c__mid .tsp-sv-meta { font-size: 11px; }
}

/* Very narrow phones: keep the compact rows from crushing the ring column. */
@container (max-width: 380px) {
	.tsp-sv-c { flex-wrap: wrap; }
	.tsp-sv-c__mid { flex-basis: calc(100% - 84px); }
	.tsp-sv-c__side {
		flex-direction: row;
		flex-basis: 100%;
		justify-content: flex-start;
		gap: 10px;
		padding-top: 4px;
	}
}

/* ============================================================
   v1.10.125 — the full-bleed cinema band.

   THE BAND IS FULL-BLEED VIA BLOCK ALIGNMENT, NOT A vw HACK.

   Measured on the deployed homepage at a 1280 viewport: `.entry-content`
   (`is-layout-constrained`) is exactly 1265px — the document's clientWidth —
   so an `alignfull` child bleeds edge to edge with ZERO scrollbar error. The
   usual `margin-inline: calc(50% - 50vw)` would overhang by 7.5px a side,
   because `vw` counts the scrollbar and `clientWidth` does not. WordPress's
   constrained-layout already implements the correct bleed; reimplementing it
   in the plugin would be a worse copy of something the platform does right.

   So the band's width is the BLOCK'S alignment, which is an editor setting on
   Home 1974 — logged in OWNER-STEPS.md. Everything below is written to be
   correct in BOTH states: aligned full it is a true edge-to-edge band with its
   content centred at <=1280; left contained it is the card it is today, with
   no broken half-bleed in between.

   BREAKPOINTS: still @container, per this file's model — but the container is
   now ~= the viewport once the block is full width (viewport minus scrollbar),
   which is why these thresholds sit just under the real widths they answer to:
   MEASURED, not assumed: below ~1240px the site container EQUALS the viewport
   (390->390, 768->768, 1024->1024; only past that does it cap at 1200). So the
   thresholds below ARE the real widths. The first guess at 1000/700 shipped and
   failed the self-test at 768px, where the container is 768 and the rail never
   engaged — the exact container-vs-viewport trap this file warns about.
   ============================================================ */

/* Content centred at the site's measure, whatever the band's width. */
.tsp-sv__in {
	max-width: 1280px;
	margin-inline: auto;
}

/* Superseded by the v1.10.129 --bleed rules below, which do not depend on
   anyone having set an alignment in the editor. */

/* ------------------------------------------------------------
   DESKTOP (>=1024px viewport): the verdict leads at full width,
   the compact reviews sit in a row beneath it.

   Previously the supporting reviews were a narrow right-hand COLUMN beside
   the verdict (2.05fr / 1fr), which capped the lead at about two thirds of
   the band and gave each compact card ~300px. Stacking them puts the
   scorecard across the full measure — where its 3-column poster/body/score
   split has room to breathe — and gives the row beneath it real cards.
   ------------------------------------------------------------ */
@container (min-width: 1009px) {
	.tsp-sv__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.tsp-sv__stack {
		display: grid;
		/* auto-fit, so 3 real reviews make 3 cards and never 4 with a gap:
		   the row degrades to what exists rather than padding itself. */
		grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
		gap: 14px;
	}

	/* The lead's own three columns, with the poster and score panel given
	   slightly more room now that the card owns the full measure. */
	.tsp-sv-f {
		grid-template-columns: 208px 1fr 200px;
		gap: 22px;
	}
}

/* ------------------------------------------------------------
   TABLET (783-1023px viewport).

   The verdict keeps poster + body side by side and drops the score panel to
   a full-width row underneath — the existing max-width:980px rules already
   do exactly that, so they are left to it rather than duplicated here. This
   block only settles the compact row: 2-up, which at this width gives a card
   wide enough for a poster, a title and a score without truncating all three.
   ------------------------------------------------------------ */
@container (min-width: 783px) and (max-width: 1008px) {
	.tsp-sv__stack {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ------------------------------------------------------------
   MOBILE (<=782px viewport): the compact reviews become a swipe rail.

   Modelled on `.reviews .rrail` in docs/aperture-preview/preview-mobile-app.html:
   finger-swipe with momentum, snapping card to card, and the next card
   deliberately peeking so the rail reads as scrollable without an arrow.
   There are no arrows here at all — the prototype has none on phones, and a
   control that only appears on hover is no control on a touch screen.

   The peek is what makes it discoverable: 76% width plus an 18px gap leaves
   roughly a fifth of the next card showing.
   ------------------------------------------------------------ */
@container (max-width: 782px) {
	.tsp-sv__stack {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 76%;
		grid-template-columns: none;
		gap: 12px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		/* The rail bleeds to the band's padding edge so the first card starts
		   flush and the last can still be scrolled fully into view. */
		margin-inline: -18px;
		padding-inline: 18px;
		scroll-padding-left: 18px;
		scrollbar-width: none;
	}

	.tsp-sv__stack::-webkit-scrollbar { display: none; }

	.tsp-sv__stack > .tsp-sv-c {
		scroll-snap-align: start;
		min-width: 0;
	}
}

/* ------------------------------------------------------------
   Works / doesn't legibility.

   Measured before this change against the band's real painted background
   (rgb(33,36,45) — the mid gradient stop with the card's 3% white overlay):
   labels 5.9:1 and body 9.66:1, both already past WCAG AA. This is therefore
   a legibility improvement, not a contrast failure being fixed — the harder
   problem was the 9.5px label, which no colour change addresses, so the label
   also gains a little size and tracking.
   ------------------------------------------------------------ */
.tsp-sv-wd__list li { color: #e8eaee; }

/* v1.10.214: permanently gold. These are section LABELS, not links, so they
   never depend on hover. Set here rather than on the base rule above because
   this one is same-specificity and later, so it is the one that wins — the base
   rule keeps its dim value and this stays the single override, as it already was
   for size and tracking. Only the headings: the list items keep #e8eaee and the
   + / - marks keep their gold and red. Measured 7.69:1 on this panel. */
.tsp-sv .tsp-sv-wd .tsp-sv-wd__h {
	color: var(--tsp-sv-gold, #D9B15C);
	font-size: 10.5px;
	letter-spacing: .1em;
}

/* v1.10.126 — "All reviews →" is a real touch target on phones.

   Measured 93x17 at 390 and 768: the band's only sub-44px control. Grown with
   padding and a min-height so the hit area reaches the floor without changing
   the link's 11.5px type, which is the band's own scale. Desktop is left alone;
   there the pointer is precise and the row's spacing is deliberate.

   v1.10.564 — a LINE BOX, not a flex box, for the reason v1.10.562 found at
   desktop. The markup writes the label and the arrow as `label · space · span`,
   and a flex container drops a whitespace-only text node between two items, so
   this read "ALL REVIEWS→" on every phone and tablet — the same defect as
   desktop, in a different rule, and it outlived the desktop fix because the
   measuring harness ignored its width argument and reported 1440 three times
   while claiming 390, 414 and 768.

   36px of line box plus 4px top and bottom is the same 44px, and the text
   centre stays 22px from the element's top exactly as before. */
@container (max-width: 782px) {
	.tsp-sv__all {
		display: inline-block;
		line-height: 36px;
		min-height: 44px;
		padding-block: 4px;
	}
}

/* ============================================================
   v1.10.129 — the band bleeds by code, matching the newsletter band exactly.

   MECHANISM, copied not invented. Measured on the live homepage:
   `.tsp-newsletter-band.alignfull` is a direct child of
   `.entry-content.is-layout-constrained`, has `padding:0`, `margin:0` and
   `max-width:none`, and spans 0 -> clientWidth. Its inner
   `.tsp-newsletter-band__wrap` carries `max-width:1200px` and auto margins.
   The footer lands on the same two edges. That is the whole trick: the
   alignment class on the block's own root, and the centring one level in.

   `.tsp-eb-wrap` is likewise a direct child of `.entry-content`, so it is the
   right element to carry the class. Two things then have to give way, and only
   for this block — which is what `--bleed` is for:

     1. the shared wrapper's `max-width:1200px` + auto margins, which core's
        constrained-layout rule stops applying once the element is `alignfull`;
     2. its `padding: 0 20px`, which is NOT alignment-dependent and would
        otherwise stop the dark background 20px short of each edge — the band
        would look bled at a glance and be wrong by 20px on both sides.

   No `vw` anywhere. A `calc(50% - 50vw)` breakout overhangs by half the
   scrollbar on each side (measured: ~7.5px) because `vw` counts the scrollbar
   and `clientWidth` does not. The theme's own path has no such error, which is
   why it is the one being used.
   ============================================================ */
/* SPECIFICITY, and why this selector is three classes deep.

   typography.css owns the shared wrapper with
   `.entry-content .tsp-eb-wrap { max-width: var(--tsp-wrap); margin-inline:
   auto; padding-inline: var(--tsp-gutter) }` — that is (0,2,0). A plain
   `.tsp-eb-wrap--bleed` is (0,1,0) and loses to it on specificity no matter
   which file loads last, which is exactly what happened on the first deploy:
   the classes were emitted, the band still measured 1160px, and the wrapper
   kept its cap and its 20px gutter.

   `.entry-content .tsp-eb-wrap.tsp-eb-wrap--bleed` is (0,3,0) and wins
   outright, with no `!important`. It matches the ancestor typography.css
   already relies on, so it is the same contract, not a new one. */
.entry-content .tsp-eb-wrap.tsp-eb-wrap--bleed {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* The dark band now owns the full width, so it has no corners to round and no
   side margin of its own. The vertical rhythm is unchanged. */
.entry-content .tsp-eb-wrap.tsp-eb-wrap--bleed > .tsp-sv {
	border-radius: 0;
	margin-inline: 0;
}

/* Content stays exactly where it was: <=1280px, centred, with the band's own
   gutters. `.tsp-sv__in` already declares max-width and auto margins, so the
   bleed changes the background's width and nothing about the measure. */

/* If an editor later sets the block to Full width themselves, the class is
   emitted once, not twice, and these rules are idempotent — no double bleed. */

/* ==========================================================================
   v1.10.139 — supporting review thumbnails are square.

   The three cards under the featured review used a portrait thumbnail: 86px
   wide with `min-height: 96px` (72x84 on narrow containers), so the crop was
   taller than it was wide and the three cards read as slightly different
   shapes. They are now 1:1.

   Only the SUPPORTING cards. `.tsp-sv-f__poster` — the featured review's own
   image — is deliberately untouched.

   `aspect-ratio` replaces the fixed min-height rather than fighting it: the
   width still comes from the flex basis above, so the height follows it and
   the card keeps its existing rhythm at every breakpoint, including the
   narrow-container override further up this file.

   No crop behaviour changes: `.tsp-sv-c__poster img` already declares
   `width/height:100%` with `object-fit: cover`, so the image fills the square
   and is cropped, never stretched. Nothing about the stored media, the alt
   text or the loading attributes is affected — this is presentation only.
   ========================================================================== */
.tsp-sv-c__poster {
	aspect-ratio: 1 / 1;
	min-height: 0;
	/* The poster is a FLEX ITEM, and a flex line stretches its items on the
	   cross axis by default — which sets the height outright and leaves
	   aspect-ratio with nothing to do. Measured before this line: 86x217 on
	   desktop and 72x679 at 390px, i.e. the full card height. Opting out of the
	   stretch is what lets the ratio drive the height from the flex basis. The
	   text column sets its own align-self already, so the card's vertical
	   alignment is unchanged. */
	align-self: flex-start;
}

/* ==========================================================================
   v1.10.141 — rebuilt to Images/The Scope Verdict Review.png.

   The data model, the score source and the markup contract are unchanged; this
   is composition, hierarchy and weight. Every value still arrives from
   Scope_Verdict — nothing is recomputed here.
   ========================================================================== */

/* Header: "REVIEWS — THE SCOPE VERDICT" left, "ALL REVIEWS →" right. */
.tsp-sv__hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.tsp-sv .tsp-sv__title {
	font-size: clamp(20px, 2.2cqi, 27px);
	letter-spacing: .01em;
}

.tsp-sv__all {
	margin-left: auto;
	white-space: nowrap;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* The hero's red eyebrow. */
.tsp-sv-f__eyebrow {
	display: block;
	margin-bottom: 8px;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--tsp-sv-red, #C8102E);
}

/* Hero title: serif, prominent, and clamped so a long headline cannot drive
   the card's height. */
.tsp-sv .tsp-sv-f__title {
	font-family: var(--ts-display, Georgia, serif);
	font-size: clamp(21px, 2.9cqi, 34px);
	line-height: 1.16;
	font-weight: 700;
	margin: 0 0 10px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* LANGUAGE | STATUS, on the hero and on every supporting card. */
.tsp-sv-rel {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #c7cad2;
}

.tsp-sv-rel b {
	font-weight: 700;
	color: #fff;
}

.tsp-sv-rel .tsp-sv-avail {
	color: var(--tsp-sv-gold, #D9B15C);
}

.tsp-sv-rel .tsp-sv-pipe {
	color: var(--tsp-sv-red, #C8102E);
	font-weight: 400;
}

/* Full-review button: the reference's solid red, at a real touch size. */
.tsp-sv-f__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	margin-top: 14px;
	padding: 11px 22px;
	background: var(--tsp-sv-red, #C8102E);
	color: #fff;
	border-radius: 5px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	transition: background .15s ease;
}

.tsp-sv-f:hover .tsp-sv-f__cta,
.tsp-sv-f:focus-visible .tsp-sv-f__cta {
	background: var(--tsp-sv-red-d, #A50D26);
}

/* MORE REVIEWS, with the reference's red accent rule. */
.tsp-sv__morehd {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 14px;
	/* v1.10.422: display serif — "MORE REVIEWS" heads a group of stories, so it
	   is an editorial section heading rather than a control. Family only; the
	   compact uppercase treatment and the red accent rule are unchanged. */
	font-family: var(--ts-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
}

.tsp-sv__morehd::before {
	content: "";
	width: 3px;
	height: 17px;
	border-radius: 2px;
	background: var(--tsp-sv-red, #C8102E);
	flex: none;
}

/* Supporting cards: three equal columns, square image left, content right. */
.tsp-sv__stack {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
	align-items: stretch;
}

.tsp-sv-c {
	align-items: stretch;
	gap: 14px;
	padding: 12px;
	border-radius: 9px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
	transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.tsp-sv-c:hover,
.tsp-sv-c:focus-visible {
	border-color: rgba(217, 177, 92, .38);
	background: rgba(255, 255, 255, .05);
}

.tsp-sv-c__mid {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-self: stretch;
}

.tsp-sv .tsp-sv-c__title {
	font-family: var(--ts-display, Georgia, serif);
	font-size: 15px;
	line-height: 1.28;
	font-weight: 700;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* The score row sits on a hairline, as in the reference, and is pushed to the
   card's foot so all three cards align however long their titles run. */
.tsp-sv-c__score {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 9px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.tsp-sv-cscore {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
}

.tsp-sv-cscore__star {
	color: var(--tsp-sv-gold, #D9B15C);
	font-size: 15px;
	line-height: 1;
}

.tsp-sv-cscore__v {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	line-height: 1;
}

.tsp-sv-cscore__v s {
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	color: #9aa0ac;
}

/* Footer CTA: gold outline, centred. */
.tsp-sv__foot {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.tsp-sv__viewall {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 44px;
	padding: 11px 26px;
	border: 1px solid rgba(217, 177, 92, .55);
	border-radius: 5px;
	color: var(--tsp-sv-gold, #D9B15C);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.tsp-sv__viewall:hover,
.tsp-sv__viewall:focus-visible {
	background: rgba(217, 177, 92, .1);
	border-color: var(--tsp-sv-gold, #D9B15C);
	color: #fff;
}

/* Restrained hover on the poster, desktop pointers only. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.tsp-sv-c__poster img,
	.tsp-sv-f__poster img {
		transition: transform .35s ease;
	}

	.tsp-sv-c:hover .tsp-sv-c__poster img,
	.tsp-sv-f:hover .tsp-sv-f__poster img {
		transform: scale(1.04);
	}
}

/* Mobile: the supporting card keeps its square thumb but goes full width. */
@container (max-width: 600px) {
	.tsp-sv__stack {
		grid-template-columns: 1fr;
	}

	.tsp-sv__morehd {
		margin-top: 20px;
	}
}

/* v1.10.142 — header row: the standfirst was competing with "ALL REVIEWS →".

   Both sat on the same flex line, so on a wide container the italic standfirst
   ran right up to the link and the two read as one crowded strip. The title row
   and the link now hold the top line; the standfirst drops beneath the title,
   which is where the reference puts its breathing room. */
.tsp-sv__hd {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	column-gap: 24px;
	row-gap: 6px;
}

.tsp-sv__hd .tsp-sv__trow {
	grid-column: 1;
}

.tsp-sv__hd .tsp-sv__all {
	grid-column: 2;
	grid-row: 1;
	align-self: baseline;
}

.tsp-sv__hd .tsp-sv__sub {
	grid-column: 1 / -1;
	grid-row: 2;
	max-width: 62ch;
}

@container (max-width: 700px) {
	.tsp-sv__hd {
		grid-template-columns: 1fr;
	}

	.tsp-sv__hd .tsp-sv__all {
		grid-column: 1;
		grid-row: 3;
		justify-self: start;
	}
}

/* ==========================================================================
   v1.10.143 — review titles use the platform's headline hover, and the
   platform's focus treatment.

   WHAT THE TITLES WERE DOING. Measured on the live homepage, both the hero and
   the supporting titles hovered to rgb(240,154,166) — a pale pink — inherited
   from an unscoped Customizer rule written for `.tsp-news-card--overlay`. It
   belongs to neither this component nor the design system.

   WHICH TOKEN IS CANONICAL, AND WHY THE LIGHT-MODE VALUE IS NOT TRANSPLANTABLE.
   The platform's standard article headline hover is
   `.tsp-story-title a:hover { color: var(--tsp-sidebar-accent-color, …) }`,
   which resolves to the brand red #C8102E (`--ts-red`) on Deep Read, Most
   Viewed and the sidebar lists. Those all sit on WHITE.

   This band is near-black. #C8102E on the card's rgb(26,29,38) measures
   **2.73:1** — it would fail AA for text, so copying the light-surface value
   here would trade one inconsistency for a contrast regression.

   The platform already answers this. Its own headline-on-dark surfaces —
   `.tsp-hero--single .tsp-hero__title a:focus-visible` on the mobile overlay
   hero, and `.tsp-rv__toc a:hover` on the dark review page — keep the text
   white and add an underline instead of going red. That is the design system's
   dark-surface headline treatment, and it is what this section now follows.

   Specificity is (0,4,0) so it beats the Customizer rule, which is inline in
   <head> and therefore wins ties on source order. No `!important`.
   ========================================================================== */
.tsp-sv .tsp-sv-f__title,
.tsp-sv .tsp-sv-c__title {
	/* v1.10.212: 150ms -> 200ms, so the colour change below is perceptible as a
	   transition rather than a switch. Shared by both titles to keep one timing. */
	transition: color .2s ease;
}

/* (0,5,0). The Customizer targets this component by name at (0,4,0) —
   `.tsp-eb .tsp-sv-f:hover .tsp-sv-f__title` — and wp-custom-css prints after
   enqueued styles, so it wins an equal-specificity tie. `.tsp-eb.tsp-sv` are
   both already on the section element, so this adds no markup and no
   `!important`; it just stops losing the tie. */
/* v1.10.213 — both Reviews headlines now follow the site's interaction language.
   ==========================================================================
   AUDITED, not assumed. Hovering real headlines on the rendered page:

     Across the Telugu States, lead        #16181F -> #C8102E
     Across the Telugu States, supporting  #16181F -> #C8102E
     Movies, lead (white on a dark photo)  #FFFFFF -> #C8102E
     Movies, supporting                    #16181F -> #C8102E
     Reviews, main headline                #FFFFFF -> #FFFFFF   (no change)
     Reviews, More Reviews                 #FFFFFF -> #D9B15C   (site-unique gold)

   So the platform's article-title hover is brand red, and it applies on dark
   surfaces too — the Movies lead proves it. Reviews was the only section not
   speaking it: the main headline changed nothing but the underline, and the
   supporting cards had been given a gold found nowhere else on the site.

   Red itself cannot be used on this panel — measured 2.72:1, failing AA.

   v1.10.214: the hover colour is now the component's OWN gold, `--tsp-sv-gold`,
   the token already carrying the title accent, the verdict pills, the score ring,
   the meters and the star. Measured 7.69:1 on this panel, so it clears AA and
   AAA for both the 23px headline and the 16px card titles. The rose tint that
   briefly stood in for red is gone, token and all, rather than left competing
   with this rule.

   The underline is dropped. The audited standard is colour-only, and this
   headline runs to three lines: underlining all of it is the treatment the brief
   rules out. Hover is still not the only cue — the card itself takes a border and
   background change, and focus keeps its 2px outline below. */
.tsp-eb.tsp-sv .tsp-sv-f:hover .tsp-sv-f__title,
.tsp-eb.tsp-sv .tsp-sv-f:focus-visible .tsp-sv-f__title,
.tsp-eb.tsp-sv .tsp-sv-f:focus-within .tsp-sv-f__title,
.tsp-eb.tsp-sv .tsp-sv-c:hover .tsp-sv-c__title,
.tsp-eb.tsp-sv .tsp-sv-c:focus-visible .tsp-sv-c__title,
.tsp-eb.tsp-sv .tsp-sv-c:focus-within .tsp-sv-c__title {
	color: var(--tsp-sv-gold, #D9B15C);
}


/* Focus: the platform's card pattern — a 2px solid outline inset by 2px, as
   `.tsp-news-card--overlay > a:focus-visible` uses.

   The colour is this band's own gold rather than that rule's red, for the same
   reason as above: a focus indicator must clear 3:1 against what surrounds it
   (WCAG 1.4.11), and red measures 2.73:1 on this background while the gold
   already used by the ring, meters and verdict pill measures 8:1. Same pattern,
   a colour that works on this surface, and no new token.

   It is added rather than replacing the existing border/background shift: a
   colour-only cue is easy to miss, an outline is not. */
.tsp-sv .tsp-sv-f:focus-visible,
.tsp-sv .tsp-sv-c:focus-visible {
	outline: 2px solid var(--tsp-sv-gold, #D9B15C);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.tsp-sv .tsp-sv-f__title,
	.tsp-sv .tsp-sv-c__title {
		transition: none;
	}

	/* v1.10.644 — the supporting card was the one piece of MOTION in this
	 * component that a reduced-motion reader still got. The arc, the stamp and
	 * the poster scale are all gated behind `no-preference` further up; the
	 * card's own `transform: translateY(-2px)` on hover/focus-visible was
	 * declared unconditionally and so survived the preference. Measured under
	 * an emulated `reduce`: 16 elements still transitioned, and this was the
	 * only tsp-owned one that moved rather than changed colour.
	 *
	 * The colour and border feedback is deliberately kept — the affordance
	 * stays, only the displacement goes. */
	.tsp-sv .tsp-sv-c {
		transition: border-color .18s ease, background .18s ease;
	}

	.tsp-sv .tsp-sv-c:hover,
	.tsp-sv .tsp-sv-c:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   v1.10.207 — REVIEWS / THE SCOPE VERDICT: reference alignment pass
   References: Images/reviews_desktop.png, Images/reviews_mobile.png

   Appended last, and every selector carries `.tsp-sv`, so this block corrects
   this component only and cannot reach the frozen sections. No `!important`:
   each rule below either raises specificity over a same-file earlier rule by
   one class, or sets a property nothing else claims.
   ========================================================================== */

/* ------------------------------------------------------------ header ----- */

/* The masthead was CENTRED. Measured on the rendered page: `.tsp-sv__hd` had
   `text-align: center` and `.tsp-sv__trow` `justify-content: center`, both from
   earlier rules in this file that the later grid rule never undid — so the title
   sat mid-band while the standfirst sat left and the archive link dropped to a
   line of its own. The reference puts the title and the archive link on ONE line,
   both hard against the measure, with the standfirst beneath the title. */
.tsp-sv .tsp-sv__hd {
	text-align: left;
	align-items: center;
	column-gap: 32px;
}

.tsp-sv .tsp-sv__hd .tsp-sv__trow {
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 12px;
}

/* The archive link is the only CTA in the band now, so it holds the top-right
   corner outright. `position: static` is stated because the collapsed `auto`
   track measured 0px, which is what an out-of-flow item leaves behind. */
.tsp-sv .tsp-sv__hd .tsp-sv__all {
	position: static;
	align-self: center;
	justify-self: end;
	white-space: nowrap;
}

.tsp-sv .tsp-sv__hd .tsp-sv__sub {
	text-align: left;
	margin-top: 2px;
}

/* ------------------------------------------- feature -> more reviews ----- */

/* The transition measured 52px from the feature card to "MORE REVIEWS", then a
   further 40px to the cards — 92px of runway inside one section, which is what
   made the band feel loose. The reference reads as a continuation, not a second
   section. 28px and 16px keep a deliberate editorial step without the two
   components touching.

   Measured after the first attempt: setting the margins alone moved the gap by
   exactly the 2px I had changed them by, because `.tsp-sv__grid` contributes its
   own 22px `row-gap` on top of them. The gap is therefore made deterministic —
   the grid stops spacing these rows and the heading's margins own the transition
   outright, so the numbers below are the numbers on screen. */
.tsp-sv .tsp-sv__grid {
	row-gap: 0;
}

.tsp-sv .tsp-sv__morehd {
	margin-top: 28px;
	margin-bottom: 16px;
}

.tsp-sv .tsp-sv__stack {
	margin-top: 0;
}

/* ------------------------------------------------- supporting cards ----- */

/* The three cards were equal height but their INSIDES were not aligned: titles
   ran 4/3/3 lines, so the score row sat at a different height in the first card
   than in the other two, and the release line under it followed. The reference
   aligns both rows across the row.

   A three-row grid does it without a fixed height — title takes the space it
   needs, and the score and release rows are pinned to the bottom of whichever
   card is tallest. Combined with the 3-line clamp the titles can no longer be
   the thing that knocks them out of line. */
.tsp-sv .tsp-sv-c__mid {
	display: grid;
	/* The third track is RESERVED rather than sized to content. Only some reviews
	   carry a language/release line — `release_line()` returns nothing for the
	   rest, so those cards have two children instead of three, and the score row
	   landed 23px higher in the card that had one than in the two that did not.
	   A minmax floor lets every card allocate the row whether or not it is filled,
	   so the score rows align across the row and the cards keep one rhythm.
	   Nothing is invented: an absent release line still renders nothing. */
	grid-template-rows: 1fr auto minmax(18px, auto);
	row-gap: 8px;
	min-width: 0;
}

.tsp-sv .tsp-sv-c__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	align-self: start;
}

/* --------------------------------------------------- closing signature --- */

/* Replaces the second "View all reviews" button. A quiet centred line between
   two gold rules, exactly as the reference draws it — not a control, so it takes
   no button chrome, no border box and no tall row. The rules are drawn with a
   flex pseudo-element pair so they fill whatever space the text leaves. */
.tsp-sv .tsp-sv__foot {
	display: block;
	margin-top: 26px;
	padding: 0;
	border: 0;
	background: none;
	text-align: center;
}

.tsp-sv .tsp-sv__trust {
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 720px;
	margin-inline: auto;
	color: var(--tsp-sv-muted, #9aa0ad);
	font-family: var(--ts-display, Georgia, serif);
	font-size: 14px;
	font-style: italic;
	line-height: 1.4;
	white-space: nowrap;
}

.tsp-sv .tsp-sv__trust::before,
.tsp-sv .tsp-sv__trust::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(217, 177, 92, 0), rgba(217, 177, 92, .45));
}

.tsp-sv .tsp-sv__trust::after {
	background: linear-gradient(90deg, rgba(217, 177, 92, .45), rgba(217, 177, 92, 0));
}

/* Narrow containers: the rules would squeeze the line to nothing, so they go and
   the signature simply centres on its own. */
@container (max-width: 480px) {
	.tsp-sv .tsp-sv__trust {
		gap: 12px;
		font-size: 13px;
		white-space: normal;
		text-align: center;
	}
}

/* ==========================================================================
   v1.10.210 — REVIEWS / THE SCOPE VERDICT: phone composition
   Reference: Images/reviews_mobile.png

   Scoped to `@container (max-width: 600px)` so it covers the phone tier
   (480/390/360/320 -> containers ~440/350/320/280) and cannot reach the tablet
   band at 675/768 (containers 635/728) or the approved desktop at v1.10.209.

   NAVIGATION IS DELIBERATELY ABSENT. The reference draws prev/next arrows and
   carousel dots; the Scope Verdict block has no paging architecture — no nav
   attributes, no Section_Navigation wiring — and inventing one would mean a
   second carousel system. Omitted by agreement, not by oversight.

   No markup was added for any of this. `.tsp-sv-f__body` and `.tsp-sv-f__score`
   are already `display: contents` at this width, so their children are direct
   items of the feature card and can simply be placed.
   ========================================================================== */

@container (max-width: 600px) {

	/* ------------------------------------------------------------ header --- */

	/* Measured before: 209px, because the archive link was pushed to a third
	   grid row under a centred title and a wrapped standfirst. The reference
	   keeps the title and the archive action on the first row. */
	.tsp-sv .tsp-sv__hd {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: start;
		column-gap: 16px;
		row-gap: 4px;
	}

	.tsp-sv .tsp-sv__hd .tsp-sv__trow {
		grid-column: 1;
		grid-row: 1;
	}

	.tsp-sv .tsp-sv__hd .tsp-sv__all {
		grid-column: 2;
		grid-row: 1;
		justify-self: end;
		align-self: start;
		/* A comfortable tap target without a button box around it. */
		padding-block: 6px;
	}

	/* The reference has no standfirst on a phone — the title and the archive
	   action carry the row on their own. Hidden, never removed: the attribute,
	   the markup and the desktop rendering are all untouched. */
	.tsp-sv .tsp-sv__hd .tsp-sv__sub {
		display: none;
	}

	/* ----------------------------------------------------------- feature --- */

	/* A grid rather than the inherited flex column, purely so the score module
	   below can put the ring, the verdict and the meters on one row. Everything
	   above it spans the full width, so the reading order is unchanged. */
	.tsp-sv .tsp-sv-f {
		display: grid;
		grid-template-columns: auto auto minmax(0, 1fr);
		align-items: center;
		row-gap: 10px;
		column-gap: 12px;
	}

	.tsp-sv .tsp-sv-f__poster,
	.tsp-sv .tsp-sv-f__eyebrow,
	.tsp-sv .tsp-sv-f__title,
	.tsp-sv .tsp-sv-rel,
	.tsp-sv .tsp-sv-f__bar {
		grid-column: 1 / -1;
	}

	/* The reference's order: image first, then the label, headline and release
	   line. `order` moves the boxes only — the DOM order, and therefore the
	   reading order for assistive technology, is untouched. */
	.tsp-sv .tsp-sv-f__poster { order: 1; }
	.tsp-sv .tsp-sv-f__eyebrow { order: 2; }
	.tsp-sv .tsp-sv-f__title { order: 3; }
	.tsp-sv .tsp-sv-rel { order: 4; }
	.tsp-sv .tsp-sv-ring { order: 5; }
	.tsp-sv .tsp-sv-verdict { order: 6; }
	.tsp-sv .tsp-sv-meters { order: 7; }
	.tsp-sv .tsp-sv-f__bar { order: 8; }

	/* Cinematic, and the same image the desktop card uses — same source, same
	   shared fallback chain, same object-fit. Only the frame changes. */
	.tsp-sv .tsp-sv-f__poster {
		width: 100%;
		aspect-ratio: 16 / 10;
		border-radius: 10px;
		overflow: hidden;
	}

	.tsp-sv .tsp-sv-f__poster img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.tsp-sv .tsp-sv-f__title {
		font-size: 21px;
		line-height: 1.24;
	}

	/* The editorial analysis is a desktop reading, not a phone one: four pros and
	   two cons is a screenful before the score is even reached. Hidden at this
	   width only — the data, the meta box, the desktop card and the review page
	   are all untouched.

	   The pull quote goes with it for the same reason and on the same terms. The
	   reference carries neither, and the agreed mobile order runs image, label,
	   headline, release, score. One line each to bring back. */
	.tsp-sv .tsp-sv-wd,
	.tsp-sv .tsp-sv-quote {
		display: none;
	}

	/* ------------------------------------------------- compact score module --- */

	/* Ring and verdict on the left, meters filling the rest — the reference's
	   horizontal module, at a fraction of the desktop panel's height. */
	.tsp-sv .tsp-sv-ring {
		grid-column: 1;
		justify-self: start;
	}

	.tsp-sv .tsp-sv-verdict {
		grid-column: 2;
		justify-self: start;
	}

	.tsp-sv .tsp-sv-meters {
		grid-column: 3;
		grid-row: span 2;
		display: grid;
		row-gap: 4px;
		min-width: 0;
	}

	/* The ring keeps its own scale rather than being shrunk to fit: it is the
	   section's signature device and the reference keeps it legible. */
	.tsp-sv .tsp-sv-ring {
		width: 84px;
		height: 84px;
	}

	/* Meters stay readable — label, bar, value on one row, no tiny type. */
	/* The label column was `minmax(0, auto)`, which let it shrink below the word
	   it holds — DIRECTION broke to "DIREC / TION" and ACTING to "ACTIN / G".
	   A floor wide enough for the longest label, and no wrapping. */
	.tsp-sv .tsp-sv-meter {
		display: grid;
		grid-template-columns: minmax(62px, auto) minmax(20px, 1fr) auto;
		align-items: center;
		column-gap: 8px;
	}

	.tsp-sv .tsp-sv-meter__label {
		font-size: 10px;
		letter-spacing: .06em;
		white-space: nowrap;
	}

	.tsp-sv .tsp-sv-meter__value {
		font-size: 12px;
	}

	/* Critic and the Full Review action stay: the whole card is one anchor, but a
	   visible action is what tells a reader the review exists. Compact, and full
	   width so it is an easy target rather than an oversized button. */
	.tsp-sv .tsp-sv-f__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		flex-wrap: wrap;
	}

	/* ---------------------------------------------------- more reviews ----- */

	/* The three desktop cards become list rows: thumbnail left, headline and
	   score right, separated by a hairline rather than card chrome. */
	/* The 782px tier turns this into a horizontal snap-rail — `grid-auto-flow:
	   column` with 76% columns and negative side margins. Setting
	   `grid-template-columns` alone did nothing against it: auto-flow still laid
	   the cards out in columns, so the three rows sat on top of one another with
	   their text colliding. The rail is unwound properly here — flow, auto
	   columns, overflow, snapping and the bleed margins all returned to a plain
	   vertical list, which is what the reference shows on a phone. */
	.tsp-sv .tsp-sv__stack {
		display: grid;
		grid-auto-flow: row;
		grid-auto-columns: auto;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		overflow-x: visible;
		scroll-snap-type: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	.tsp-sv .tsp-sv-c {
		grid-template-columns: 96px minmax(0, 1fr);
		gap: 12px;
		padding: 12px 0;
		border: 0;
		border-radius: 0;
		background: none;
		border-top: 1px solid rgba(255, 255, 255, .08);
	}

	.tsp-sv .tsp-sv__stack .tsp-sv-c:first-child {
		border-top: 0;
		padding-top: 4px;
	}

	.tsp-sv .tsp-sv-c__poster {
		width: 96px;
		aspect-ratio: 1 / 1;
		border-radius: 7px;
		overflow: hidden;
	}

	.tsp-sv .tsp-sv-c__poster img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* Two rows on a phone: headline, then score and verdict. The reserved third
	   track from the desktop rule is released here — the reference's rows carry
	   no release line, and holding space for one would pad every row. */
	.tsp-sv .tsp-sv-c__mid {
		grid-template-rows: auto auto;
		row-gap: 6px;
		align-content: center;
	}

	.tsp-sv .tsp-sv-c__title {
		-webkit-line-clamp: 2;
		font-size: 14.5px;
		line-height: 1.3;
	}

	.tsp-sv .tsp-sv-c .tsp-sv-rel {
		display: none;
	}

	/* ------------------------------------------------------------- rhythm --- */

	.tsp-sv .tsp-sv__morehd {
		margin-top: 22px;
		margin-bottom: 8px;
	}

	.tsp-sv .tsp-sv__foot {
		margin-top: 20px;
	}
}

/* ==========================================================================
   v1.10.507 — TASK 2: THE VERDICT BAND JOINS THE HOMEPAGE GRID.

   Reported: the Reviews section's editorial content starts noticeably further
   in than Movies, Watch, Telugu News or Across the Telugu States, so the band
   reads as a narrower site embedded in the page.

   ROOT CAUSE, and it is not the bleed. The full-bleed background is correct
   and stays. `.tsp-sv__in` re-implements the site measure by hand with a
   literal `max-width: 1280px` (v1.10.125, written when the shell was a fixed
   1200) plus 44px of side padding. Every other section takes the shared
   wrapper in typography.css, whose measure is the TIERED `--tsp-shell`:
   1200 below 1536, then 1320, 1420, 1500... The v1.10.318 move to that token
   updated every wrapper except this one, because `--bleed` deliberately opts
   the outer wrapper out of the shared rule and the inner container had its own
   numbers.

   The mismatch is therefore compound and grows with the viewport — measured
   content width against the other sections:

     1600px viewport   1192 vs 1280    44px narrower each side
     1920px viewport   1192 vs 1460   134px narrower each side

   Below 1536 the two happen to agree within ~17px, which is why this only
   became visible on a large screen.

   THE FIX IS TO STOP RE-IMPLEMENTING THE MEASURE. Same token, same gutter, so
   the content edge is derived from the same source as every other section and
   cannot drift from it again. `padding-inline` is deliberately separate from
   the block padding above, which keeps the band's own vertical rhythm. */
.tsp-sv__in {
	max-width: var(--tsp-wrap, 1200px);
	padding-inline: var(--tsp-gutter, 20px);
}

/* ==========================================================================
   v1.10.507 — TASK 4: THE MINUS GETS ITS SPACE BACK.

   "−Occasional over-reliance" rendered with the glyph welded to the sentence,
   while "+ Strong performances" read correctly. The two rules looked
   symmetrical:

     content: "+ "        ->  plus, then a space
     content: "\2013 "    ->  en dash, then NOTHING

   A CSS hex escape is terminated by a single whitespace character, and that
   character is CONSUMED as part of the escape. So `\2013 ` is exactly one
   en dash and the space never existed. `+` is not an escape, so its space
   survived — which is why only the negative column was affected.

   Fixed structurally rather than by finding a space the parser will not eat:
   the marker leaves the text flow entirely and the item carries a hanging
   indent. That fixes the gap, and also the wrapped second line, which
   previously ran back under the marker instead of aligning with the sentence
   above it. Editorial content is untouched — no glyph has ever been in the
   PHP, and none is added now. */
.tsp-sv-wd__list li {
	position: relative;
	padding-left: 14px;
}
.tsp-sv-wd__list li::before {
	position: absolute;
	left: 0;
	top: 2.5px;          /* matches the li's own padding-block, so the marker
	                        sits on the first line's baseline box */
	line-height: 1.4;    /* the li's line-height, so glyph and text agree */
}
.tsp-sv-wd__list--yes li::before { content: "+"; }
.tsp-sv-wd__list--no  li::before { content: "\2013"; }

/* ==========================================================================
   v1.10.510 — THE LEAD REVIEW'S POSTER CARRIES MORE WEIGHT.

   Owner review: the latest review's image is undersized for the most important
   thing in the section. Measured before this change at 1920: 208x284, which is
   13.9% of the band.

   Widening the band in v1.10.507 made it worse rather than better. The poster
   was 17.5% of a 1192px measure; putting the section on the real homepage grid
   took the measure to 1500 and the same poster to 13.9%. The two changes pull
   in opposite directions, so this is the second half of that work.

   WHY PORTRAIT, AND NOT A LANDSCAPE OR CINEMATIC CROP. The portrait poster is
   the one structural signal that separates Reviews from Movies and Watch, both
   of which are landscape-led. Going wide would buy image impact by spending
   the section's identity, which is the opposite of the brief. So the poster
   gets bigger as a poster.

   BOTH DIMENSIONS MOVE TOGETHER. Widening the column alone would have taken
   the ratio from 0.73 to 0.85 and made the poster read as a square crop — more
   pixels, less poster. 240x320 is 3:4, the same family as the 0.73 it
   replaces, and about 30% more area. The card grows 284 -> 320; the body is a
   flex column and absorbs the 36px without a reflow of its own.

   Scoped to the wide tier only. Tablet and phone keep their existing
   composition, which is already poster-led at those widths. */
@container (min-width: 1009px) {
	.tsp-sv-f {
		grid-template-columns: 240px 1fr 200px;
	}
	.tsp-sv-f__poster {
		min-height: 320px;
	}
}

/* v1.10.511 — the stacked poster's CROP stops drifting with the container.

   Found during the intermediate-width sweep, which is the only way it shows:
   the stacked tier pins `height: 215px` while the poster's width fills the
   container, and that tier spans container widths from ~300 to 782. So the
   crop is not a crop, it is a function of the viewport —

     390 viewport   305x215   1.42:1   correct
     768 viewport   683x215   3.18:1   a letterbox strip

   At the top of the tier it discards roughly three quarters of the frame, and
   nothing about that is a decision anyone made; it is a fixed height meeting a
   fluid width. Neither anchor width in the standard sweep sits there, which is
   why it survived until a continuous pass.

   A ratio holds the crop steady instead — and the tier already HAS one. The
   poster carries `aspect-ratio: 16/10` further up this file; the fixed height
   was simply overriding it. Releasing the height to `auto` hands the crop back
   to that existing declaration rather than introducing a competing one, which
   is why nothing is declared here but the release and a ceiling.

   (Verified on staging rather than assumed: an `aspect-ratio: 7/5` written
   here computed as `16 / 10`, because the existing rule outranks anything
   added at this specificity. The number that governs is the one already in the
   file, so this block does not pretend to set it.)

   Measured after the change:
     390 viewport   305x191   1.60:1
     768 viewport   683x300   2.28:1   (the cap, down from 3.18:1)

   The 300px ceiling is what stops 16/10 becoming a 488px-tall banner at the
   top of the tier. The phone poster loses 24px of height and gains a crop that
   no longer changes with the viewport. */
@container (max-width: 782px) {
	.tsp-sv-f__poster {
		height: auto;
		max-height: 300px;
	}
}

/* ---------------------------------------------------------------------------
   THE FRAME FOLLOWS THE SOURCE.

   The poster frame is portrait because it was designed around a film poster,
   which is 2:3 and sits in a 3:4 frame with about a tenth trimmed. Most review
   pictures are not posters: editorial photographs and generated illustrations
   are 16:9, and a 16:9 picture in a 3:4 frame keeps 42% of itself.

   Measured on staging: a 1536x864 image in the 240x320 frame showed 42% of the
   source and cropped a second person — a child, in a review of a family film —
   out of the picture entirely.

   WIDENING THE FRAME AT THE SAME RATIO CHANGES NOTHING. 300x400 is still 0.75
   and still shows 42%: the same crop, larger. What governs how much survives is
   the frame's ratio against the source's.

   So a landscape source gets a SQUARE frame at the card's existing height:

     240x320  0.75   42% of a 16:9 source     the child is cut off
     320x320  1.00   56%                      both faces, height unchanged
     360x320  1.13   63%                      but the headline takes a third
                                               line and the card grows 75px

   320 is where the picture stops improving faster than the card degrades. It is
   also the width the brief asked for, arrived at from the composition rather
   than applied to it.

   A PORTRAIT SOURCE IS UNTOUCHED. That frame is the Reviews section's identity
   — the one structural signal separating it from Movies and Watch, both
   landscape-led — and a poster already fits it. Only the pictures that do not
   fit are given a frame that suits them.

   Scoped to the wide tier. The stacked tiers below are already full-width and
   carry their own ratio. */
@container (min-width: 1009px) {
	.tsp-sv-f--landscape {
		grid-template-columns: 320px 1fr 200px;
	}
	.tsp-sv-f--landscape .tsp-sv-f__poster {
		min-height: 320px;
	}

	/* Nearly square, and treated as itself rather than tipped into a frame that
	   would crop it. Between the two, closer to the poster it is not. */
	.tsp-sv-f--square {
		grid-template-columns: 288px 1fr 200px;
	}
	.tsp-sv-f--square .tsp-sv-f__poster {
		min-height: 320px;
	}
}

/* WHERE THE CROP FALLS, for the pictures that still have one.

   A centred crop takes equally from both edges, which is right for a poster and
   wrong for a photograph of people: faces sit above the middle, so the half a
   centred crop discards from the top is the half worth keeping. Biasing upward
   costs floor and keeps heads.

   Only for landscape and square sources — a poster is composed to be centred and
   moving it would push the title off the bottom. */
.tsp-sv-f--landscape .tsp-sv-f__poster img,
.tsp-sv-f--square .tsp-sv-f__poster img {
	object-position: center 42%;
}