/* =========================================================================
   RESPONSIVE

   The original design computed its layout in JavaScript from window.innerWidth
   at four thresholds — 1180 (desktop), 1100 (narrow), 900 (mobile) and 700.
   Those same numbers are reproduced here as media queries, so the layout is
   now decided by the browser before first paint instead of after a React
   render. Same breakpoints, same results, no layout shift.
   ====================================================================== */

/* -------------------------------------------------------------------------
   Below 1180 — the desktop navigation gives way to the hamburger
   ---------------------------------------------------------------------- */

@media (max-width: 1179px) {

	.sk-desktop-only {
		display: none !important;
	}

	/* Song rows drop the waveform and the credits column. */
	.sk-row--song {
		grid-template-columns: 30px 38px minmax(0, 1fr) 48px;
	}

	.sk-row--song .sk-wave,
	.sk-row--song .sk-row__credits {
		display: none;
	}
}

@media (min-width: 1180px) {

	.sk-mobile-only {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   Below 1100 — two-column compositions collapse to one
   ---------------------------------------------------------------------- */

@media (max-width: 1099px) {

	.sk-hero {
		grid-template-columns: 1fr;
	}

	/*
	 * The portrait moves behind the copy rather than beside it. The three
	 * gradient plates over it already darken the left edge enough for the
	 * headline to stay legible, which is why the design does this instead of
	 * shrinking the image.
	 */
	.sk-hero__media {
		position: absolute;
		inset: 0;
		z-index: 1;
	}

	.sk-identity__grid {
		grid-template-columns: 1fr;
	}

	.sk-featured {
		grid-template-columns: 1fr;
	}

	.sk-news-grid {
		grid-template-columns: 1fr;
	}

	.sk-grid-2 {
		grid-template-columns: 1fr;
	}

	.sk-chapter {
		grid-template-columns: 1fr;
	}

	.sk-filmbody__grid,
	.sk-eventbody__grid,
	.sk-songhero__grid,
	.sk-upcomingrow,
	.sk-videopair,
	.sk-about__grid {
		grid-template-columns: 1fr;
	}

	.sk-chapter__grid {
		grid-template-columns: 1fr;
	}

	.sk-chapter__numeral {
		font-size: clamp(44px, 12vw, 84px);
	}

	/*
	 * The About column rule only makes sense while there are two columns;
	 * stacked, it becomes a stray line across the middle of the page.
	 */
	.sk-about__main {
		border-right: 0;
		border-bottom: 1px solid var(--sk-line);
	}

	.sk-masonry {
		columns: 3;
	}
}

/* -------------------------------------------------------------------------
   Below 900 — mobile
   ---------------------------------------------------------------------- */

@media (max-width: 899px) {

	:root {
		--sk-nav-h: 68px;
	}

	body.is-scrolled {
		--sk-nav-h: 62px;
	}

	/* Awards stack: year, then title block, then film. */
	.sk-row--award {
		grid-template-columns: 1fr;
	}

	.sk-award__year {
		font-size: clamp(38px, 12vw, 62px);
	}

	/* Search results lose the meta column and the arrow. */
	.sk-result {
		grid-template-columns: 58px 1fr;
	}

	.sk-result__meta,
	.sk-result__arrow {
		display: none;
	}

	.sk-lightbox__bar {
		padding: 16px 20px;
	}

	.sk-lightbox__caption {
		display: none;
	}

	.sk-footer__base {
		justify-content: flex-start;
	}

	/* The list view drops its meta column, keeping year + title + arrow. */
	.sk-listrow {
		grid-template-columns: 58px 1fr 20px;
	}

	.sk-listrow__meta {
		display: none;
	}

	.sk-dimension {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.sk-pagehead__intro {
		max-width: none;
	}
}

/* -------------------------------------------------------------------------
   Below 700 — the identity band's two body columns become one
   ---------------------------------------------------------------------- */

@media (max-width: 699px) {

	.sk-identity__body {
		grid-template-columns: 1fr;
	}

	.sk-featured__actions .sk-btn,
	.sk-hero__actions .sk-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.sk-newsitem__link {
		grid-template-columns: 1fr 76px;
	}
}

/* -------------------------------------------------------------------------
   Below 620 — the tightest tier
   ---------------------------------------------------------------------- */

@media (max-width: 619px) {

	.sk-gallery-strip,
	.sk-gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.sk-tvc-grid {
		grid-template-columns: 1fr;
	}

	.sk-upcoming-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}

	.sk-factgrid {
		grid-template-columns: 1fr 1fr;
	}

	.sk-hero__stats {
		gap: 20px 28px;
	}

	.sk-share {
		gap: 12px;
	}

	.sk-masonry {
		columns: 2;
	}

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

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

	.sk-newsgrid {
		grid-template-columns: 1fr;
	}

	/*
	 * A sticky filter bar plus a sticky header eats most of a phone screen,
	 * so on the smallest tier the bar scrolls away with the page.
	 */
	.sk-filterbar {
		position: static;
	}

	.sk-filterbar__tools {
		margin-left: 0;
	}
}

/* -------------------------------------------------------------------------
   Very small — 380 and below. Nothing may scroll horizontally.
   ---------------------------------------------------------------------- */

@media (max-width: 380px) {

	.sk-upcoming-grid {
		grid-template-columns: 1fr;
	}

	.sk-row--song {
		grid-template-columns: 26px 34px minmax(0, 1fr) 42px;
		gap: 10px;
	}

	.sk-footer__wordmark {
		font-size: 44px;
	}
}

/* -------------------------------------------------------------------------
   Wide screens — hold the composition rather than letting it sprawl
   ---------------------------------------------------------------------- */

@media (min-width: 1921px) {

	:root {
		--sk-max: 1600px;
	}
}

/* -------------------------------------------------------------------------
   Print — the archive should print as a readable document
   ---------------------------------------------------------------------- */

@media print {

	.sk-header,
	.sk-footer,
	.sk-grain,
	.sk-curtain,
	.sk-menu,
	.sk-search,
	.sk-video,
	.sk-lightbox,
	.sk-railnav,
	.sk-hero__scroll {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	.sk-main {
		padding-top: 0;
	}

	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 10px;
	}
}