/*
 * Shorts Candy AI — component layer.
 * theme.json owns tokens, typography and block defaults; this file owns the
 * pieces blocks cannot express: the age gate, cards, badges and chrome.
 */

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

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

body {
	background-image: var(--wp--preset--gradient--glow);
	background-repeat: no-repeat;
	background-size: 100% 640px;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: #12090d;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------- pieces --- */

.sc-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.75rem;
}

.sc-rule {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent) 0%, var(--wp--preset--color--stroke) 22%, transparent 100%);
	margin: 0;
}

.sc-muted {
	color: var(--wp--preset--color--muted);
}

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

.sc-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.3em 0.7em;
	border-radius: var(--wp--custom--radius--pill);
	line-height: 1.2;
	white-space: nowrap;
}

.sc-badge--new   { background: var(--wp--preset--color--badge); color: #fff; }
.sc-badge--spicy { background: var(--wp--preset--color--spicy); color: #2a1400; }
.sc-badge--free  { background: var(--wp--preset--color--check); color: #0a2418; }
.sc-badge--gold  { background: var(--wp--preset--color--gold); color: #2a1d00; }

.sc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--wp--preset--font-size--sm);
	padding: 0.4em 0.9em;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--muted);
	background: var(--sc-tint);
	transition: var(--wp--custom--transition);
	text-decoration: none;
}

.sc-pill:hover,
.sc-pill[aria-current="true"] {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	background: rgba(249, 113, 135, 0.1);
	text-decoration: none;
}

/* -------------------------------------------------------------- buttons --- */

.sc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1;
	padding: 0.95rem 1.65rem;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	text-decoration: none;
	transition: var(--wp--custom--transition);
}

.sc-btn--primary {
	background: var(--wp--preset--gradient--cta);
	color: #fff;
	box-shadow: var(--wp--custom--shadow--accent);
}

.sc-btn--primary:hover {
	filter: brightness(1.07);
	transform: translateY(-1px);
	color: #fff;
	text-decoration: none;
}

.sc-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--stroke);
}

.sc-btn--ghost:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--muted);
	text-decoration: none;
}

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

/* The card is only a stage: the chrome lives on the two faces so the flip
   does not clip against an overflow boundary. */
.sc-card {
	position: relative;
	perspective: 1400px;
}

.sc-card__inner {
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sc-card.is-flipped .sc-card__inner {
	transform: rotateY(180deg);
}

.sc-card__front,
.sc-card__back {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* Safari on iOS does not apply the parent's backface-visibility to positioned
   descendants, so the rating badge stayed on screen, mirrored, once the card
   turned. Each of these needs the property in its own right. */
.sc-card__media,
.sc-card__flags,
.sc-card__rating,
.sc-card__feat,
.sc-card__placeholder,
.sc-card__front .sc-card__title,
.sc-loop,
.sc-loop__frame {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

/* And the face that is turned away is taken out of the page entirely once the
   flip is past halfway. Belt and braces against the backface quirks, and it
   fixes a real problem underneath: the button on the back used to be reachable
   by keyboard while it was invisible. */
.sc-card__front,
.sc-card__back {
	transition: visibility 0s linear 0.28s;
}

.sc-card__front { visibility: visible; }
.sc-card__back { visibility: hidden; }

.sc-card.is-flipped .sc-card__front { visibility: hidden; }
.sc-card.is-flipped .sc-card__back { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
	.sc-card__front,
	.sc-card__back { transition: none; }
}

.sc-card__back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.85rem 0.9rem 0.9rem;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sc-card-back);
	border: 1px solid var(--wp--preset--color--accent);
}

.sc-card__flip {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	border-radius: var(--wp--custom--radius--lg);
}

.sc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 240 / 342;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	background: var(--sc-poster-empty);
	border: 1px solid var(--wp--preset--color--stroke);
	transition: var(--wp--custom--transition);
}

.sc-card:hover .sc-card__media {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--wp--custom--shadow--card);
}

.sc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease-out;
}

.sc-card:hover .sc-card__media > img {
	transform: scale(1.04);
}

.sc-card__flags {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	display: flex;
	gap: 0.3rem;
	z-index: 3;
}

.sc-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--sc-ph-text);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	font-weight: 700;
}

.sc-card__title {
	margin: 0.6rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.sc-card__title--back {
	margin: 0;
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--accent);
}

/* Only the synopsis scrolls. Title, tags and button keep their place, so the
   call to action is visible the moment the card turns. */
.sc-card__summary {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	margin: 0;
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
}

.sc-card__title--back,
.sc-card__cast,
.sc-card__eps,
.sc-card__tags { flex: 0 0 auto; }

.sc-card__cast,
.sc-card__eps,
.sc-card__tags {
	margin: 0;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--muted);
}

.sc-card__cast span,
.sc-card__eps span {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
}

.sc-card__actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: 0.5rem;
}

.sc-card__actions .sc-btn {
	padding: 0.65rem 1rem;
	font-size: 0.75rem;
}

.sc-card[hidden] { display: none; }

.sc-catalogue__empty {
	color: var(--wp--preset--color--muted);
	padding: var(--wp--preset--spacing--40) 0;
	text-align: center;
}

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

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

.sc-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
}

.sc-grid--wide {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

/* ----------------------------------------------------------- data table --- */

.sc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
}

.sc-table th,
.sc-table td {
	padding: 0.85rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--wp--preset--color--stroke);
	vertical-align: top;
}

.sc-table tr:last-child th,
.sc-table tr:last-child td {
	border-bottom: 0;
}

.sc-table th {
	width: 38%;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	background: var(--sc-tint);
}

/* ------------------------------------------------------------ panel / faq -- */

.sc-panel {
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.sc-panel--accent {
	border-left: 3px solid var(--wp--preset--color--accent);
}

.sc-faq details {
	border-bottom: 1px solid var(--wp--preset--color--stroke);
	padding: 1.1rem 0;
}

.sc-faq details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--stroke);
}

.sc-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--md);
}

.sc-faq summary::-webkit-details-marker { display: none; }

.sc-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	transition: var(--wp--custom--transition);
}

.sc-faq details[open] summary::after {
	transform: rotate(45deg);
}

.sc-faq details p {
	margin: 0.8rem 0 0;
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
}

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

/* Sticky sits on the template-part wrapper: a sticky element only travels
   inside its own parent, and .sc-header's parent is exactly as tall as the
   header, so it scrolled away immediately. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 40;
}

.sc-header {
	background: var(--sc-header-bg);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--wp--preset--color--stroke);
}

.sc-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}

.sc-header .wp-block-navigation a {
	color: var(--wp--preset--color--muted);
	transition: var(--wp--custom--transition);
}

.sc-header .wp-block-navigation a:hover,
.sc-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* --------------------------------------------------------------- footer --- */

.sc-footer {
	border-top: 1px solid var(--wp--preset--color--stroke);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.sc-footer a {
	color: var(--wp--preset--color--muted);
}

.sc-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.sc-disclosure {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	max-width: 74ch;
}

/* ------------------------------------------------------------- age gate --- */

.sc-age-gate {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	background: var(--sc-gate-bg);
	backdrop-filter: blur(18px);
}

html.sc-age-locked .sc-age-gate { display: flex; }
html.sc-age-locked { overflow: hidden; }
html.sc-age-ok .sc-age-gate { display: none !important; }

.sc-age-gate__panel {
	width: min(100%, 460px);
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--stroke);
	border-top: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.5rem, 5vw, 2.25rem);
	text-align: center;
	box-shadow: 0 24px 60px var(--sc-shadow-deep);
}

.sc-age-gate__eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin: 0 0 0.75rem;
}

.sc-age-gate__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.25;
	margin: 0 0 0.75rem;
}

.sc-age-gate__text {
	margin: 0 0 1.5rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.sc-age-gate__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.sc-age-gate__fine {
	margin: 1.25rem 0 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--sc-muted-soft);
}

/* ---------------------------------------------------------- block tweaks -- */

.wp-block-post-content > *:first-child { margin-top: 0; }

.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--stroke);
	padding: 0.8rem 1rem;
}

.wp-block-image img {
	border-radius: var(--wp--custom--radius--md);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ------------------------------------------------ cards built by a query --
 * The query loop emits core blocks rather than the hand-written card markup,
 * so the same .sc-card shell has to dress those too.
 */

.sc-card .wp-block-post-featured-image {
	margin: 0;
	border-radius: 0;
	overflow: hidden;
}

.sc-card .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
	width: 100%;
	transition: transform 0.4s var(--wp--custom--transition);
}

.sc-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.sc-card .wp-block-post-title {
	margin: 0;
	padding: 0.8rem 0.9rem 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	line-height: 1.3;
}

.sc-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sc-card:hover .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
}

/* A series with no poster yet should still hold its shape in the grid. */
.sc-card .wp-block-post-featured-image:empty::before {
	content: "";
	display: block;
	aspect-ratio: 240 / 342;
	background: var(--sc-poster-empty);
}

/* ------------------------------------------------------------- wordmark --- */

.wp-block-site-title {
	letter-spacing: -0.03em;
}

.wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.wp-block-site-title a:hover {
	text-decoration: none;
	opacity: 0.88;
}

.sc-logo__accent {
	color: var(--wp--preset--color--accent);
}

/* ------------------------------------------------------- hover preview ---- */

.sc-loop {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.25s var(--wp--custom--transition);
	pointer-events: none;
}

.sc-card:hover .sc-loop,
.sc-card:focus-within .sc-loop {
	opacity: 1;
}

.sc-loop__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.18s linear;
	border-radius: 0;
}

.sc-loop__frame.is-on {
	opacity: 1;
}

.sc-card .wp-block-post-featured-image {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.sc-loop { display: none; }
}

/* ------------------------------------------------------- filter bar ------- */

/* This used to bleed out to the viewport edge, on the theory that a row running
   off the screen reads as scrollable. On a phone it read as broken instead: the
   pills sat outside the column every other block lines up with. It now scrolls
   inside the content width, like a normal row that happens to be longer. */
.sc-filters {
	position: relative;
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.sc-filters__track {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-block: 2px;
	padding-inline-end: 2.2rem;
}

.sc-filters__track::-webkit-scrollbar { display: none; }

.sc-filters .sc-pill {
	scroll-snap-align: start;
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
}

.sc-filters .sc-pill.is-current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #17090d;
	font-weight: 600;
}

.sc-filters .sc-pill.is-current:hover {
	background: var(--wp--preset--color--accent-dark);
	border-color: var(--wp--preset--color--accent-dark);
	color: #17090d;
}

.sc-pill__count {
	font-size: 0.6875rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.6;
}

.sc-pill.is-current .sc-pill__count { opacity: 0.75; }

/* The fade tells you there is more to the right without a scrollbar. */
/* transparent to page, not veil-from to page: --sc-veil-from is only defined in
   the light theme, so in dark mode the whole declaration was invalid and no fade
   drew at all. */
.sc-filters::after {
	content: "";
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 2.4rem;
	pointer-events: none;
	border-radius: 0 var(--wp--custom--radius--pill) var(--wp--custom--radius--pill) 0;
	background: linear-gradient(90deg, transparent 0%, var(--wp--preset--color--page) 78%);
}

@media (min-width: 900px) {
	.sc-filters__track { flex-wrap: wrap; overflow-x: visible; padding-inline-end: 0; }
	.sc-filters::after { display: none; }
}

/* ----------------------------------------------------------------- hero --- */

.sc-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--preset--color--stroke);
	background:
		radial-gradient(90% 120% at 82% 20%, rgba(249, 113, 135, 0.28) 0%, var(--sc-veil-from) 60%),
		var(--sc-hero-bg);
	padding: clamp(1.5rem, 4vw, 3.25rem);
	margin-block: 0 var(--wp--preset--spacing--50);
}

.sc-hero__grid {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.sc-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}

.sc-hero h1 {
	margin: 0;
	font-size: clamp(1.7rem, 8vw, 4.25rem);
	line-height: 1.04;
	text-wrap: balance;
	letter-spacing: -0.035em;
}

.sc-hero__lede {
	margin: 0.75rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.125rem, 2.4vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.sc-hero__body {
	margin: 1rem 0 0;
	max-width: 54ch;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
}

.sc-hero__body strong { color: var(--wp--preset--color--accent); font-weight: 600; }

.sc-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.sc-hero__fine {
	margin: 1.1rem 0 0;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--sc-muted-soft);
}

/* Three posters fanned out. Every dimension is a percentage of this column,
   so the fan cannot outgrow it: sizing in vw left it overflowing into the copy
   on the left and clipped by the panel on the right. The side padding is the
   room the rotation needs. */
.sc-hero__art {
	display: flex;
	width: 100%;
	box-sizing: border-box;
	padding-inline: 7%;
	justify-content: center;
	align-items: center;
}


.sc-hero__poster {
	position: relative;
	flex: 0 0 auto;
	width: 40%;
	max-width: 200px;
	aspect-ratio: 240 / 342;
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--stroke);
	background: var(--sc-poster-empty);
	box-shadow: 0 18px 40px var(--sc-shadow-deep);
	display: grid;
	place-items: center;
}

.sc-hero__poster img { width: 100%; height: 100%; object-fit: cover; }

.sc-hero__ph {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--sc-ph-text);
}

.sc-hero__poster--1 { transform: rotate(-7deg) translateY(9px); z-index: 1; margin-right: -15%; }
.sc-hero__poster--2 { transform: rotate(1deg); z-index: 3; border-color: var(--wp--preset--color--accent); }
.sc-hero__poster--3 { transform: rotate(8deg) translateY(9px); z-index: 2; margin-left: -15%; }

/* ------------------------------------------------------------- site shell -- */

.sc-shell {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.5rem, 3vw, 2.75rem);
	max-width: 104rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

@media (min-width: 1100px) {
	.sc-shell { grid-template-columns: 250px minmax(0, 1fr); }
}

.sc-shell__main { min-width: 0; }

/* Desktop: a column that stays put. Mobile: a drawer off the left edge. */
.sc-shell__nav {
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 90;
	width: min(84vw, 300px);
	padding: 1rem 1rem 2rem;
	overflow-y: auto;
	background: var(--wp--preset--color--page);
	border-right: 1px solid var(--wp--preset--color--stroke);
	transform: translateX(-102%);
	transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.sc-menu-open .sc-shell__nav { transform: none; }
html.sc-menu-open { overflow: hidden; }

.sc-scrim {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: var(--sc-scrim);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

html.sc-menu-open .sc-scrim { opacity: 1; pointer-events: auto; }

@media (min-width: 1100px) {
	.sc-shell__nav {
		position: sticky;
		inset: auto;
		top: calc(var(--wp--custom--header--height) + 1rem);
		width: auto;
		max-height: calc(100vh - var(--wp--custom--header--height) - 2rem);
		padding: 0 0.65rem 3rem 0;
		border-right: 0;
		transform: none;
		scrollbar-width: thin;
		scrollbar-color: var(--wp--preset--color--stroke) transparent;
		scrollbar-gutter: stable;
		overscroll-behavior: contain;
	}

	.sc-shell__nav::-webkit-scrollbar { width: 8px; }
	.sc-shell__nav::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--stroke);
		border-radius: 99px;
	}
}

/* Icon only. The word sat next to a symbol that already says the same thing,
   and it is still read out because the label moved into a visually hidden span
   rather than being deleted. Sized to match the theme toggle across the bar. */
.sc-menu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: var(--wp--custom--transition);
}

.sc-menu-btn:hover { border-color: var(--wp--preset--color--accent); }

.sc-menu-btn svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- navigation ---- */

.sc-nav { display: flex; flex-direction: column; gap: 1.5rem; }

.sc-nav__group { display: flex; flex-direction: column; gap: 0.4rem; }

.sc-nav__head {
	margin: 0 0 0.15rem 0.15rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sc-nav__item {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	transition: var(--wp--custom--transition);
}

.sc-nav__item:hover {
	border-color: var(--wp--preset--color--muted);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}

.sc-nav__item.is-current {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.sc-nav__icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.75; }
.sc-nav__item.is-current .sc-nav__icon { opacity: 1; }

.sc-nav__label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sc-nav__badge {
	flex: 0 0 auto;
	min-width: 1.6rem;
	text-align: center;
	padding: 0.12rem 0.45rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--badge);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sc-nav__item--rated .sc-nav__badge { background: var(--wp--preset--color--gold); color: #2a1d00; }
.sc-nav__item--rated .sc-nav__icon { color: var(--wp--preset--color--gold); opacity: 1; }

.sc-nav__cta {
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-2);
	padding: 1rem;
	text-align: center;
}

.sc-nav__cta p {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
}

.sc-nav__cta .sc-btn { width: 100%; padding: 0.75rem 1rem; font-size: 0.75rem; }

.sc-nav__fine {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.625rem;
	color: var(--wp--preset--color--muted);
}

.sc-nav__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.85rem;
	font-size: 0.6875rem;
}

.sc-nav__legal a { color: var(--wp--preset--color--muted); text-decoration: none; }
.sc-nav__legal a:hover { color: var(--wp--preset--color--accent); }

/* ------------------------------------------------------------ prose width -- */

/* Sections run the width of the column; paragraphs stop where reading does.
   Blocks sit directly in <main> on some templates and inside the post-content
   wrapper on others, so both paths are matched: a child selector on one alone
   silently matches nothing on the other. */
.sc-shell__main > p,
.sc-shell__main > ul,
.sc-shell__main > ol,
.sc-shell__main > .wp-block-post-content > p,
.sc-shell__main > .wp-block-post-content > ul,
.sc-shell__main > .wp-block-post-content > ol,
.sc-shell__main > .wp-block-post-content > .wp-block-group > p {
	max-width: 72ch;
}

/* ------------------------------------------------------- verdict strip ---- */

.sc-verdict {
	display: grid;
	gap: 1.25rem;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--stroke);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--lg);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 820px) {
	.sc-verdict { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 2rem; }
}

.sc-verdict__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.25rem;
}

.sc-verdict__stat { display: flex; flex-direction: column; gap: 0.2rem; }

.sc-verdict__num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
}

.sc-verdict__label {
	font-size: 0.6875rem;
	line-height: 1.35;
	color: var(--wp--preset--color--muted);
}

.sc-verdict__call p {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.sc-verdict__call strong { color: var(--wp--preset--color--accent); }

/* --------------------------------------------------------- score scale ---- */

.sc-table--scale th { width: 3.5rem; text-align: center; vertical-align: middle; }

.sc-score {
	display: inline-grid;
	place-items: center;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #17090d;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 0.8125rem;
}

.sc-table--scale tr:nth-child(1) .sc-score { background: #5c6270; color: #fff; }
.sc-table--scale tr:nth-child(2) .sc-score { background: #8a5f79; color: #fff; }
.sc-table--scale tr:nth-child(3) .sc-score { background: var(--wp--preset--color--accent); }
.sc-table--scale tr:nth-child(4) .sc-score { background: var(--wp--preset--color--badge); color: #fff; }
.sc-table--scale tr:nth-child(5) .sc-score { background: var(--wp--preset--color--spicy); color: #2a1400; }

/* ------------------------------------------------------- header, slimmed -- */

.sc-header__bar {
	max-width: 104rem;
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
}

/* On a narrow screen the header keeps the wordmark, the menu and the money
   button; the two text links are already in the drawer. */
@media (max-width: 719px) {
	.sc-header__right .wp-block-navigation { display: none; }
	.sc-header__cta { padding: 0.65rem 1rem; font-size: 0.6875rem; }
}

/* The CTA button fills its box; without border-box its padding pushed the
   whole column wide enough to scroll sideways. */
.sc-btn { box-sizing: border-box; }
.sc-nav, .sc-nav * { min-width: 0; }
.sc-shell__nav { overflow-x: hidden; }

/* ------------------------------------------------------- answers grid ----- */

.sc-lede {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
	max-width: 62ch;
}

.sc-answers {
	display: grid;
	gap: 0.9rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.sc-answers__card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.1rem 1.2rem 1.2rem;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-2);
	text-decoration: none;
	transition: var(--wp--custom--transition);
}

.sc-answers__card:hover {
	border-color: var(--wp--preset--color--accent);
	transform: translateY(-2px);
	text-decoration: none;
}

.sc-answers__card h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.sc-answers__card p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}

.sc-answers__go {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

.sc-answers__card:hover .sc-answers__go { color: var(--wp--preset--color--accent-dark); }

/* ------------------------------------------------- desktop overrides ------ */

/* Declared last on purpose: an equally specific rule inside the media query
   further up would lose to the base rule that follows it. */
@media (min-width: 1100px) {
	.sc-menu-btn,
	.sc-scrim { display: none !important; }
}

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

/* WordPress flow layout writes margin-block-start on every child; matching the
   same property beats it cleanly instead of fighting it with margin-top. */
/* Direct children only. As a descendant selector this outranked the card and
   panel title rules (class+element beats a single class) and was adding 2.5rem
   above every card heading in the catalog and the answers grid. */
.sc-shell__main > h2,
.sc-shell__main > .wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--50);
	margin-block-end: var(--wp--preset--spacing--20);
}

.sc-shell__main > h3,
.sc-shell__main > .wp-block-post-content > h3 {
	margin-block-start: var(--wp--preset--spacing--40);
	margin-block-end: 0.6rem;
}

.sc-shell__main p,
.sc-shell__main ul,
.sc-shell__main ol,
.sc-shell__main .sc-table,
.sc-shell__main .sc-faq,
.sc-shell__main .sc-answers {
	margin-block-start: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--20);
}

/* The heading inside the first section; the sections themselves are zeroed
   further down, after the rule that spaces them. */
.sc-shell__main > .wp-block-post-content > *:first-child > *:first-child { margin-block-start: 0; }

.sc-shell__main .sc-lede { margin-block-end: var(--wp--preset--spacing--30); }

/* Sections themselves need more air than the paragraphs inside them. */
.sc-shell__main > .wp-block-group,
.sc-shell__main > .sc-verdict,
.sc-shell__main > section,
.sc-shell__main > .wp-block-post-content > .wp-block-group,
.sc-shell__main > .wp-block-post-content > .sc-verdict,
.sc-shell__main > .wp-block-post-content > section {
	margin-block: var(--wp--preset--spacing--50);
}

/* ------------------------------------------------------- copyable value --- */

.sc-copy {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.85rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--wp--preset--color--stroke);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--surface-2);
}

.sc-copy__label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sc-copy__value {
	flex: 1;
	min-width: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	word-break: break-all;
	user-select: all;
}

.sc-copy__btn {
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--stroke);
	background: transparent;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.45rem 0.9rem;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: var(--wp--custom--transition);
}

.sc-copy__btn:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

.sc-copy__btn.is-done {
	border-color: var(--wp--preset--color--check);
	color: var(--wp--preset--color--check);
}

/* -------------------------------------------------- hero on small screens -- */

@media (max-width: 899px) {
	/* Everything above the button gets tighter, so the call to action lands
	   inside the first screen instead of a scroll down. */
	/* Narrow phones need the side padding back as title width. */
	.sc-hero { padding-inline: 1.15rem; }
	.sc-hero__lede { margin-top: 0.5rem; font-size: var(--wp--preset--font-size--md); }
	.sc-hero__body { margin-top: 0.75rem; font-size: var(--wp--preset--font-size--base); line-height: 1.55; }
	.sc-hero__cta { margin-top: 1.1rem; }
	.sc-hero__fine { margin-top: 0.8rem; }

	/* Stacked, with the fan first: on a phone it is the only thing on screen
	   that says what the site is about before any reading starts. The grid gap
	   handles the space under it, so only the bottom margin is topped up. */
	.sc-hero__art {
		order: -1;
		margin-top: 0;
		margin-bottom: var(--wp--preset--spacing--20);
		padding-inline: 2%;
	}

	.sc-hero__poster { width: 33%; }
	.sc-hero__poster--1 { margin-right: -8%; }
	.sc-hero__poster--3 { margin-left: -8%; }

	/* A little more glow behind them so the panel does not read as empty. */
	.sc-hero {
		background:
			radial-gradient(70% 55% at 50% 88%, rgba(249, 113, 135, 0.20) 0%, var(--sc-veil-from) 70%),
			radial-gradient(90% 60% at 80% 10%, rgba(249, 113, 135, 0.18) 0%, var(--sc-veil-from) 65%),
			var(--sc-hero-bg);
	}
}

/* The wordmark had to wrap while the CTA was beside it. */
.sc-header .wp-block-site-title { white-space: nowrap; }

/* First block under the header should start close to it. */
.sc-shell { padding-block-start: var(--wp--preset--spacing--20); }

/* ------------------------------------------------ first block, no gap ----- */

/* Declared after the section spacing above: both are three classes deep, so
   order is what decides, and the first block must sit level with the top of
   the sidebar rather than 4rem below it. */
.sc-shell__main > *:first-child,
.sc-shell__main > .wp-block-post-content > *:first-child {
	margin-block-start: 0;
}

/* ------------------------------------------------------- score on a card -- */

/* On the poster, top right: the number alone, legible against any artwork. */
.sc-card__rating {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 3;
	line-height: 0;
}

.sc-card__rating .sc-score {
	width: 2.15rem;
	height: 2.15rem;
	font-size: 0.8125rem;
	box-shadow: 0 2px 10px var(--sc-shadow-deep);
	border: 1px solid var(--sc-badge-ring);
}

/* Same ladder as the scale table, so a number means the same thing anywhere. */
.sc-score--1 { background: #5c6270; color: #fff; }
.sc-score--2 { background: #8a5f79; color: #fff; }
.sc-score--3 { background: var(--wp--preset--color--accent); color: #17090d; }
.sc-score--4 { background: var(--wp--preset--color--badge); color: #fff; }
.sc-score--5 { background: var(--wp--preset--color--spicy); color: #2a1400; }

/* ------------------------------------------------- posters on a phone ----- */

@media (max-width: 599px) {
	/* One column at full bleed made the poster wider than its sharpest crop
	   and left nothing between one card and the next. Pulling it in gives the
	   artwork a margin, keeps it inside a crop it can fill cleanly, and makes
	   the scroll read as a stack of cards rather than a wall of images. */
	.sc-grid {
		justify-items: center;
		gap: 1.6rem;
	}

	.sc-grid .sc-card {
		width: 100%;
		max-width: 300px;
	}
}

/* The back panel is focused by script when the card turns, so it must not draw
   a focus ring for that. Keyboard users still get one. */
.sc-card__back:focus { outline: none; }

/* This used to draw a 2px outline inset 5px, which sat inside the panel's own
   1px border and read as a double frame. On a phone it showed on every flip,
   because focusing the panel from script can satisfy :focus-visible. One ring
   now: the existing border deepens and picks up a halo outside it. */
.sc-card__back:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--accent-dark);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent) 32%, transparent);
}

/* --------------------------------------------------------- inline CTA ----- */

/* Deliberately not the full-width band used at the foot of a page: this sits
   inside the reading column and reads as part of the argument, not as a footer.
   The glow is what makes it findable when someone is scanning. */
.sc-inline-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.25rem 1.4rem;
	border: 1px solid var(--wp--preset--color--stroke);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--lg);
	background:
		radial-gradient(120% 180% at 100% 50%, rgba(249, 113, 135, 0.14) 0%, var(--sc-veil-from) 62%),
		var(--wp--preset--color--surface-2);
	max-width: 100%;
}

.sc-inline-cta__copy { flex: 1 1 18rem; min-width: 0; }

.sc-inline-cta__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.sc-inline-cta__text {
	margin: 0.4rem 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-width: 58ch;
}

.sc-inline-cta .sc-btn { flex: 0 0 auto; }

@media (max-width: 599px) {
	.sc-inline-cta {
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		gap: 0.9rem;
		padding: 1.1rem 1.15rem;
	}

	/* flex-basis is read along the flex axis: in a column that 18rem was being
	   applied as a height, which is where the empty space came from. */
	.sc-inline-cta__copy { flex: 0 1 auto; }

	.sc-inline-cta .sc-btn { width: 100%; }
}

/* ------------------------------------------------------------ day mode ---- */

/* The back of a card is its own surface, not the page. In light mode surface-2
   is pure white, the same as the page, so a flipped card dissolved into the
   background: this gives it a tint of the accent instead. */
:root {
	--sc-card-back: linear-gradient(165deg, #1e1526 0%, #17111c 62%);
}

:root[data-theme="light"] {
	color-scheme: light;

	/* The preset variables themselves are redefined, so every rule in this
	   file and everything theme.json generates follows without being touched. */
	--wp--preset--color--page: #ffffff;
	--wp--preset--color--surface: #f6f6f9;
	--wp--preset--color--surface-2: #ffffff;
	--wp--preset--color--stroke: #e3e3ea;
	--wp--preset--color--contrast: #16121c;
	--wp--preset--color--muted: #66616f;

	--sc-header-bg: rgba(255, 255, 255, 0.88);
	--sc-gate-bg: rgba(250, 248, 252, 0.92);
	--sc-scrim: rgba(22, 18, 28, 0.42);
	--sc-veil-from: rgba(20, 16, 26, 0);
	--sc-veil-to: rgba(20, 16, 26, 0.86);
	--sc-hero-bg: linear-gradient(115deg, #fdf3f6 0%, #ffffff 58%);
	--sc-poster-empty: linear-gradient(160deg, #f0e7ee 0%, #e6e2ec 100%);
	--sc-tint: rgba(22, 18, 28, 0.035);
	--sc-tint-strong: rgba(22, 18, 28, 0.07);
	--sc-ph-text: rgba(22, 18, 28, 0.22);
	--sc-badge-ring: rgba(22, 18, 28, 0.12);
	--sc-on-media: rgba(255, 255, 255, 0.78);
	--sc-shadow-deep: rgba(22, 18, 28, 0.18);
	--sc-shadow-soft: rgba(22, 18, 28, 0.10);
	--sc-muted-soft: rgba(102, 97, 111, 0.85);
	--sc-stroke-soft: rgba(227, 227, 234, 0.9);
	--sc-glow: rgba(249, 113, 135, 0.16);
	--sc-card-back: linear-gradient(165deg, #fff6f9 0%, #fdeaf1 55%, #fce4ee 100%);
	/* The card title sits on that tint rather than on white, and at 16px semibold
	   it is not large text, so it needs the full 4.5:1. A shade under the general
	   accent-text clears it across the whole gradient without draining the pink. */
	--sc-card-title: #b83154;

	/* The brand pink is a fill colour. As text on white it is too pale, so
	   links and small accent type step down to a shade that actually passes. */
	--sc-accent-text: #c93a60;
}

:root[data-theme="light"] body {
	background-image: radial-gradient(60% 70% at 50% 0%, rgba(249, 113, 135, 0.13) 0%, rgba(255, 255, 255, 0) 70%);
}

:root[data-theme="light"] a:not(.sc-btn):not(.sc-nav__item):not(.sc-pill):not(.sc-card__more):not(.sc-header__cta),
:root[data-theme="light"] .sc-eyebrow,
:root[data-theme="light"] .sc-nav__head,
:root[data-theme="light"] .sc-side__head,
:root[data-theme="light"] .sc-answers__go,
:root[data-theme="light"] .sc-card__title--back,
:root[data-theme="light"] .sc-verdict__num,
:root[data-theme="light"] .sc-verdict__call strong,
:root[data-theme="light"] .sc-hero__body strong,
:root[data-theme="light"] .sc-faq summary::after {
	color: var(--sc-accent-text);
}

/* Only the card back: elsewhere accent-text sits on white and already passes. */
:root[data-theme="light"] .sc-card__title--back {
	color: var(--sc-card-title);
}

:root[data-theme="light"] .sc-nav__item.is-current,
:root[data-theme="light"] .sc-side__list a[aria-current="page"] {
	color: var(--sc-accent-text);
}

/* Shadows that read as depth on black read as dirt on white. */
:root[data-theme="light"] .sc-btn--primary { box-shadow: 0 2px 14px rgba(249, 113, 135, 0.35); }
:root[data-theme="light"] .sc-hero__poster { box-shadow: 0 14px 30px rgba(22, 18, 28, 0.16); }
:root[data-theme="light"] .sc-age-gate__panel { box-shadow: 0 20px 50px rgba(22, 18, 28, 0.20); }

/* The score ladder keeps its meaning; only the neutral end needs lifting. */
:root[data-theme="light"] .sc-score--1 { background: #8b90a0; }
:root[data-theme="light"] .sc-score--2 { background: #a9739a; }

/* ------------------------------------------------------- day/night switch -- */

.sc-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	flex: 0 0 auto;
	border: 1px solid var(--wp--preset--color--stroke);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--muted);
	cursor: pointer;
	transition: var(--wp--custom--transition);
}

.sc-switch:hover {
	color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--muted);
}

.sc-switch svg {
	position: absolute;
	width: 18px;
	height: 18px;
	transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* At night you are offered the sun, and the other way round. */
.sc-switch__sun { opacity: 1; transform: none; }
.sc-switch__moon { opacity: 0; transform: rotate(-60deg) scale(0.6); }

:root[data-theme="light"] .sc-switch__sun { opacity: 0; transform: rotate(60deg) scale(0.6); }
:root[data-theme="light"] .sc-switch__moon { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.sc-switch svg { transition: none; }
}

/* ------------------------------------------- card back, sized to the card -- */

/* The reviews run about 150 characters, so on a wide card the back panel was
   mostly empty while the type stayed at its smallest. The card is as wide as
   the poster and that varies a lot, so the card becomes a container and the
   back scales with it: nothing shrinks below the old fixed sizes, and a roomy
   card spends the space on legibility instead of leaving a hole.
   The plain value in each pair is the fallback a browser without container
   queries keeps, because it discards the cqw line as invalid. */
.sc-card { container-type: inline-size; }

.sc-card__title--back {
	font-size: 1rem;
	font-size: clamp(1rem, 8cqw, 1.5rem);
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.sc-card__summary {
	font-size: 0.78rem;
	font-size: clamp(0.78rem, 6.25cqw, 1.1rem);
	line-height: 1.42;
}

.sc-card__cast,
.sc-card__eps,
.sc-card__tags {
	font-size: 0.6875rem;
	font-size: clamp(0.68rem, 3.9cqw, 0.85rem);
}

.sc-card__actions .sc-btn {
	font-size: 0.75rem;
	font-size: clamp(0.72rem, 4.2cqw, 0.92rem);
	padding: 0.7rem 1rem;
}

.sc-card__back { gap: 0.42rem; }

/* ------------------------------------------------- performer on a poster --- */

/* A series built around a licensed performer says so on the artwork rather than
   in a line under the title: six cards out of ninety-two carry this, and an
   extra line on only those would leave the grid rows out of step. */
.sc-card__feat {
	position: absolute;
	inset-inline: 0.4rem;
	bottom: 0.4rem;
	z-index: 3;
	overflow: hidden;
	padding: 0.28rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--page) 78%, transparent);
	backdrop-filter: blur(6px);
	border: 1px solid var(--sc-badge-ring);
	color: var(--sc-on-media);
	font-size: clamp(0.62rem, 3.4cqw, 0.78rem);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The pill sits over the artwork, so it goes when the card turns. */
.sc-card.is-flipped .sc-card__feat { visibility: hidden; }

.sc-card__cast span,
.sc-card__eps span,
.sc-card__tags span {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

/* --------------------------------------------------------------- rail row --- */

/* The home rail shows a fixed handful, so it should read as one row rather than
   leaving a card stranded underneath. Below this width auto-fill is left alone:
   forcing the column count there would squeeze the cards under 200px, which is
   the width the back panel needs. Above it, auto-fill would start opening a
   sixth column and leave a hole, so the count is pinned instead. */
@media (min-width: 1500px) {
	.sc-grid--rail {
		grid-template-columns: repeat(var(--sc-rail-cols, 5), minmax(0, 1fr));
	}
}

/* ---------------------------------------------------- tracked header button --- */

/* Small on purpose. The bar holds the menu button, the wordmark and two links,
   and the point of this one is to be reachable at any scroll depth rather than
   to shout. Dark text on the accent, because white on that pink measures
   2.71:1 and does not pass. */
.sc-header__cta {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0.42rem 0.85rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--accent);
	color: #17090d;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.01em;
	white-space: nowrap;
	text-decoration: none;
	transition: var(--wp--custom--transition);
}

.sc-header__cta:hover,
.sc-header__cta:focus-visible {
	background: var(--wp--preset--color--accent-dark);
	color: #17090d;
}

/* The switch in the menu, now that it has left the bar. */
.sc-nav__theme {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-top: 0.25rem;
	padding: 0.35rem 0.15rem 0;
}

.sc-nav__theme span {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------- breadcrumb --- */

/* A label, not a heading: small, spaced capitals that sit above the title
   without competing with it. */
.sc-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.3rem 0.4rem;
	margin-block-end: var(--wp--preset--spacing--10);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.sc-crumbs a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	transition: var(--wp--custom--transition);
}

.sc-crumbs a:hover,
.sc-crumbs a:focus-visible { color: var(--wp--preset--color--accent); }

.sc-crumbs [aria-current="page"] { color: var(--wp--preset--color--contrast); }

.sc-crumbs__sep { opacity: 0.5; }

/* On a phone the run from breadcrumb to title to rule to filters was mostly
   air. The rule's margins are written inline in the templates, so overriding
   them needs the weight. */
@media (max-width: 599px) {
	.sc-shell__main > .wp-block-separator.sc-rule,
	.sc-shell__main .wp-block-post-content > .wp-block-separator.sc-rule {
		margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--20) !important;
	}

	.sc-shell__main > h1,
	.sc-shell__main .wp-block-post-content > h1,
	.sc-shell__main > .wp-block-query-title {
		margin-block-start: 0.15rem;
	}

	.sc-filters { margin-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--20); }
}

/* WordPress puts the theme's blockGap (1.5rem) on every child of .wp-site-blocks
   after the first, so the shell inherited a margin above it on top of its own
   padding. The header is already separated by its own border; the gap was air. */
.wp-site-blocks > .sc-shell { margin-block-start: 0; }

/* Page and archive titles on a phone. The global h1 is the xxxl step, 36px at
   its smallest, and a fifty character title at that size runs five lines and
   pushes the filters off the first screen. Direct-child selectors on purpose:
   the hero h1 sits deeper in its own section, has its own clamp, and stays. */
@media (max-width: 599px) {
	.sc-shell__main > h1,
	.sc-shell__main > .wp-block-query-title,
	.sc-shell__main .wp-block-post-content > h1 {
		font-size: clamp(1.6rem, 7vw, 1.9rem);
		line-height: 1.15;
		letter-spacing: -0.01em;
	}
}

/* Day mode: white text as asked. White on the base pink measures 2.71:1, so the
   pill steps down to the accent-text crimson the light theme already uses for
   links, where white reads at 4.93:1. Hover goes one step deeper again. */
:root[data-theme="light"] .sc-header__cta {
	background: var(--sc-accent-text);
	color: #ffffff;
}

:root[data-theme="light"] .sc-header__cta:hover,
:root[data-theme="light"] .sc-header__cta:focus-visible {
	background: #b83154;
	color: #ffffff;
}

/* ------------------------------------------------ hero of an answer page --- */

/* Smaller sibling of the home hero: same family, less weight, because here the
   answer in the lede is the asset and the art is the payoff. On a phone the
   copy comes first for that reason, unlike the home hero where the fan leads. */
.sc-phero {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	align-items: center;
	margin-block-end: var(--wp--preset--spacing--40);
	padding: clamp(1.25rem, 4vw, 2.25rem);
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--preset--color--stroke);
	background:
		radial-gradient(90% 130% at 88% 12%, var(--sc-glow, rgba(249, 113, 135, 0.14)) 0%, transparent 62%),
		var(--wp--preset--color--surface);
}

.sc-phero__title {
	margin: 0;
	font-size: clamp(1.6rem, 6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

.sc-phero__lede {
	margin: 0.7rem 0 0;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	max-width: 54ch;
}

.sc-phero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.1rem;
}

.sc-phero__cta .sc-btn { flex: 0 1 auto; }

/* The fan is decorative here too, and lighter than the home one. */
.sc-phero .sc-hero__art {
	margin: 0;
	padding-inline: 0;
	transform: scale(0.82);
	transform-origin: center;
}

@media (min-width: 880px) {
	.sc-phero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
}

@media (max-width: 599px) {
	.sc-phero { padding: 1.1rem 1rem 0.6rem; }
	.sc-phero .sc-hero__art { transform: scale(0.72); margin-block: -0.75rem; }
}

/* The fan reacts on desktop: the cards open out and the middle one lifts. Only
   where there is a real pointer, and only if the visitor has not asked for less
   motion. Decorative, so nothing depends on it. */
@media (min-width: 880px) and (hover: hover) and (pointer: fine) {
	.sc-hero__art .sc-hero__poster {
		transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
	}

	.sc-hero__art:hover .sc-hero__poster--1 { transform: rotate(-12deg) translate(-7%, 4px); }
	.sc-hero__art:hover .sc-hero__poster--2 { transform: rotate(0deg) translateY(-10px) scale(1.04); box-shadow: 0 26px 54px var(--sc-shadow-deep, rgba(0, 0, 0, 0.45)); }
	.sc-hero__art:hover .sc-hero__poster--3 { transform: rotate(13deg) translate(7%, 4px); }
}

@media (prefers-reduced-motion: reduce) {
	.sc-hero__art .sc-hero__poster { transition: none; }
}

/* .sc-phero is a <section>, so the generic section rhythm was giving it 64px
   above. It opens the page right under the breadcrumb and needs none of that:
   the room goes to the call to action instead, which on a phone was landing
   half cut at the fold. Two classes deep to outrank `.sc-shell__main > section`. */
.sc-shell__main > .sc-phero {
	margin-block: 0 var(--wp--preset--spacing--40);
}

@media (max-width: 599px) {
	.sc-crumbs { margin-block-end: 0.3rem; }

	.sc-shell__main > .sc-phero {
		margin-block: 0 var(--wp--preset--spacing--30);
		padding: 1rem 0.95rem 1.1rem;
		gap: 0.9rem;
	}

	/* The fan leads here as it does on the home. It sits tight to the title so
	   the answer and the button still clear the fold. */
	.sc-phero .sc-hero__art { margin-block: -0.4rem -0.9rem; }
}

/* ------------------------------------------------- genre call to action --- */

/* Sits above the filter row on an archive. The old one was a panel under the
   grid, which on a phone meant scrolling past forty cards before anything asked
   for a click. The button is full width on a phone because that is the tap
   target, and the copy above it is what makes the tap make sense. */
.sc-gcta {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	padding: clamp(0.95rem, 3.5vw, 1.35rem);
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--preset--color--accent);
	background:
		radial-gradient(120% 160% at 92% 8%, var(--sc-glow, rgba(249, 113, 135, 0.16)) 0%, transparent 60%),
		var(--wp--preset--color--surface-2);
}

.sc-gcta__copy {
	display: flex;
	flex-direction: column;
	gap: 0.28rem;
	min-width: 0;
}

.sc-gcta__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1rem, 3.6vw, 1.15rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}

.sc-gcta__note {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
}

.sc-gcta__btn {
	justify-content: center;
	width: 100%;
	text-align: center;
}

@media (min-width: 720px) {
	.sc-gcta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}

	.sc-gcta__btn { width: auto; flex: 0 0 auto; }
}