/* ==========================================================================
   Responsive composition
   --------------------------------------------------------------------------
   Loaded last so these media queries win at equal specificity.

   Tablet and mobile are not the desktop layout scaled down; they are a
   different arrangement of the same parts, and the switch happens where the
   layout can no longer hold a centred list with a filter beside it.

   WIDE (>=901px)    filter left, list centred, image full bleed behind.

   NARROW (<=900px)  the list would sit on top of the photograph, so the image
                     becomes a fixed band across the top and the list scrolls
                     on solid ink beneath it. The band stays put while the
                     list scrolls, so activating a project near the bottom
                     still shows its image.

   Both are locked to the viewport with the list scrolling inside itself, so
   in neither case can the detail block or the VIEW PROJECT action fall below
   a fold, and in neither case can list type cross a bright part of an image.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Narrow: tablet portrait and phones
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	:root {
		/* Capped so a short landscape viewport keeps room for the list. */
		--nsn-band: min(40svh, 400px);
	}

	/* The stage becomes a band pinned to the top of the viewport. */
	.nsn-stage {
		height: var(--nsn-band);
		bottom: auto;
		border-bottom: 1px solid var(--nsn-bone-14);
	}

	.nsn-stage__scrim {
		background-image: linear-gradient(
			to bottom,
			rgba(15, 15, 14, 0.80) 0%,
			rgba(15, 15, 14, 0.12) 34%,
			rgba(15, 15, 14, 0.26) 74%,
			rgba(15, 15, 14, 0.86) 100%
		);
	}

	.nsn-stage__img {
		object-position: center 38%;
	}

	/* The header sits on the image here, so it carries a stronger scrim. */
	.nsn-header {
		background: linear-gradient(
			to bottom,
			rgba(15, 15, 14, 0.92) 0%,
			rgba(15, 15, 14, 0.72) 52%,
			rgba(15, 15, 14, 0) 100%
		);
	}

	.nsn-work__inner {
		/* Clear the band. */
		padding-top: calc(var(--nsn-band) + var(--nsn-space-2));
	}

	/* The aside returns to the flow, above the list. */
	.nsn-work__body {
		flex-direction: column;
		gap: var(--nsn-space-2);
	}

	.nsn-work__aside {
		position: static;
		width: auto;
		flex: none;
		/* Slightly more than the body gap, so HEADER / FILTER / LIST read as
		   three separate zones rather than one stack. */
		gap: 1.25rem;
	}

	.nsn-work__head {
		display: flex;
		align-items: baseline;
		gap: var(--nsn-space-2);
	}

	.nsn-work__title {
		margin-bottom: 0;
		flex: none;
	}

	.nsn-work__intro,
	.nsn-work__intro p {
		/* One line at most: vertical space belongs to the projects here. */
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nsn-work__center {
		width: 100%;
		flex: 1;
		min-height: 0;
	}

	/* The filter goes back to a horizontal index. */
	.nsn-filters {
		border-bottom: 1px solid var(--nsn-rule);
		padding-top: 0.7rem;
		padding-bottom: 0.62rem;
		/* Scrolls inside itself so the page never scrolls sideways. */
		overflow-x: auto;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.nsn-filters::-webkit-scrollbar {
		display: none;
	}

	.nsn-filters__list {
		flex-direction: row;
		gap: clamp(1rem, 3vw, 2rem);
		padding-right: var(--nsn-gutter);
	}

	.nsn-filter {
		width: auto;
		white-space: nowrap;
		padding: 0.2rem 0;
	}

	.nsn-filter::before {
		display: none;
	}

	.nsn-filter.is-active {
		padding-left: 0;
	}

	/* Touch: the active row is marked by a rule, not by a hover shift. */
	.nsn-list__link {
		grid-template-columns: 2.25rem minmax(0, 1fr);
		transition: padding-left var(--nsn-dur) var(--nsn-ease);
	}

	.nsn-list__item.is-active {
		box-shadow: inset 2px 0 0 var(--nsn-bone-46);
	}

	.nsn-list__item.is-active .nsn-list__link {
		transform: none;
		padding-left: 0.9rem;
	}
}

/* --------------------------------------------------------------------------
   Mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.nsn-header__toggle {
		display: inline-flex;
		position: relative;
		z-index: 61;
	}

	.nsn-nav {
		position: fixed;
		inset: 0;
		z-index: 55;
		display: grid;
		place-items: center;

		/*
		 * The panel scrolls when it is taller than the screen.
		 *
		 * It holds eleven links - five pages and the six WAT? categories shown
		 * open here - and on a short screen they do not all fit: 578px of menu
		 * in a 568px viewport on the smallest phone, and 599px in 320px with
		 * the same phone turned on its side. The overflow had nowhere to go, so
		 * the last categories were simply unreachable. The centred row starts
		 * at the top once it overflows, so nothing is ever above the scroll
		 * either - only the tail needed a way down to it.
		 *
		 * overscroll-behavior keeps that scroll to itself, so reaching the end
		 * of the menu never starts scrolling the page underneath.
		 */
		overflow-y: auto;
		overscroll-behavior: contain;

		background: var(--nsn-ink);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--nsn-dur) var(--nsn-ease), visibility var(--nsn-dur);
	}

	.nsn-nav.is-open {
		opacity: 1;
		visibility: visible;
	}

	.nsn-nav__list {
		flex-direction: column;
		align-items: center;
		gap: var(--nsn-space-3);
	}

	.nsn-nav__link,
	.nsn-nav .menu-item > a {
		font-size: var(--nsn-step-lg);
		letter-spacing: 0.12em;
		color: var(--nsn-bone);
	}
}

/* --------------------------------------------------------------------------
   Phones
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	:root {
		--nsn-header-h: 62px;
		--nsn-band: min(34svh, 320px);
	}

	.nsn-work__inner {
		padding-top: calc(var(--nsn-band) + 0.8rem);
	}

	.nsn-work__inner {
		padding-bottom: var(--nsn-space-2);
	}

	.nsn-list__title {
		font-size: clamp(1.35rem, 6.4vw, 1.9rem);
	}

	.nsn-list__link {
		grid-template-columns: 1.9rem minmax(0, 1fr);
		padding: 0.6rem 0;
	}

	.nsn-detail {
		gap: var(--nsn-space-2);
		margin-top: 0.75rem;
		padding-top: 0.75rem;
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	.nsn-detail__eyebrow {
		font-size: 0.625rem;
		letter-spacing: 0.1em;
	}

	.nsn-detail__cta {
		padding: 0.65rem 0.95rem;
		letter-spacing: 0.14em;
	}

	.nsn-home {
		justify-content: flex-start;
		gap: var(--nsn-space-5);
	}

	.nsn-hero__line--indent {
		padding-left: 0;
	}

	.nsn-footer__inner {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Short narrow viewports: the band must not eat the list.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (max-height: 640px) {
	:root {
		--nsn-band: 30svh;
	}

	.nsn-work__intro {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Coarse pointers of any size
   --------------------------------------------------------------------------
   Hover is simulated unreliably on touch, so the touch treatment is bound to
   the input type rather than to a width.
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.nsn-list__item.is-active .nsn-list__link {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Print: strip the interaction, keep the content.
   -------------------------------------------------------------------------- */
@media print {
	.nsn-stage,
	.nsn-loader,
	.nsn-header__toggle,
	.nsn-detail__cta {
		display: none !important;
	}

	body,
	body.nsn-is-work {
		background: #fff;
		color: #000;
		overflow: visible;
	}

	.nsn-work {
		height: auto;
		overflow: visible;
	}

	.nsn-work__scroll {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.nsn-list__title,
	.nsn-list__subtitle,
	.nsn-list__index {
		color: #000 !important;
		opacity: 1 !important;
	}
}