/*
	The story post page. Loaded as pageStyles: [tokens, news, chrome], so it inherits the
	dark editorial palette from tokens.css and the site chrome from chrome.css, but not
	home.css: the tag row grammar the home and the post share is ported here rather than
	reached for, because the post never loads home.css.

	Carbon base, one signal orange, and the four per-type accents already in tokens.css, read
	through --post-accent (text-safe) and --post-rule (surface). A death story is driven matte
	from the data (data-accent="matte"), so it takes no colour anywhere on the page. The one
	thing matte never touches is a real photograph: see the photo header below.

	Keyboard hyphen only, sentence-case, no BEM: descriptive names and native nesting.
*/

/* The reading shell. .wrap centres the masthead at the page measure; the article body sits
   in a narrower reading column set on .post-inner below. */
.wrap {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

:is(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

/* ------------------------------------------------------------- masthead */
/*
	The compact masthead. Every public page wears the site's full one now (chrome.css,
	which loads straight after this file and takes .wordmark and .tagline over), so what
	is left standing on these rules is the internal dashboard, which keeps a header of
	its own because it is an instrument rather than the site.
*/

.post-masthead {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: var(--canvas);
	border-block-start: 3px solid var(--accent);
	border-block-end: 1px solid var(--hairline);
	box-shadow: 0 16px 32px -26px rgb(0 0 0 / 0.95);
}

.post-masthead-inner {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	min-height: 3.85rem;
	padding-block: 0.9rem;
}

.wordmark {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.1vw, 1.45rem);
	letter-spacing: -0.035em;
	color: var(--text);
	text-decoration: none;
	white-space: nowrap;
}

.tagline {
	display: none;
	font-size: 0.78rem;
	color: var(--muted);
	white-space: nowrap;

	@media (width >= 40rem) {
		display: inline;
	}
}

.post-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-inline-start: auto;
	font-size: 0.82rem;
	color: var(--muted);
	text-decoration: none;

	.icon {
		font-size: 0.85rem;
	}

	&:hover {
		color: var(--accent-text);
	}
}

/* ---------------------------------------------------------------- article */

.post-main {
	padding-block-end: clamp(3rem, 7vw, 5.5rem);
}

/* The per-type accent. --post-accent is text-safe (used as ink); --post-rule is the surface
   variant (used for rules and edges). The three brighter tracker hues serve as both; the
   house orange keeps the split, and matte drops to neutrals so a death carries no colour. */
.post {
	--post-accent: var(--accent-text);
	--post-rule: var(--accent);
}

.post[data-accent='tour'] {
	--post-accent: var(--tracker-tour-text);
	--post-rule: var(--tracker-tour);
}

.post[data-accent='festival'] {
	--post-accent: var(--tracker-festival-text);
	--post-rule: var(--tracker-festival);
}

.post[data-accent='award'] {
	--post-accent: var(--tracker-award-text);
	--post-rule: var(--tracker-award);
}

.post[data-accent='band'] {
	--post-accent: var(--type-band-text);
	--post-rule: var(--type-band);
}

.post[data-accent='industry'] {
	--post-accent: var(--type-industry-text);
	--post-rule: var(--type-industry);
}

.post[data-accent='new'] {
	--post-accent: var(--type-new-text);
	--post-rule: var(--type-new);
}

.post[data-accent='matte'] {
	--post-accent: var(--muted);
	--post-rule: var(--hairline-bright);
}

/*
	THE BANNER. Back, per the owner's 2026-08-19 call, as a full-width colored band: generated
	art always, never the real photo (that stays in the body, floated beside the prose - see
	.post-art below, which is a completely different element from this banner's own canvas
	despite the shared "art" vocabulary). The headline, dek, tag row and artist chips overlay
	the art the way the home page's lead pairs .lead-art with .lead-inner: the SVG is an
	absolute background and post-banner-inner's own content sets the section's real height, so
	a long headline gets a taller band and a short one a shorter one - no fixed height to fight.
*/
.post-banner {
	position: relative;
	overflow: hidden;
	background-color: var(--panel);
	border-block-end: 3px solid var(--post-rule);
}

.post-banner-canvas-wrap {
	position: absolute;
	inset: 0;
}

.post-banner-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* The print screen, the same halftone recipe the home hero's .lead-art-screen uses over its
   own seed duotone: bone ink at a whisper, supplying texture rather than colour. */
.post-banner-screen {
	position: absolute;
	inset: -30%;
	background-image: radial-gradient(circle at 50% 50%, rgb(236 236 240 / 0.6) 0 1.15px, transparent 1.75px);
	background-size: 9px 9px;
	transform: rotate(1deg);
	opacity: 0.16;
}

/* The darkening scrim: the generated gradient is seed-coloured and sometimes light, and the
   title has to read over whatever it does. Heavier at the foot, where the tag row and artist
   chips sit closest to the section's bottom rule. */
.post-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(10 10 12 / 0.35) 0%, rgb(10 10 12 / 0.8) 100%);
}

.post-banner-inner {
	position: relative;
	z-index: 1;
	max-width: 56rem;
	padding-block: clamp(2.25rem, 7vw, 4rem);
}

/* THE HEADER. Headline, dek, tag row and artist chips, overlaid on the banner above -
   nothing here wraps anything; the wrap-around treatment belongs to .post-art in the body. */

/* The reading column, for everything below the banner: the article body, facts, the
   verification panel, cited sources. Widened 2026-08-19 (was 44rem) so the body's floated
   image (below) leaves real room for the paragraphs that wrap it, without the line running
   so long it fights readability - still well short of the site's 1360px masthead measure. */
.post-inner {
	max-width: 56rem;
	margin-inline: auto;
	padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/*
	THE ART. Opens .post-body now rather than running full-bleed above the header: a
	normal-sized frame floated to the start edge so the paragraphs that follow wrap it the
	way a magazine article wraps its lead image. .post-body is declared a flow-root further
	down specifically so the float is contained there - facts, the verification panel and
	the source lists all start on a fresh line below the body, never wrapping the image.

	The frame and its credit are one statement, so nothing separates them: not a print page
	break, and not anyone later reaching for the frame on its own. On the photo case
	.post-art is a figure whose height is its children's, not a fixed ratio: the frame
	proper is .post-art-frame, a separate box, specifically so the credit below it has real
	flow space rather than being painted under an inset:0 photo the frame would otherwise
	clip it against. The generated-art case has no caption to make room for, so it wears
	both classes on the one div and gets the frame's ratio directly.
*/
.post-art {
	float: inline-start;
	width: clamp(14rem, 26vw, 19rem);
	margin-inline-end: 1.75rem;
	margin-block-end: 0.5rem;
	break-inside: avoid;
}

.post-art-frame {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background-color: var(--panel);
	border: 1px solid var(--post-rule);
}

.post-art-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* The frame is taller than it is wide, and faces live in the upper third of most
   performance shots, so the default crop favours the top of the image rather than its
   centre: a dead-centre crop was verified to take subjects' heads off. A story whose
   photo needs a different band says so with photo.focus in the data, which lands here as
   the data-focus attribute. */
.post-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: 50% 18%;
}

.post-photo[data-focus='top'] {
	object-position: 50% 0%;
}

.post-photo[data-focus='center'] {
	object-position: 50% 50%;
}

.post-photo[data-focus='bottom'] {
	object-position: 50% 100%;
}

/*
	Full colour, always, including on a death story. The matte rule desaturates the
	GENERATED art and drains the colour out of the page chrome; a real photograph of a
	person is not chrome, and greying it out reads as cheapness rather than respect. The
	frame's own edge still takes --post-rule, so a death story's border stays neutral.
*/

/* The credit, in the mono grammar the source dates use: quiet, factual, and impossible to
   mistake for the story. Sized to the frame it sits under now, not the reading column. */
.post-credit {
	display: block;
	padding-block-start: 0.55rem;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--muted-2);

	a {
		color: var(--muted);
		text-decoration: underline;
		text-decoration-color: var(--hairline-bright);
		text-underline-offset: 3px;

		&:hover {
			color: var(--post-accent);
			text-decoration-color: currentcolor;
		}
	}
}

/* A caption is editorial and a credit is legal, so the caption reads in the body voice and
   the credit stays in mono; both sit under the frame, one line onto the next. */
.photo-caption {
	display: block;
	font-family: var(--font-body);
	font-size: 0.82rem;
	color: var(--muted);
}

/* Below this, a floated 19rem frame leaves too little room to wrap running prose: the
   frame drops the float and runs full width above the body text instead, same treatment
   the home river's cards already give a photo (contained, not cropped, at a normal size). */
@media (width < 48rem) {
	.post-art {
		float: none;
		width: 100%;
		margin-inline-end: 0;
		margin-block-end: 1.25rem;
	}

	.post-art-frame {
		aspect-ratio: 16 / 9;
	}

	.post-photo {
		object-position: 50% 22%;
	}
}

.post-headline {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 5vw, 3.15rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--text);
	text-wrap: balance;
}

.post-dek {
	margin-block-start: clamp(0.9rem, 1.8vw, 1.3rem);
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	line-height: 1.5;
	color: var(--muted);
	max-width: 46ch;
}

/* ------------------------------------------------------------- the tag row */
/* Ported from home.css so the post wears the same standing line as its home card: a
   segmented row, tag words divided by a thin rule, the timestamp set off in the mono. */

.tag-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.55rem;
	row-gap: 0.4rem;
	color: var(--muted);

	> * + :is(.tag-genre, .tag-type) {
		border-inline-start: 1px solid var(--hairline-bright);
		padding-inline-start: 0.55rem;
	}

	> time {
		margin-inline-start: 0.3rem;
		font-family: var(--font-mono);
		font-size: 0.74rem;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
		color: var(--muted);
	}
}

.tag-trending,
.tag-genre,
.tag-type {
	font-family: var(--font-display);
	font-size: 0.72rem;
	line-height: 1.5;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.tag-trending {
	color: var(--accent-text);
	letter-spacing: 0.13em;
}

.tag-genre {
	color: var(--muted);
	text-decoration: none;

	&:hover {
		color: var(--text);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.tag-type {
	color: var(--muted-2);
}

/* The type word links to its hub on a story page the way the genre word links to its own.
   Element-qualified for the same reason the genre tag is not: this class is also a plain
   span inside the hub and artist row links, where an anchor cannot nest, and a span must
   not take a hover underline. */
a.tag-type {
	text-decoration: none;

	&:hover {
		color: var(--text);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

/* A death story keeps its restraint here too: the underline appears, the ink stays put. */
.post[data-accent='matte'] a.tag-type:hover {
	color: var(--muted-2);
	text-decoration-color: var(--muted);
}

.post-tags {
	margin-block-start: clamp(1.1rem, 2vw, 1.5rem);
}

/* The artist chips under the tag row: each one a link to that artist's tag page. Inked
   in the story's type accent so they read as part of the story's standing line. */
.post-artists {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.9rem;
}

.artist-chip {
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--post-accent);
	text-decoration: none;
	border: 1px solid var(--hairline-bright);
	padding: 0.3rem 0.55rem;

	&:hover {
		border-color: var(--post-rule);
		color: var(--text);
	}
}

/*
	TAP TARGETS, below the desktop layout (audited 2026-08-28). The tag row's genre and
	type words and the artist chips are real links and the primary way into a hub from a
	story, and they were 17-19px and 29px tall on a phone: correct as typography, too
	small as something to hit with a thumb. The type scale does not change - only the box
	around it grows, so the row reads exactly as it did and can actually be tapped.

	The row switches from baseline to centre alignment here for one reason: the divider
	rule between the words is drawn on the links themselves, so once they are taller than
	the text the baseline would hang every rule off its bottom edge instead of centring it
	against the row.
*/
@media (width < 64rem) {
	.tag-row {
		align-items: center;
		row-gap: 0.1rem;
	}

	/* The way back out of a story, and it was 22px tall. */
	.post-back {
		min-height: 2.5rem;
	}

	/* The cited-sources list: every outlet that reported the story, each one a real
	   outbound link and the whole point of the attribution posture. They sat at 24px. */
	.source-outlet {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
	}

	a.tag-genre,
	a.tag-type {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
	}

	.artist-chip {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
		padding-inline: 0.7rem;
	}
}

/* ----------------------------------------------------------------- the body */

.post-body {
	display: flow-root;
	margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem);
	font-size: 1.06rem;
	line-height: 1.65;
	color: var(--text);

	p + p {
		margin-block-start: 1.15rem;
	}
}

/* An internal cross-link the autoLink filter placed: a name that is the subject of another
   story. Inked in the type accent, underlined so it reads as a link in running prose. */
.story-link {
	color: var(--post-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;

	&:hover {
		text-decoration-thickness: 2px;
	}
}

/* ----------------------------------------------------- shared section head */

.post-subheading {
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	padding-block-end: 0.6rem;
	border-block-end: 1px solid var(--hairline-bright);
	margin-block-end: 1.1rem;
}

/* --------------------------------------------------------------- the facts */

.post-facts {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

.fact-list {
	display: grid;
	gap: 0.6rem;

	li {
		position: relative;
		padding-inline-start: 1.3rem;
		font-size: 0.98rem;
		line-height: 1.5;
		color: var(--text);
	}

	li::before {
		content: '';
		position: absolute;
		inset-block-start: 0.55em;
		inset-inline-start: 0;
		width: 0.5rem;
		height: 0.5rem;
		background-color: var(--post-rule);
	}
}

/* -------------------------------------------------- the verification panel */
/* Public per the owner's 2026-08-15 decision. Level as a word, the count of independent
   outlets, the plain line, and a trending note where earned. No numeric score, no formula. */

.verify {
	margin-block-start: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.15rem, 2.5vw, 1.75rem);
	background-color: var(--panel);
	border: 1px solid var(--hairline);
	border-inline-start: 3px solid var(--post-rule);
}

.verify-level {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-block-end: 0.75rem;
}

/* Level shown by the word first; the dot is a second, redundant cue, never colour alone.
   Confirmed reads solid and bright, developing a hollow ring, a single source a dim dot. */
.verify-dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background-color: var(--muted);
	flex: none;
}

.verify[data-level='confirmed'] .verify-dot {
	background-color: var(--text);
}

.verify[data-level='developing'] .verify-dot {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--muted);
}

.verify[data-level='single-source'] .verify-dot {
	background-color: var(--muted-2);
}

.verify-level-label {
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var(--text);
}

.verify-count {
	font-family: var(--font-mono);
	font-size: 0.82rem;
	letter-spacing: 0.01em;
	color: var(--text);
}

.verify-why {
	margin-block-start: 0.5rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 52ch;
}

/* The background note, printed only when the story cites any. Set below the plain-words line
   and dimmer than it: it is a caveat about what the level does not include, not part of the
   judgment itself. */
.verify-supporting {
	margin-block-start: 0.55rem;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--muted-2);
	max-width: 52ch;
}

.verify-trending {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-start: 0.9rem;
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--accent-text);

	.icon {
		font-size: 0.85rem;
	}
}

/* ------------------------------------------------------------ cited sources */

.sources {
	margin-block-start: clamp(2rem, 4vw, 3rem);
}

/* The count beside the heading, in the mono the measurements use: how many outlets
   stand behind the story, visible before the list is read. */
.sources-count {
	font-family: var(--font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--muted-2);
}

.sources-note {
	margin-block-end: 1.1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 54ch;
}

.source-list {
	display: grid;
	gap: 0;
}

.source {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.7rem;
	border-block-end: 1px solid var(--hairline);

	&:first-child {
		border-block-start: 1px solid var(--hairline);
	}
}

.source-outlet {
	font-size: 1rem;
	color: var(--text);
	text-decoration: none;

	&:hover {
		color: var(--post-accent);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.source-date {
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--muted-2);
	white-space: nowrap;
	flex: none;
}

/* ------------------------------------------------------- background citations */
/* The second class of source, per the owner's 2026-08-18 ruling: context we looked up,
   cited for a named claim, never counted as corroboration. It has to read as reference at a
   glance, so nothing here borrows the reporting group's shape. The credits above are a flush
   list of outlet names on solid rules; these are indented behind a standing rule, lead with
   the claim rather than the outlet, and divide on a dotted line. Lighter type throughout, and
   the outlet drops to the size the dateline uses, so the eye reads the fact first. */

.sources-background {
	margin-block-start: clamp(1.6rem, 3vw, 2.25rem);
}

.background-list {
	display: grid;
	gap: 0;
}

.background {
	padding-block: 0.75rem;
	padding-inline-start: 0.9rem;
	border-inline-start: 2px solid var(--hairline-bright);
	border-block-end: 1px dotted var(--hairline-bright);

	&:first-child {
		border-block-start: 1px dotted var(--hairline-bright);
	}
}

/* The claim first, in the body voice a fact deserves, held to a readable measure. */
.background-claim {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 58ch;
}

.background-cite {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: 0.35rem;
}

/* The word that names the row for what it is, for a reader who scrolled straight here and
   never read the heading. Same mono the measurements use, dimmed a step further. */
.background-mark {
	font-family: var(--font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.background-outlet {
	font-size: 0.86rem;
	color: var(--muted);
	text-decoration: underline;
	text-decoration-color: var(--hairline-bright);
	text-underline-offset: 3px;

	&:hover {
		color: var(--text);
		text-decoration-color: currentColor;
	}
}