/* ==========================================================================
   Blog article
   --------------------------------------------------------------------------
   Two columns, edge to edge: the pictures on the left as one unbroken stream,
   the article on the right. Only the pictures are pinned - the writing scrolls
   the page normally, which is what makes the page as long as the article and
   nothing else.

   Everything is scoped to .nsn-blog, which only single.php's ordinary-post
   branch prints, so no rule here can reach the Journal, Work or a page.
   ========================================================================== */

.nsn-blog {
	/*
	 * Where the columns start. The header is fixed and paints over the page,
	 * so the composition begins below it; left and right have no inset at all.
	 */
	--nsn-blog-top: calc(var(--nsn-header-h) + clamp(0.75rem, 1.8vh, 1.5rem));

	/* The only padding on this page: inside the reading column. */
	--nsn-blog-inset: clamp(1.5rem, 3.4vw, 4rem);

	position: relative;
	background: var(--nsn-ink);
	color: var(--nsn-bone);

	/*
	 * Deliberately not overflow: hidden - the picture column is sticky, and an
	 * ancestor that clips becomes its scroll container, which would pin it to
	 * this box instead of to the viewport.
	 */
}

/*
 * base.css sets overflow-x: hidden on the body, which makes the body a scroll
 * container and disables sticky page-wide. clip does the same job without that
 * side effect, scoped to this template's body class.
 */
body.single-post {
	overflow-x: clip;
}

/*
 * The header needs a solid ground on this route, and only on this route.
 *
 * It normally paints a gradient that fades to nothing, which works because
 * every other page is dark all the way down. Here the article runs on bone, and
 * once it scrolls up behind the header the bone navigation lands on a pale
 * panel and all but disappears. An opaque band keeps the labels legible; at the
 * top of the page it is ink on ink and cannot be seen at all.
 *
 * Written here rather than in header.css so nothing outside the blog changes.
 */
body.single-post .nsn-header {
	background: var(--nsn-ink);
}

.nsn-blog__article {
	margin: 0;
}

.nsn-blog__runway {
	position: relative;
}

/* --------------------------------------------------------------------------
   The two columns

   Full bleed and gutterless: no max-width, no auto margins, no padding-inline
   and no grid gap, so the pictures run to the left edge of the screen and the
   reading column runs to the right edge, meeting on a single seam down the
   middle.
   -------------------------------------------------------------------------- */
.nsn-blog__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;

	width: 100%;
	max-width: none;
	margin: var(--nsn-blog-top) 0 0;
	padding: 0;

	/* Each column takes its own height; the tall one sets the page. */
	align-items: start;
}

.nsn-blog__col {
	position: relative;
	min-width: 0;
}

/* --- left: pinned, and the only thing that moves --- */
.nsn-blog__col--visual {
	/* Clips its own track, so the stream never spills past the band. */
	overflow: hidden;
}

.nsn-blog.is-running .nsn-blog__col--visual {
	position: sticky;
	top: var(--nsn-blog-top);
	height: calc(100svh - var(--nsn-blog-top));
}

.nsn-blog__track {
	will-change: transform;
}

/*
 * The picture stream.
 *
 * No margin, no gap, no border, no inline-box gap - one photograph ends where
 * the next begins. display: block on the image is what removes the baseline
 * gap an inline <img> would otherwise leave under itself, which is the usual
 * cause of thin seams in a stack like this.
 */
.nsn-blog__figure {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;
	line-height: 0;
}

.nsn-blog__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border: 0;
	vertical-align: bottom;
}

.nsn-blog__caption {
	padding: 0.75rem var(--nsn-blog-inset) 1.25rem;
	font-size: var(--nsn-step-xs);
	line-height: 1.4;
	letter-spacing: 0.04em;
	color: var(--nsn-bone-46);
}
/* --------------------------------------------------------------------------
   Right: a dark masthead, then the reading on light ground

   Two bands, both in ordinary document flow. Never sticky, never clipped,
   never transformed - the script does not touch this column at all.
   -------------------------------------------------------------------------- */

/*
 * The masthead.
 *
 * Its height is handed over by the script as --nsn-blog-hero-h, measured from
 * the featured image opposite, so the two columns change over on exactly the
 * same line. The fallback is the height a 3:2 photograph takes at half the
 * viewport, which is close enough that a no-script page still reads correctly.
 *
 * min-height rather than height: a long title or standfirst is allowed to make
 * it taller, and nothing is ever cut off.
 */
.nsn-blog__hero {
	display: flex;
	flex-direction: column;
	min-height: var(--nsn-blog-hero-h, 33vw);
	padding: var(--nsn-blog-inset);

	background: var(--nsn-ink);
	color: var(--nsn-bone);
}

.nsn-blog__hero-head {
	/* Nothing here stretches; the byline below takes the slack. */
	flex: 0 0 auto;
}

.nsn-blog__eyebrow {
	margin: 0 0 clamp(0.75rem, 2vh, 1.25rem);
	font-size: var(--nsn-step-xs);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

.nsn-blog__eyebrow a {
	color: inherit;
	text-decoration: none;
}

.nsn-blog__eyebrow a:hover,
.nsn-blog__eyebrow a:focus-visible {
	color: var(--nsn-bone);
}

.nsn-blog__title {
	margin: 0;
	font-size: clamp(2rem, 1rem + 2.4vw, 3.5rem);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--nsn-bone);
}

.nsn-blog__standfirst {
	margin: clamp(0.75rem, 2vh, 1.25rem) 0 0;
	max-width: 42ch;
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--nsn-bone-72);
}

/*
 * The byline, pushed to the foot of the masthead by the auto margin - so it
 * lands just above the line where the featured image ends, whatever height the
 * title happens to take.
 */
.nsn-blog__meta {
	margin: clamp(2rem, 6vh, 4rem) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 2rem;
	margin-top: auto;
}

.nsn-blog__meta-row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.nsn-blog__meta-label {
	margin: 0;
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.06em;
	color: var(--nsn-bone-46);
}

.nsn-blog__meta-value {
	margin: 0;
	font-size: var(--nsn-step-sm);
	color: var(--nsn-bone-72);
}

/* --------------------------------------------------------------------------
   The reading

   Light ground with dark type, which is what separates looking from reading -
   the masthead above it stays dark, and the change of ground marks where the
   article begins. Bone rather than pure white, so the page stays inside the
   site's own two colours.
   -------------------------------------------------------------------------- */
.nsn-blog__body {
	padding: clamp(2rem, 4vh, 3.5rem) var(--nsn-blog-inset) clamp(3rem, 9vh, 7rem);

	background: var(--nsn-bone);
	color: #2B2A27;

	font-size: var(--nsn-step-md);
	line-height: 1.7;
}

.nsn-blog__body > * {
	max-width: 64ch;
}

.nsn-blog__body > * + * {
	margin-top: 1.2em;
}

.nsn-blog__body h2 {
	margin: clamp(2rem, 4.5vh, 3rem) 0 0.5em;
	font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--nsn-ink);
}

.nsn-blog__body h3 {
	margin: clamp(1.5rem, 3.4vh, 2.25rem) 0 0.4em;
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
	font-weight: 700;
	color: var(--nsn-ink);
}

.nsn-blog__body strong {
	color: var(--nsn-ink);
	font-weight: 700;
}

.nsn-blog__body a {
	color: var(--nsn-ink);
	text-underline-offset: 0.2em;
}

.nsn-blog__body blockquote {
	margin-inline: 0;
	padding-left: 1.25rem;
	border-left: 2px solid rgba(15, 15, 14, 0.2);
	color: var(--nsn-ink);
}

/* --------------------------------------------------------------------------
   Tablet: the two columns hold, the reading column gives up some padding.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.nsn-blog {
		--nsn-blog-inset: clamp(1rem, 2.6vw, 2rem);
	}

	.nsn-blog__body {
		font-size: var(--nsn-step-sm);
	}
}

/* --------------------------------------------------------------------------
   Phone

   One column, standing still, in reading order: the pictures, then the
   category, the title, who wrote it and when, and then the article.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.nsn-blog {
		--nsn-blog-inset: var(--nsn-gutter);
	}

	.nsn-blog__cols,
	.nsn-blog.is-running .nsn-blog__cols {
		display: block;
		height: auto;
	}

	.nsn-blog__col--visual,
	.nsn-blog.is-running .nsn-blog__col--visual {
		position: static;
		height: auto;
		overflow: visible;
	}

	.nsn-blog__track {
		/* Whatever the script last wrote is irrelevant at this width. */
		transform: none !important;
		will-change: auto;
	}

	/*
	 * The masthead is only as tall as its own contents here. Matching the
	 * featured image is a two-column idea; stacked, it would just be a long
	 * dark gap between the pictures and the reading.
	 */
	.nsn-blog__hero {
		min-height: 0;
		padding-block: clamp(1.75rem, 7vw, 2.75rem);
	}

	.nsn-blog__meta {
		margin-top: clamp(1.5rem, 6vw, 2.25rem);
	}

	.nsn-blog__body > * {
		max-width: none;
	}
}

/* --------------------------------------------------------------------------
   Reduced motion: the same static page, at any width.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nsn-blog__col--visual,
	.nsn-blog.is-running .nsn-blog__col--visual {
		position: static;
		height: auto;
		overflow: visible;
	}

	.nsn-blog__track {
		transform: none !important;
		will-change: auto;
	}
}