/* =========================================================================
   COMPONENTS — the reusable pieces: wells, cards, rows, controls, overlays
   ====================================================================== */

/* -------------------------------------------------------------------------
   Media wells
   The framed, ratio-locked box every image sits inside. The empty state is
   what replaces the design tool's <image-slot> placeholder: same footprint,
   same dark panel, so a half-populated CMS never collapses a layout.
   ---------------------------------------------------------------------- */

.sk-well {
	position: relative;
	overflow: hidden;
	background: var(--sk-charcoal);
	border: 1px solid var(--sk-line);
}

.sk-well--plain {
	border: 0;
}

.sk-well__zoom {
	position: absolute;
	inset: 0;
	transition: transform 1.1s var(--sk-ease);
}

.sk-well__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.sk-well > .sk-well__img {
	position: absolute;
	inset: 0;
}

.sk-well__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 14px;
	background: var(--sk-charcoal);
}

.sk-well__empty::before {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px dashed rgba(239, 234, 225, .14);
	pointer-events: none;
}

.sk-well__empty-label {
	position: relative;
	font-size: 9px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(239, 234, 225, .34);
	text-align: center;
	line-height: 1.9;
}

/* Overlay veil and the sliding caption plate on hover. */
.sk-veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(7, 7, 10, .94), rgba(7, 7, 10, .25) 60%, transparent);
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.sk-veil--soft {
	background: linear-gradient(to top, rgba(7, 7, 10, .9), transparent 60%);
	opacity: .55;
}

.sk-veil--flat {
	background: rgba(7, 7, 10, .55);
}

.sk-slide {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 14px;
	transform: translateY(12px);
	opacity: 0;
	transition: transform .55s var(--sk-ease), opacity .55s var(--sk-ease);
	pointer-events: none;
}

.sk-slide--roomy {
	padding: 18px;
	transform: translateY(14px);
}

.sk-slide__meta {
	font-size: 8.5px;
	letter-spacing: .16em;
	color: var(--sk-dim-60);
	line-height: 1.9;
}

.sk-slide__cta {
	margin-top: 12px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	color: var(--sk-gold);
}

/* -------------------------------------------------------------------------
   Card hover choreography
   The original bound these to [data-card]; the attribute is kept so the
   relationships stay readable in the markup.
   ---------------------------------------------------------------------- */

[data-card]:hover [data-zoom],
[data-card]:focus-within [data-zoom] {
	transform: scale(1.06);
}

[data-card]:hover .sk-veil,
[data-card]:focus-within .sk-veil {
	opacity: 1;
}

[data-card]:hover .sk-slide,
[data-card]:focus-within .sk-slide {
	transform: translateY(0);
	opacity: 1;
}

[data-card]:hover .sk-card__title,
[data-card]:focus-within .sk-card__title {
	color: var(--sk-gold);
}

[data-card]:hover .sk-rule,
[data-card]:focus-within .sk-rule {
	transform: scaleX(1);
}

[data-link]:hover .sk-arrow,
[data-link]:focus-visible .sk-arrow {
	transform: translateX(7px);
}

[data-row]:hover {
	background: rgba(239, 234, 225, .035);
}

[data-row]:hover .sk-play {
	border-color: var(--sk-gold);
	color: var(--sk-gold);
}

/* -------------------------------------------------------------------------
   Cards
   ---------------------------------------------------------------------- */

.sk-card {
	display: block;
}

.sk-card__link {
	display: block;
	width: 100%;
	color: inherit;
}

.sk-card__link:hover {
	color: inherit;
}

.sk-card__title {
	font-family: var(--sk-serif);
	font-weight: 400;
	line-height: 1.15;
	color: var(--sk-white);
	transition: color .35s ease;
}

.sk-card__title--poster {
	margin-top: 13px;
	font-size: clamp(15px, 1.5vw, 19px);
}

.sk-card__title--upcoming {
	margin-top: 16px;
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.1;
}

.sk-card__title--tvc {
	font-size: clamp(18px, 1.9vw, 24px);
}

.sk-card__title--era {
	font-size: clamp(21px, 2.3vw, 31px);
	line-height: 1.08;
}

.sk-card__year {
	margin-top: 7px;
	font-size: 10.5px;
	letter-spacing: .16em;
	color: var(--sk-dim-60);
}

.sk-card__sub {
	margin-top: 9px;
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--sk-dim-60);
}

.sk-rule {
	margin-top: 14px;
	height: 1px;
	background: var(--sk-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .55s var(--sk-ease);
}

/* Status flags on posters. */
.sk-flag {
	position: absolute;
	top: 0;
	left: 0;
	background: var(--sk-red);
	color: #F5EFE6;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .2em;
	padding: 8px 13px;
	z-index: 2;
}

.sk-tag {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(7, 7, 10, .8);
	border: 1px solid var(--sk-line-5);
	font-size: 8.5px;
	letter-spacing: .16em;
	padding: 6px 10px;
	color: var(--sk-dim-72);
	z-index: 2;
}

/* Centred play glyph over a video still. */
.sk-playmark {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	z-index: 2;
}

.sk-playmark span {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(239, 234, 225, .5);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	color: var(--sk-white);
	background: rgba(7, 7, 10, .3);
}

/* -------------------------------------------------------------------------
   Rows — songs, awards, search results
   ---------------------------------------------------------------------- */

.sk-rows {
	border-top: 1px solid var(--sk-line-3);
}

.sk-rows--gold {
	border-top-color: var(--sk-line-gold);
}

.sk-row {
	display: grid;
	gap: clamp(12px, 2vw, 26px);
	align-items: center;
	width: 100%;
	padding: clamp(14px, 1.6vw, 22px) clamp(8px, 1.2vw, 16px);
	border-bottom: 1px solid var(--sk-line);
	transition: background .35s ease;
	color: inherit;
}

.sk-row:hover {
	color: inherit;
}

/* Song row: index, play, title block, waveform, credits, year. */
.sk-row--song {
	grid-template-columns: 34px 38px minmax(0, 1.5fr) 58px minmax(0, 1fr) 54px;
}

.sk-row__index {
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--sk-dim-58);
}

.sk-play {
	width: 38px;
	height: 38px;
	border: 1px solid var(--sk-line-6);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 10px;
	color: var(--sk-dim-72);
	transition: border-color .35s ease, color .35s ease;
}

.sk-row__main {
	min-width: 0;
}

.sk-row__title {
	display: block;
	font-family: var(--sk-serif);
	font-size: clamp(19px, 2.2vw, 28px);
	line-height: 1.15;
	color: var(--sk-white);
	transition: color .35s ease;
}

[data-row]:hover .sk-row__title {
	color: var(--sk-gold);
}

.sk-row__sub {
	display: block;
	margin-top: 7px;
	font-size: 11px;
	letter-spacing: .12em;
	color: var(--sk-dim-60);
}

.sk-row__credits {
	font-size: 11px;
	color: var(--sk-dim);
	text-align: right;
	line-height: 1.7;
}

.sk-row__credits span {
	color: var(--sk-dim-56);
}

.sk-row__year {
	font-size: 10.5px;
	letter-spacing: .14em;
	color: var(--sk-dim-58);
	justify-self: end;
}

/* Waveform ------------------------------------------------------------ */

.sk-wave {
	display: flex;
	align-items: flex-end;
	gap: 2px;
	height: 26px;
}

.sk-wave__bar {
	width: 2px;
	height: var(--sk-bar-h, 10px);
	background: rgba(200, 164, 92, var(--sk-bar-o, .4));
}

/* Award row ------------------------------------------------------------ */

.sk-row--award {
	grid-template-columns: 150px minmax(0, 1fr) minmax(0, .8fr);
	gap: clamp(14px, 3vw, 44px);
	align-items: baseline;
	padding: clamp(20px, 2.6vw, 34px) clamp(8px, 1.2vw, 16px);
	border-bottom-color: var(--sk-line-2);
}

.sk-award__year {
	font-family: var(--sk-serif);
	font-size: clamp(38px, 6vw, 88px);
	line-height: .85;
	letter-spacing: -.02em;
	color: var(--sk-dim-44);
}

.sk-award__year.is-major {
	color: var(--sk-gold);
}

.sk-award__title {
	display: block;
	font-family: var(--sk-serif);
	font-size: clamp(20px, 2.4vw, 30px);
	line-height: 1.15;
	color: var(--sk-white);
}

.sk-award__body {
	display: block;
	margin-top: 9px;
	font-size: 11px;
	letter-spacing: .18em;
	color: var(--sk-gold);
}

.sk-award__film {
	font-size: 12.5px;
	line-height: 1.8;
	color: var(--sk-dim-50);
}

/* -------------------------------------------------------------------------
   Buttons and links
   ---------------------------------------------------------------------- */

.sk-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .22em;
	padding: 16px 28px;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .35s ease, color .35s ease, border-color .35s ease;
}

.sk-btn--solid {
	background: var(--sk-white);
	color: var(--sk-black);
	font-weight: 700;
	padding: 17px 30px;
}

.sk-btn--solid:hover {
	background: var(--sk-gold);
	color: var(--sk-black);
}

.sk-btn--outline {
	border: 1px solid var(--sk-line-8);
	color: var(--sk-white);
	padding: 17px 30px;
}

.sk-btn--outline:hover {
	border-color: var(--sk-gold);
	color: var(--sk-white);
}

.sk-btn--gold {
	border: 1px solid var(--sk-gold);
	color: var(--sk-gold);
}

.sk-btn--gold:hover {
	background: var(--sk-gold);
	color: var(--sk-black);
}

.sk-btn--ghost {
	border: 1px solid rgba(239, 234, 225, .22);
	color: var(--sk-white);
}

.sk-btn--ghost:hover {
	border-color: var(--sk-white);
	color: var(--sk-white);
}

.sk-btn--header {
	font-size: 10.5px;
	padding: 11px 20px;
	border: 1px solid var(--sk-gold);
	color: var(--sk-gold);
	letter-spacing: .22em;
	font-weight: 600;
}

.sk-btn--header:hover {
	background: var(--sk-gold);
	color: var(--sk-black);
}

.sk-btn--block {
	display: flex;
	justify-content: center;
	padding: 17px;
	letter-spacing: .24em;
	font-size: 11px;
}

/* The underlined "ALL X →" link that closes every section header. */
.sk-underlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	letter-spacing: .22em;
	color: var(--sk-dim-72);
	border-bottom: 1px solid var(--sk-line-6);
	padding-bottom: 9px;
	text-transform: uppercase;
	transition: color .3s ease;
}

.sk-underlink:hover {
	color: var(--sk-white);
}

.sk-underlink--ink {
	color: var(--sk-ink);
	border-bottom-color: var(--sk-ink-25);
	font-weight: 700;
	letter-spacing: .24em;
}

.sk-underlink--ink:hover {
	color: var(--sk-ink);
}

.sk-underlink--ink .sk-arrow {
	color: var(--sk-gold-deep);
}

/* Rail arrows ---------------------------------------------------------- */

.sk-railnav {
	display: flex;
	gap: 10px;
}

.sk-railnav button {
	width: 44px;
	height: 44px;
	border: 1px solid var(--sk-line-6);
	display: grid;
	place-items: center;
	color: var(--sk-white);
	transition: border-color .3s ease;
}

.sk-railnav button:hover {
	border-color: var(--sk-gold);
}

.sk-railnav button[disabled] {
	opacity: .35;
	cursor: not-allowed;
}

/* Chips ---------------------------------------------------------------- */

.sk-chip {
	display: inline-flex;
	align-items: center;
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: 9px 15px;
	border: 1px solid var(--sk-line-6);
	color: var(--sk-dim-60);
	background: transparent;
	white-space: nowrap;
	transition: color .3s ease, background .3s ease, border-color .3s ease;
}

.sk-chip:hover {
	color: var(--sk-white);
	border-color: var(--sk-line-8);
}

.sk-chip--light.is-active {
	background: var(--sk-white);
	border-color: var(--sk-white);
	color: var(--sk-black);
}

.sk-chip--gold.is-active {
	background: var(--sk-gold);
	border-color: var(--sk-gold);
	color: var(--sk-black);
}

.sk-chip--bare {
	border: 0;
	padding: 6px 0;
	color: var(--sk-dim);
}

.sk-chip--bare.is-active {
	color: var(--sk-gold);
	background: none;
}

/* Decade switcher on the homepage filmography rail. */
.sk-decades {
	display: flex;
	gap: clamp(14px, 2vw, 30px);
	margin-top: clamp(28px, 3.4vw, 48px);
	flex-wrap: wrap;
}

.sk-decade {
	font-family: var(--sk-serif);
	font-size: clamp(22px, 2.8vw, 38px);
	line-height: 1;
	color: var(--sk-dim-56);
	border-bottom: 1px solid transparent;
	padding-bottom: 8px;
	transition: color .35s ease, border-color .35s ease;
}

.sk-decade.is-active,
.sk-decade[aria-selected="true"] {
	color: var(--sk-white);
	border-bottom-color: var(--sk-gold);
}

/* -------------------------------------------------------------------------
   Rails
   ---------------------------------------------------------------------- */

.sk-rail {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sk-rail::-webkit-scrollbar {
	display: none;
}

.sk-rail > * {
	scroll-snap-align: start;
}

.sk-rail--eras {
	margin-top: clamp(34px, 4.5vw, 64px);
	gap: clamp(18px, 2.2vw, 34px);
	padding: 0 var(--sk-gut) 8px;
}

.sk-rail--eras > .sk-era {
	flex: 0 0 clamp(268px, 30vw, 398px);
}

.sk-rail--films {
	margin-top: clamp(30px, 3.6vw, 52px);
	gap: clamp(14px, 1.8vw, 24px);
	padding: 0 var(--sk-gut) 8px;
}

.sk-rail--films > .sk-card {
	flex: 0 0 clamp(168px, 17vw, 230px);
}

.sk-rail__tail {
	flex: 0 0 clamp(200px, 22vw, 300px);
	display: flex;
	align-items: center;
}

.sk-rail__tail a {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-family: var(--sk-serif);
	font-size: clamp(22px, 2.4vw, 32px);
	line-height: 1.05;
	color: var(--sk-gold);
}

.sk-rail__tail .sk-arrow {
	font-size: 20px;
}

/* -------------------------------------------------------------------------
   Overlays: search, video, lightbox
   ---------------------------------------------------------------------- */

.sk-overlay[hidden] {
	display: none;
}

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

.sk-search {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(5, 5, 7, .96);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	animation: sk-fade-in .3s ease both;
	overflow-y: auto;
}

.sk-search__inner {
	max-width: 1020px;
	margin-inline: auto;
	padding: clamp(26px, 8vh, 90px) clamp(20px, 5vw, 40px);
}

.sk-search__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 38px;
}

.sk-search__label {
	font-size: 10.5px;
	letter-spacing: .3em;
	color: var(--sk-gold);
}

.sk-search__close {
	font-size: 10.5px;
	letter-spacing: .24em;
	color: var(--sk-dim-60);
}

.sk-search__field {
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--sk-line-7);
	padding-bottom: 18px;
}

.sk-search__input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	outline: none;
	color: var(--sk-white);
	font-family: var(--sk-serif);
	font-size: clamp(24px, 5vw, 46px);
	line-height: 1.1;
}

.sk-search__input::placeholder {
	color: rgba(239, 234, 225, .3);
}

.sk-search__scopes {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
	margin-top: 16px;
}

.sk-search__scopes span {
	font-size: 10px;
	letter-spacing: .2em;
	color: var(--sk-dim-58);
}

.sk-search__results {
	margin-top: 44px;
	display: flex;
	flex-direction: column;
}

.sk-result {
	display: grid;
	grid-template-columns: 76px minmax(0, 1.4fr) minmax(0, 1fr) 24px;
	gap: 18px;
	align-items: center;
	padding: 16px 12px;
	border-bottom: 1px solid rgba(239, 234, 225, .07);
	transition: background .3s ease;
	color: inherit;
}

.sk-result:hover {
	color: inherit;
}

.sk-result__kind {
	font-size: 9.5px;
	letter-spacing: .2em;
	color: var(--sk-gold);
}

.sk-result__title {
	font-family: var(--sk-serif);
	font-size: clamp(18px, 2.4vw, 26px);
	line-height: 1.15;
	color: var(--sk-white);
}

.sk-result__meta {
	font-size: 11.5px;
	color: var(--sk-dim);
	letter-spacing: .04em;
}

.sk-result__arrow {
	color: var(--sk-gold);
	transition: transform .35s ease;
	justify-self: end;
}

/* Video modal ---------------------------------------------------------- */

.sk-video {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(4, 4, 6, .94);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: grid;
	place-items: center;
	padding: clamp(16px, 5vw, 60px);
	animation: sk-fade-in .3s ease both;
}

.sk-video__box {
	width: min(1140px, 100%);
}

.sk-video__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 20px;
	margin-bottom: 16px;
}

.sk-video__kind {
	font-size: 10px;
	letter-spacing: .28em;
	color: var(--sk-gold);
	margin-bottom: 8px;
}

.sk-video__title {
	font-family: var(--sk-serif);
	font-size: clamp(22px, 3.4vw, 38px);
	line-height: 1.1;
	color: var(--sk-white);
}

.sk-video__close {
	font-size: 10.5px;
	letter-spacing: .24em;
	color: var(--sk-dim-60);
	white-space: nowrap;
}

.sk-video__frame {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--sk-charcoal-2);
	border: 1px solid var(--sk-line-4);
	display: grid;
	place-items: center;
}

.sk-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sk-video__meta {
	font-size: 11.5px;
	color: var(--sk-dim-56);
	margin-top: 10px;
}

/* Lightbox ------------------------------------------------------------- */

.sk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(4, 4, 6, .96);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	animation: sk-fade-in .3s ease both;
}

.sk-lightbox__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px var(--sk-gut-tight);
	border-bottom: 1px solid var(--sk-line);
	gap: 16px;
	flex-wrap: wrap;
}

.sk-lightbox__info {
	display: flex;
	gap: 18px;
	align-items: baseline;
	min-width: 0;
}

.sk-lightbox__cat {
	font-size: 10px;
	letter-spacing: .28em;
	color: var(--sk-gold);
	white-space: nowrap;
}

.sk-lightbox__caption {
	font-size: 12px;
	color: var(--sk-dim-50);
}

.sk-lightbox__controls {
	display: flex;
	gap: 20px;
	align-items: center;
}

.sk-lightbox__controls button {
	font-size: 16px;
	color: var(--sk-dim-60);
}

.sk-lightbox__controls button:hover {
	color: var(--sk-white);
}

.sk-lightbox__pos {
	font-size: 11px;
	color: var(--sk-dim-60);
	letter-spacing: .14em;
}

.sk-lightbox__close {
	font-size: 10.5px !important;
	letter-spacing: .24em;
	margin-left: 8px;
}

.sk-lightbox__stage {
	flex: 1;
	padding: clamp(16px, 3vw, 40px);
	display: grid;
	place-items: center;
	min-height: 0;
}

.sk-lightbox__stage img {
	max-width: min(1000px, 100%);
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* -------------------------------------------------------------------------
   Empty states, pagination, breadcrumbs, share
   ---------------------------------------------------------------------- */

.sk-empty {
	border: 1px solid var(--sk-line-3);
	padding: clamp(34px, 6vw, 64px);
	text-align: center;
}

.sk-empty__title {
	font-family: var(--sk-serif);
	font-size: clamp(24px, 4vw, 38px);
	line-height: 1.1;
	color: var(--sk-white);
	margin-bottom: 12px;
}

.sk-empty__text {
	font-size: 13px;
	line-height: 1.8;
	color: var(--sk-dim-50);
	max-width: 420px;
	margin-inline: auto;
}

.sk-pagination {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin-top: clamp(34px, 4vw, 60px);
}

.sk-pagination .page-numbers {
	min-width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--sk-line-6);
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--sk-dim-55);
	transition: color .3s ease, border-color .3s ease, background .3s ease;
}

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

.sk-pagination .page-numbers.current {
	background: var(--sk-white);
	border-color: var(--sk-white);
	color: var(--sk-black);
}

.sk-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--sk-dim-56);
}

.sk-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sk-dim-50);
}

.sk-crumbs__item + .sk-crumbs__item::before {
	content: "/";
	margin-right: 10px;
	color: rgba(239, 234, 225, .3);
}

.sk-crumbs__item a {
	color: var(--sk-dim-60);
}

.sk-crumbs__item a:hover {
	color: var(--sk-gold);
}

.sk-share {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.sk-share__label {
	font-size: 9.5px;
	letter-spacing: .26em;
	color: var(--sk-gold);
}

.sk-share__link {
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sk-dim-60);
}

.sk-share__link:hover {
	color: var(--sk-white);
}

/* Widgets, used only on the editorial templates. */
.sk-widget {
	margin-bottom: 34px;
}

.sk-widget__title {
	font-size: 9.5px;
	letter-spacing: .26em;
	color: var(--sk-gold);
	margin-bottom: 16px;
	text-transform: uppercase;
}

.sk-widget ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 12.5px;
	color: var(--sk-dim-60);
}

/* -------------------------------------------------------------------------
   Stretched links

   Several components need one large click target *and* a real button inside
   it — a song row that navigates but whose play circle opens the modal, a TVC
   card that links to its page but whose play glyph launches the video. A
   button cannot legally sit inside an anchor, so the anchor covers the card
   with a pseudo-element instead and the button is lifted above it.
   ---------------------------------------------------------------------- */

.sk-row,
.sk-card,
.sk-shot {
	position: relative;
}

.sk-row__title a::after,
.sk-stretch::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sk-play,
.sk-playbtn {
	position: relative;
	z-index: 2;
}

.sk-playbtn {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--sk-white);
}

.sk-playbtn span {
	width: 52px;
	height: 52px;
	border: 1px solid rgba(239, 234, 225, .5);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 11px;
	background: rgba(7, 7, 10, .3);
	transition: border-color .35s ease, background .35s ease;
}

.sk-playbtn:hover span,
.sk-playbtn:focus-visible span {
	border-color: var(--sk-gold);
	color: var(--sk-gold);
	background: rgba(7, 7, 10, .55);
}

/* The media box inside a card needs its own stacking context so flags,
   veils and play controls sit in a predictable order. */
.sk-card__media {
	position: relative;
}

/* Inline search form (widgets, no-JS fallback). */
.sk-searchform {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: stretch;
}

.sk-searchform__input {
	flex: 1 1 220px;
	min-width: 0;
	background: var(--sk-charcoal);
	border: 1px solid var(--sk-line-6);
	color: var(--sk-white);
	padding: 14px 16px;
	font-size: 13px;
	letter-spacing: .04em;
}

.sk-searchform__input::placeholder {
	color: rgba(239, 234, 225, .34);
}

.sk-searchform__input:focus {
	outline: none;
	border-color: var(--sk-gold);
}

/* Long-form editorial content rendered from the block editor. */
.sk-prose {
	max-width: 68ch;
	margin-inline: auto;
	font-size: 16px;
	line-height: 1.9;
	color: rgba(239, 234, 225, .82);
}

.sk-prose > * + * {
	margin-top: 1.4em;
}

.sk-prose h2,
.sk-prose h3,
.sk-prose h4 {
	font-family: var(--sk-serif);
	font-weight: 400;
	color: var(--sk-white);
	letter-spacing: -.015em;
	line-height: 1.15;
	margin-top: 1.9em;
}

.sk-prose h2 { font-size: clamp(24px, 3vw, 34px); }
.sk-prose h3 { font-size: clamp(20px, 2.4vw, 26px); }

.sk-prose a {
	color: var(--sk-gold);
	border-bottom: 1px solid rgba(200, 164, 92, .35);
}

.sk-prose blockquote {
	border-left: 1px solid var(--sk-gold);
	padding-left: 22px;
	font-family: var(--sk-serif);
	font-style: italic;
	font-size: clamp(19px, 2.2vw, 24px);
	line-height: 1.5;
	color: var(--sk-dim-75);
}

.sk-prose ul,
.sk-prose ol {
	padding-left: 22px;
}

.sk-prose ul li {
	list-style: disc;
}

.sk-prose ol li {
	list-style: decimal;
}

.sk-prose li + li {
	margin-top: .6em;
}

.sk-prose img,
.sk-prose figure {
	margin-inline: auto;
}

.sk-prose figcaption {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sk-dim-50);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Positioning contexts

   Flags and play controls are absolutely positioned as siblings of the media
   well, so their wrapper has to establish the containing block. Missing one
   of these sends the badge to the top-left of the viewport.
   ---------------------------------------------------------------------- */

.sk-featured__poster,
.sk-videocard,
.sk-songhero__art,
.sk-article__lead,
.sk-page__lead {
	position: relative;
}

/* -------------------------------------------------------------------------
   Breadcrumbs, sidebar and comments
   ---------------------------------------------------------------------- */

.sk-crumbs {
	margin-bottom: clamp(20px, 3vw, 34px);
}

.sk-sidebar {
	margin-top: clamp(40px, 5vw, 72px);
	padding-top: clamp(28px, 3.4vw, 44px);
	border-top: 1px solid var(--sk-line-3);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(24px, 3vw, 44px);
}

.sk-commentarea {
	margin-top: clamp(30px, 4vw, 56px);
}

.sk-commentarea__title {
	font-size: clamp(20px, 2.4vw, 28px);
	margin-bottom: clamp(20px, 2.6vw, 32px);
}

.sk-commentlist,
.sk-commentlist .children {
	display: flex;
	flex-direction: column;
	gap: 24px;
	list-style: none;
	padding: 0;
}

.sk-commentlist .children {
	margin-top: 24px;
	padding-left: clamp(16px, 3vw, 34px);
	border-left: 1px solid var(--sk-line-3);
}

.sk-commentlist .comment-body {
	border-top: 1px solid var(--sk-line-3);
	padding-top: 20px;
}

.sk-commentlist .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12.5px;
	color: var(--sk-white);
}

.sk-commentlist .comment-author img {
	border-radius: 50%;
}

.sk-commentlist .comment-metadata {
	margin-top: 6px;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sk-dim-50);
}

.sk-commentlist p {
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.85;
	color: var(--sk-dim-72);
}

.sk-commentarea__closed {
	font-size: 12.5px;
	color: var(--sk-dim-50);
	margin-top: 20px;
}

.sk-commentarea .comment-form {
	margin-top: clamp(30px, 4vw, 50px);
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sk-commentarea .comment-form label {
	display: block;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sk-dim-60);
	margin-bottom: 8px;
}

.sk-commentarea .comment-form input[type="text"],
.sk-commentarea .comment-form input[type="email"],
.sk-commentarea .comment-form input[type="url"],
.sk-commentarea .comment-form textarea {
	width: 100%;
	background: var(--sk-charcoal);
	border: 1px solid var(--sk-line-6);
	color: var(--sk-white);
	padding: 13px 15px;
	font-size: 14px;
}

.sk-commentarea .comment-form textarea:focus,
.sk-commentarea .comment-form input:focus {
	outline: none;
	border-color: var(--sk-gold);
}

.sk-commentarea .comment-form .submit {
	align-self: flex-start;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   Small structural helpers picked up during QA
   ---------------------------------------------------------------------- */

.sk-search__form {
	display: block;
}

.sk-search__empty {
	margin-top: 44px;
}

.sk-eventaside {
	display: flex;
	flex-direction: column;
}

.sk-eventnav--next {
	margin-left: auto;
	text-align: right;
}

.sk-tvc-grid--archive {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: clamp(18px, 2.2vw, 30px);
}

.sk-filterbar--simple {
	border-top: 1px solid var(--sk-line-2);
}