/* ==========================================================================
   Journal — index and article
   --------------------------------------------------------------------------
   The Journal reads on the site's ink, like the rest of the site, with the
   photography carrying the colour. Everything below is driven by the tokens in
   this first block: the two palette values, one accent, and a type scale that
   is deliberately smaller than the display sizes the Work pages use, because
   this section is for reading rather than for looking.
   ========================================================================== */

.nsn-journal,
.nsn-journal-article {
	/* The section's ground and type. Change these two and the rest follows. */
	--nsn-journal-bg: var(--nsn-ink);
	--nsn-journal-fg: var(--nsn-bone);

	/*
	 * The one colour on the site that is not ink or bone. It exists for a
	 * single job - telling a reader which title they are about to open - so
	 * it is warm enough to register instantly against bone without turning
	 * the page into a second brand.
	 */
	--nsn-journal-accent: #E2B04A;

	/*
	 * Type. The index title is the loudest thing in the section and it is
	 * still well under the Work display sizes; the article steps down from
	 * there. Every size is fluid, so nothing has to be corrected per
	 * breakpoint and nothing can wrap or collide at a size in between.
	 */
	--nsn-journal-index-title: clamp(1.625rem, 1rem + 1.9vw, 2.5rem);
	--nsn-journal-title:       clamp(1.875rem, 1.1rem + 2.6vw, 3rem);
	--nsn-journal-intro:       clamp(1rem, 0.95rem + 0.35vw, 1.25rem);
	--nsn-journal-body:        clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	--nsn-journal-sub:         clamp(1.125rem, 1rem + 0.55vw, 1.5rem);

	/* The lift under the floating close control. */
	--nsn-journal-lift: 0 4px 18px rgba(0, 0, 0, 0.5);

	/* The article column. The feature image, the gallery and the next
	   article all share these edges. */
	--nsn-journal-col: min(1320px, calc(100vw - var(--nsn-gutter) * 2));

	/* Long-form measure. Wide enough to feel editorial, narrow enough to read. */
	--nsn-measure: 72ch;

	position: relative;
	background: var(--nsn-journal-bg);
	color: var(--nsn-journal-fg);
}

/* ==========================================================================
   Index
   ========================================================================== */

/*
 * The list starts near the top of the page. There is no heading over it to
 * push it down - only the header to clear, and enough air under that for the
 * first title to read as the start of a list rather than as part of the bar.
 */
.nsn-journal__inner {
	max-width: var(--nsn-maxw);
	margin: 0 auto;
	padding: calc(var(--nsn-header-h) + var(--nsn-space-3)) var(--nsn-gutter) var(--nsn-space-5);
}

/*
 * The standfirst only. The page name is set for the document outline and is
 * not drawn, so this block exists solely when the client has written an
 * introduction - and with the field empty there is no box here at all, and no
 * margin under one.
 */
.nsn-journal__head {
	max-width: var(--nsn-measure);
	margin: 0 auto var(--nsn-space-4);
	text-align: center;
}

.nsn-journal__standfirst {
	color: var(--nsn-bone-46);
}

.nsn-journal__empty {
	margin: var(--nsn-space-5) auto;
	text-align: center;
	color: var(--nsn-bone-46);
	font-size: var(--nsn-step-lg);
}

.nsn-journal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
}

.nsn-journal__item + .nsn-journal__item {
	border-top: 1px solid var(--nsn-rule);
}

/*
 * The whole row is the link, so there is one target and one focus stop for
 * every article rather than a title and a date competing for the same click.
 *
 * Its padding is the whole of the space between one title and the next, so
 * the row is as tall as the type in it and no taller. Nothing is positioned
 * per item: a title that wraps to two lines simply takes two lines.
 */
.nsn-journal__link {
	display: block;
	padding: clamp(1.15rem, 2.2vw, 1.9rem) 0;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

/*
 * No category or date above the title: the row is the title and nothing else,
 * so there is no metadata rule here and no empty space where one used to be.
 * Both still appear on the article's own page.
 */
.nsn-journal__title {
	display: block;
	max-width: 22ch;
	margin: 0 auto;
	font-size: var(--nsn-journal-index-title);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--nsn-bone-72);
	transition: color var(--nsn-dur) var(--nsn-ease);
}

/*
 * Hover and focus get the same treatment, deliberately. A colour that only
 * appears under a pointer would leave a keyboard reader with nothing, and the
 * outline alone does not say "this is the one you are about to open" the way a
 * warmed title does.
 */
.nsn-journal__link:hover .nsn-journal__title,
.nsn-journal__link:focus-visible .nsn-journal__title {
	color: var(--nsn-journal-accent);
}

.nsn-journal__link:focus-visible {
	outline: 2px solid var(--nsn-bone);
	outline-offset: -8px;
}

/* --------------------------------------------------------------------------
   Reveal. Only armed once JavaScript is present, so without it every title is
   simply visible from the start.
   -------------------------------------------------------------------------- */
html.nsn-js .nsn-journal__item {
	opacity: 0;
}

html:not(.nsn-js) .nsn-journal__item,
html.nsn-reduced-motion .nsn-journal__item,
.nsn-journal__item.is-revealed {
	opacity: 1;
}

/* ==========================================================================
   Article
   ========================================================================== */

.nsn-journal-article {
	--nsn-rail-w: clamp(54px, 5vw, 76px);
}

/*
 * The article is one column with three widths inside it: the measure, for
 * anything that is read; the column, for anything that is looked at; and the
 * full width of the page, which only the feature image takes.
 *
 * A grid rather than a max-width box, so that image can be handed the outer
 * track and reach both edges of the page without vw units. 100vw counts the
 * scrollbar, which would sit the image a few pixels left of centre and crop
 * its right edge; a track resolves against the width the page actually has.
 * The middle track is the column every other child sits in, and it computes
 * to exactly the width the max-width box gave them.
 */
.nsn-article {
	display: grid;
	grid-template-columns:
		[full-start] 1fr
		[col-start] min(var(--nsn-journal-col), 100%)
		[col-end] 1fr
		[full-end];
	margin: 0 auto;
	padding: calc(var(--nsn-header-h) + var(--nsn-space-4)) 0 var(--nsn-space-5);
}

.nsn-article > * {
	grid-column: col;
}

/*
 * The hero reads from the left edge of the column: title, then the line under
 * it, on one axis rather than balanced about a centre. The measure still caps
 * it, so a long title wraps into a block of type instead of one long line.
 */
.nsn-article__head {
	max-width: var(--nsn-measure);
	margin: 0 0 var(--nsn-space-4);
	text-align: left;
}

.nsn-article__meta {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	gap: var(--nsn-space-2);
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

.nsn-article__category::after {
	content: '';
	display: inline-block;
	width: 1px;
	height: 0.8em;
	margin-left: var(--nsn-space-2);
	vertical-align: -0.05em;
	background: var(--nsn-bone-28);
}

.nsn-article__title {
	margin-top: var(--nsn-space-2);
	font-size: var(--nsn-journal-title);
	line-height: 1.02;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--nsn-bone);
}

.nsn-article__intro {
	margin: var(--nsn-space-3) 0 0;
	max-width: 56ch;
	font-size: var(--nsn-journal-intro);
	line-height: 1.5;
	color: var(--nsn-bone-72);
}

/*
 * Words of the intro, and only while it is arriving. The entrance wraps them,
 * moves them, and unwraps them again; inline-block is here so a transform
 * applies to them at all, and nothing else is, so the line they make is the
 * line the paragraph already had.
 */
.nsn-article__word {
	display: inline-block;
}

/* --- share --- */
.nsn-article__share {
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--nsn-space-2);
	margin-top: var(--nsn-space-3);
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/*
 * The quietest step in the scale is too quiet for 13px type on a light
 * ground - it measured 3.9:1 against cream. This is metadata like any other
 * label on the page, so it takes the metadata tint and clears AA at 5.1:1.
 */
.nsn-article__share-label {
	color: var(--nsn-bone-46);
}

.nsn-article__share-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nsn-space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.nsn-article__share-link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--nsn-bone-72);
	text-decoration: none;
	cursor: pointer;
	border-bottom: 1px solid var(--nsn-bone-28);
	transition: color var(--nsn-dur-fast) var(--nsn-ease), border-color var(--nsn-dur-fast) var(--nsn-ease);
}

.nsn-article__share-link:hover,
.nsn-article__share-link:focus-visible {
	color: var(--nsn-bone);
	border-color: var(--nsn-bone);
}

/* --------------------------------------------------------------------------
   Feature image

   The one full-width thing on the page: it takes the grid's outer track, so
   it reaches both edges of the page at every width while everything around it
   stays in the column. Nothing here uses a transform to get there - the
   entrance animates transform and hands it back with clearProps, which would
   undo a layout that depended on one.

   The intrinsic width and height attributes are left to do their work, so the
   image keeps its own aspect ratio and reserves its own space before it loads.
   -------------------------------------------------------------------------- */
.nsn-article__feature {
	grid-column: full;
	width: 100%;
	max-width: none;
	margin: 0 0 var(--nsn-space-4);
}

/*
 * height:auto with the intrinsic width/height attributes keeps the image at
 * its own ratio - it is never cropped to a shape the layout chose for it.
 */
.nsn-article__feature-img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * The feature runs edge to edge; its caption does not - it is read, so it
 * keeps the column the rest of the type sits in and starts on the same left
 * edge as the title above it.
 */
.nsn-article__feature .nsn-article__caption {
	max-width: var(--nsn-journal-col);
	margin-left: auto;
	margin-right: auto;
}

.nsn-article__caption,
.nsn-grid__caption {
	margin-top: 0.6rem;
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

/* --- body --- */
.nsn-article__body {
	max-width: var(--nsn-measure);
	margin: 0 auto;
	font-size: var(--nsn-journal-body);
	line-height: 1.75;
	color: var(--nsn-bone-72);
}

.nsn-article__gallery {
	margin-top: var(--nsn-space-5);
}

/* --- next --- */
.nsn-article__next {
	max-width: var(--nsn-journal-col);
	margin: var(--nsn-space-5) auto 0;
	border-top: 1px solid var(--nsn-rule);
}

.nsn-article__next-link {
	display: block;
	padding: var(--nsn-space-4) 0;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.nsn-article__next-eyebrow,
.nsn-article__next-meta {
	display: block;
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

.nsn-article__next-title {
	display: block;
	margin: var(--nsn-space-2) auto 0.6rem;
	max-width: 24ch;
	font-size: var(--nsn-journal-sub);
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--nsn-bone-72);
	transition: color var(--nsn-dur-fast) var(--nsn-ease);
}

.nsn-article__next-arrow {
	display: inline-block;
	margin-top: var(--nsn-space-2);
	color: var(--nsn-bone-46);
	transition: transform var(--nsn-dur-fast) var(--nsn-ease), color var(--nsn-dur-fast) var(--nsn-ease);
}

.nsn-article__next-link:hover .nsn-article__next-title,
.nsn-article__next-link:focus-visible .nsn-article__next-title {
	color: var(--nsn-journal-accent);
}

.nsn-article__next-link:hover .nsn-article__next-arrow,
.nsn-article__next-link:focus-visible .nsn-article__next-arrow {
	transform: translateX(8px);
	color: var(--nsn-bone);
}

/* --------------------------------------------------------------------------
   Editor content. Whatever the client writes has to look right without them
   thinking about it, so the standard blocks are styled here rather than left
   to the browser.
   -------------------------------------------------------------------------- */
.nsn-prose > * + * {
	margin-top: 1.2em;
}

.nsn-prose h2,
.nsn-prose h3,
.nsn-prose h4 {
	margin-top: 2em;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--nsn-bone);
}

.nsn-prose h2 {
	font-size: var(--nsn-journal-sub);
	text-transform: uppercase;
}

.nsn-prose h3 {
	font-size: calc(var(--nsn-journal-body) * 1.22);
}

.nsn-prose h4 {
	font-size: var(--nsn-journal-body);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nsn-bone-72);
}

.nsn-prose a {
	color: var(--nsn-bone);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--nsn-bone-38);
	transition: text-decoration-color var(--nsn-dur-fast) var(--nsn-ease);
}

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

.nsn-prose strong {
	color: var(--nsn-bone);
	font-weight: 600;
}

.nsn-prose em {
	font-style: italic;
}

.nsn-prose ul,
.nsn-prose ol {
	padding-left: 1.4em;
}

.nsn-prose li + li {
	margin-top: 0.5em;
}

.nsn-prose blockquote {
	margin-left: 0;
	margin-right: 0;
	padding-left: var(--nsn-space-3);
	border-left: 1px solid var(--nsn-bone-28);
	font-size: var(--nsn-journal-sub);
	line-height: 1.45;
	color: var(--nsn-bone);
}

.nsn-prose blockquote cite {
	display: block;
	margin-top: var(--nsn-space-2);
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.16em;
	font-style: normal;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

.nsn-prose code {
	padding: 0.15em 0.4em;
	background: var(--nsn-bone-08);
	font-size: 0.9em;
}

.nsn-prose pre {
	padding: var(--nsn-space-2);
	overflow-x: auto;
	background: var(--nsn-bone-08);
}

.nsn-prose hr {
	margin: var(--nsn-space-4) 0;
	border: 0;
	border-top: 1px solid var(--nsn-rule);
}

/*
 * Editor images and embeds may be wider than the measure, so they are allowed
 * to break out to the article width while the text stays readable.
 */
.nsn-prose :where(img, figure, .wp-block-image, .wp-block-embed, .wp-block-gallery) {
	max-width: 100%;
	height: auto;
}

.nsn-prose figure {
	margin-left: 0;
	margin-right: 0;
}

.nsn-prose figcaption {
	margin-top: 0.6rem;
	font-size: var(--nsn-step-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nsn-bone-46);
}

.nsn-prose .alignwide,
.nsn-prose .alignfull {
	width: 100%;
	max-width: var(--nsn-journal-col);
	margin-left: 50%;
	transform: translateX(-50%);
}

/* ==========================================================================
   Article entrance. Same idea as the Work detail page: nothing animates until
   the loader curtain has lifted.
   ========================================================================== */
/*
 * The pieces, not the block. The hero enters a part at a time - the line of
 * metadata, the title, the intro, the share row, then the image - so each one
 * has to be able to start on its own.
 */
html.nsn-js .nsn-article__head > *,
html.nsn-js .nsn-article__feature {
	opacity: 0;
}

html:not(.nsn-js) .nsn-article__head > *,
html:not(.nsn-js) .nsn-article__feature,
html.nsn-reduced-motion .nsn-article__head > *,
html.nsn-reduced-motion .nsn-article__feature,
.nsn-journal-article.is-entered .nsn-article__head > *,
.nsn-journal-article.is-entered .nsn-article__feature {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.nsn-journal__item,
	.nsn-article__head > *,
	.nsn-article__feature {
		opacity: 1 !important;
		transform: none !important;
	}

	.nsn-article__next-arrow {
		transition-duration: 0.01ms;
	}
}

/* ==========================================================================
   The close control

   It sits over whatever happens to be scrolling underneath it, and now that
   the feature image runs the full width of the column that is usually a
   photograph. A 1.5px ring in bone is legible over the page's ink and almost
   invisible over a bright image, which is what made it look as though the
   image was on top of it - it was never behind it, it just could not be seen.

   So it carries its own ground, the same way the site header does rather than
   relying on what is behind it. Nothing is laid over the image and the image
   is untouched.

   The z-index is stated here rather than inherited so the intent is explicit:
   above every part of the article, below the site header at 60. No ancestor in
   the Journal templates creates a stacking context, so this is the value that
   actually applies.
   ========================================================================== */
.nsn-rail--journal {
	z-index: 55;

	/*
	 * No ground of its own. The rail arrives from the Work detail page as a
	 * full-height column of ink, and now that the feature image runs the
	 * whole width of the page that column stood over its left edge as a
	 * black band. The button below carries its own ink and its own shadow,
	 * which is what makes it legible over a photograph - the column was
	 * never what did that.
	 */
	background: none;
}

.nsn-rail--journal .nsn-rail__close {
	background: var(--nsn-journal-bg);
	border-radius: 50%;
	box-shadow: var(--nsn-journal-lift);
}

/* ==========================================================================
   Narrow viewports

   The article is one centred column at every width, so the only thing that
   has to move is the rail: a fixed control in the left gutter has no gutter
   to sit in on a phone, and it landed on top of the article's own metadata.
   It becomes a floating control at the foot of the screen instead, where it
   is easy to reach and out of the way of the text.
   ========================================================================== */
@media (max-width: 900px) {
	.nsn-journal-article {
		--nsn-rail-w: 0px;
	}

	.nsn-rail--journal {
		left: var(--nsn-gutter);
		right: auto;
		top: auto;
		bottom: calc(var(--nsn-space-3) + env(safe-area-inset-bottom, 0px));
		width: auto;

		/*
		 * ...and nothing but the control.
		 *
		 * The rail arrives here as the project page's full-height ink column:
		 * an opaque ground, and the padding that holds its controls clear of
		 * the header. Moved to the corner as a small floating button, both are
		 * left over - a block of opaque ink 44px wide and 194px tall with only
		 * its bottom 44px carrying anything at all.
		 *
		 * Over the article that is invisible, because the article is ink too.
		 * Over the footer it was not: it painted across the second row of links
		 * and WAAROM? read as OM?, with the year gone from the line below it.
		 * The control carries its own round ground, so the column's is dropped
		 * and the box closes down to the button it actually is.
		 *
		 * display too: the column is a three-row grid that centres its controls
		 * between two free rows, and those rows kept half the box empty below
		 * the button - which held the button 44px off the corner it is anchored
		 * to, and put it over the last line of the footer instead of beside it.
		 */
		display: block;
		padding: 0;
		background: none;
	}

	.nsn-article {
		/*
		 * No side padding: the grid's outer tracks are the gutter here, and
		 * padding would inset the feature image from the edges it is meant to
		 * reach.
		 */
		padding-left: 0;
		padding-right: 0;

		/* Room for the floating close control at the end of the article. */
		padding-bottom: calc(var(--nsn-space-5) + 4rem);
	}

	.nsn-article__next {
		max-width: none;
	}

	.nsn-journal__inner {
		padding-top: calc(var(--nsn-header-h) + var(--nsn-space-2));
	}

	/*
	 * Long single words - and these titles are set large - must break rather
	 * than push the page sideways.
	 */
	.nsn-journal__title,
	.nsn-article__title {
		max-width: none;
		overflow-wrap: anywhere;
	}

	/*
	 * The footer has to clear the close control too.
	 *
	 * The article above already reserves room for it, but the footer did not,
	 * and the ring is fixed to the foot of the screen: at the end of the page
	 * it sat on top of the footer, covering WIE? completely and cutting into
	 * WAAROM? and the line beneath it. Reduced to the button above, the control
	 * stands 72px up from the bottom edge, so a little over that is kept clear
	 * and the footer's last line sits above it.
	 */
	body.single-nsn_journal .nsn-footer {
		padding-bottom: calc(var(--nsn-space-4) + 2rem + env(safe-area-inset-bottom, 0px));
	}
}

/* ==========================================================================
   The article's composition

   The article is laid out from here: where its type sits, how large it is set
   and how the hero is divided. The section's palette is not touched - the
   article draws on the ink and bone of the block at the top of this file, the
   same ground the index and the rest of the site use.

   This section comes last on purpose. A media query adds no specificity, so
   anything here would beat the narrow-viewport block above it at the same
   weight; the narrow rules this section needs are therefore repeated at the
   end of it rather than left up there.
   ========================================================================== */

.nsn-journal-article {
	/*
	 * The hero's composition.
	 *
	 * Three tracks, not three magic numbers: the type starts well inside the
	 * column, holds an editorial measure, and the share block takes whatever
	 * is left on the right. Every one of them is fluid, so the arrangement is
	 * the same shape at 1100px as at 1600px and nothing has to be corrected
	 * per breakpoint.
	 */
	--nsn-article-indent:   clamp(0px, 13vw, 210px);
	--nsn-article-content:  clamp(280px, 44vw, 660px);
	--nsn-article-gap:      clamp(2rem, 4vw, 5rem);
	--nsn-article-hero-gap: clamp(2.25rem, 4vw, 4rem);

	/*
	 * A step down from the section's scale. The article title is a headline
	 * set over a paragraph, not a display line: at this size it sits in the
	 * same range as the type it introduces instead of over it.
	 */
	--nsn-journal-title: clamp(1.5rem, 1rem + 1.3vw, 2.125rem);
	--nsn-journal-intro: clamp(0.9375rem, 0.9rem + 0.28vw, 1.0625rem);
}

/*
 * A little less air over the hero, so the whole composition - and the picture
 * under it - starts higher up the first screen.
 */
.nsn-article {
	padding-top: calc(var(--nsn-header-h) + var(--nsn-space-3));
}

/* --------------------------------------------------------------------------
   Hero

   The head becomes the grid: an empty track to set the type in from the edge,
   the column it is read in, and the share block's own column beside it. The
   three pieces of type stack in the middle track in the order the template
   writes them; the share block stands alongside all three rather than under
   them, which is the one structural difference from the row it used to be.
   -------------------------------------------------------------------------- */
.nsn-article__head {
	display: grid;
	grid-template-columns:
		[indent] var(--nsn-article-indent)
		[content] minmax(0, var(--nsn-article-content))
		[share] minmax(0, 1fr);
	align-items: start;
	max-width: none;
	margin: 0 0 var(--nsn-article-hero-gap);
}

.nsn-article__meta,
.nsn-article__title,
.nsn-article__intro {
	grid-column: content;
}

.nsn-article__meta {
	letter-spacing: 0.16em;
}

.nsn-article__title {
	/*
	 * The headline is held narrower than the paragraph under it, so the two
	 * read as a block of type with a shape rather than as two full-width
	 * lines. It is a measure, not a line count: a longer title simply takes
	 * another line, and a shorter one takes fewer.
	 */
	max-width: 20ch;
	margin-top: clamp(0.5rem, 0.9vw, 0.85rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.nsn-article__intro {
	/* The column is its width - wider than the headline above it. */
	max-width: none;
	margin-top: clamp(1rem, 1.5vw, 1.5rem);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Share

   Its own column, stacked, starting at the top of the hero. The controls are
   the ones the template renders - the network, the mail link and the copy
   button JavaScript reveals - so what changes here is where they stand, not
   what they do.
   -------------------------------------------------------------------------- */
.nsn-article__share {
	grid-column: share;

	/*
	 * Spanning, so it stands beside the whole of the type rather than sitting
	 * in the first row and setting that row's height - which would push the
	 * title down by the difference. A span rather than 1 / -1: the grid has no
	 * explicit rows, so -1 resolves to the first line and the item stays in
	 * row one. Four covers the three pieces of type with a row to spare, and
	 * an unused implicit row has no height and no gap.
	 */
	grid-row: 1 / span 4;
	justify-self: end;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.75rem, 1.1vw, 1.05rem);
	margin-top: 0;

	/* Held off the column it stands next to, never overlapping it. */
	padding-left: var(--nsn-article-gap);
}

.nsn-article__share-list {
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(0.35rem, 0.5vw, 0.55rem);
}

/* --------------------------------------------------------------------------
   Narrow viewports

   One column. The three tracks are a desktop arrangement and there is no room
   for them on a phone, so the head goes back to normal flow and the share
   block sits under the text as a row.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.nsn-article__head {
		display: block;
	}

	/* As above the breakpoint: a long word breaks rather than the page. */
	.nsn-article__title {
		max-width: none;
	}

	.nsn-article__share {
		/*
		 * Back to the start of the column. Chrome honours justify-self on a
		 * block-level box as well as on a grid item, so without this the row
		 * keeps the right edge it was given above and shrinks to its content.
		 */
		justify-self: auto;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		margin-top: var(--nsn-space-3);
		padding-left: 0;
	}

	.nsn-article__share-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
	}
}

/* --------------------------------------------------------------------------
   The close control's word

   At rest the control is the circle and nothing else. Under a pointer the
   word arrives beside it, flickering on the way in the way the loading dots
   do - the same steps(1, end) idiom, so the site blinks in one language - and
   leaves quietly when the pointer does.

   It is laid out absolutely from the circle's own box, so it adds nothing to
   the control's size and nothing to the page's flow: the button keeps the
   position and the dimensions it has, and nothing around it moves. It takes
   no pointer events either, so the hit area is still the circle.
   -------------------------------------------------------------------------- */
.nsn-rail--journal .nsn-rail__label {
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-bottom: 10px;
	transform: translateX(-50%);

	/*
	 * Over the button, not beside it - and set to the rail's width rather
	 * than run across it. One line of this needs about 130px; the rail is
	 * 115px wide with the button centred in it, so a single line would lose
	 * its first characters off the edge of the screen. Wrapped and centred,
	 * it always fits, and the type is untouched: same size, same tracking,
	 * same colour, same fade.
	 */
	max-width: 88px;
	white-space: normal;
	text-align: center;

	/*
	 * A step under the smallest thing in the type scale. This is a caption on
	 * a control, not a line of the page - it has to read as smaller than the
	 * navigation as well as smaller than anything in the article.
	 */
	font-size: clamp(0.5625rem, 0.5rem + 0.15vw, 0.6875rem);
	line-height: 1.2;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--nsn-bone-72);

	opacity: 0;
	pointer-events: none;

	/*
	 * One transition, both ways: in as the pointer arrives, out as it leaves.
	 * Nothing steps and nothing repeats - the word fades up and then holds,
	 * for as long as it is wanted. var(--nsn-ease) is the site's own ease-out.
	 */
	transition: opacity 0.22s var(--nsn-ease);
	text-wrap: nowrap;
}

/*
 * Pointers only. A touch device has no hover to leave, and a word that
 * appeared on tap would either flash as the page turns or stay behind on a
 * control the reader has already used - so there it simply never appears, and
 * the control behaves exactly as it does now. Keyboard focus is deliberate in
 * the same way a pointer is, so it gets the word too.
 */
@media (hover: hover) {
	.nsn-rail--journal .nsn-rail__close:hover .nsn-rail__label {
		opacity: 1;
	}
}

/* Focus is not a pointer state, so it is not inside that query: a keyboard
   reader gets the word at any width. */
.nsn-rail--journal .nsn-rail__close:focus-visible .nsn-rail__label {
	opacity: 1;
}

/*
 * Reduced motion: the word still appears, it simply does not fade to get
 * there - it is there, and then it is not. The rest of the site treats motion
 * this way; the information is never what is taken away.
 */
/* --------------------------------------------------------------------------
   The cross turns

   A whole turn, on the cross alone: the circle it sits in, the ring around it
   and the word above it all stay where they are - only the glyph moves, and it
   ends where it started, so there is no state to be caught in. The two strokes
   are drawn by the pseudo-elements' own rotations, and turning their parent
   carries both without disturbing either.

   Going back out it simply runs the other way: a transition, not a one-shot,
   so a pointer that leaves mid-turn unwinds from wherever the cross had got to
   rather than jumping.
   -------------------------------------------------------------------------- */
.nsn-rail--journal .nsn-rail__x {
	transition: transform 0.6s var(--nsn-ease);
}

@media (hover: hover) {
	.nsn-rail--journal .nsn-rail__close:hover .nsn-rail__x {
		transform: rotate(360deg);
	}
}

/* Focus is not a pointer state, so it is not inside that query. */
.nsn-rail--journal .nsn-rail__close:focus-visible .nsn-rail__x {
	transform: rotate(360deg);
}

@media (prefers-reduced-motion: reduce) {
	.nsn-rail--journal .nsn-rail__label {
		transition: none;
	}

	.nsn-rail--journal .nsn-rail__x {
		transition: none;
	}

	.nsn-rail--journal .nsn-rail__close:hover .nsn-rail__x,
	.nsn-rail--journal .nsn-rail__close:focus-visible .nsn-rail__x {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Where the close control sits

   Beside the title rather than up under the header. The rail is a fixed
   full-height column, so this is the padding that holds its one control clear
   of the top - the same mechanism it already used, given a larger figure.

   The figure is built from the tokens the hero itself is built from, so the
   button tracks the title instead of being parked at a pixel: the article's
   own top padding, plus the line of metadata above the title and the space
   under it. Change the hero's spacing and this follows.

   Above the narrow breakpoint only. Below it the rail is not a column at all
   but a floating button in the bottom corner, and that block - which comes
   earlier in this file - sets padding to zero; a rule here would otherwise
   win on source order and push the button off its corner.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
	.nsn-rail--journal {
		padding-top: calc(
			var(--nsn-header-h) + var(--nsn-space-3) + var(--nsn-space-2) + 4rem
		);
	}
}