/* ============================================================================
   News pages — the index (/news/) and the articles (/news/<slug>/), both
   generated by build-content.mjs from content/news/*.md (2026-10-02).
   Loaded after site.css + company.css (company section: ink + company blue
   tokens); the copy-link button lives in news.js.

     .nw-hero      the company subpages' cover (.c-page-hero) in smoke — blue
                   on the index and studio stories, HeyU's indigo on HeyU
                   stories; an article's title is the poster
     .nw-feature   the index's newest story, large: picture left, display
                   title right
     .nw-archive   the earlier stories as hairline rows beside a giant sticky
                   year numeral (the release notes' version numeral)
     .nw-layout    an article: the text beside a small sticky column of facts
                   (published, topic, reading time) and actions
     .nw-next      "Keep reading": the newer and older stories as two cards,
                   then the homepage strip's giant "All news" closer
   Pictures: a story's cover image, else its icon on the homepage strip's
   halftone panel (.c-story-icon, company.css).
   ========================================================================== */

/* ---------------------------------------------------------------- hero */
.hero.c-page-hero.nw-hero { min-height: min(72svh, 760px); }
.nw-article-hero .nw-title {
	font-size: clamp(2.5rem, 6.2vw, 6.6rem);
	letter-spacing: -0.05em;
	line-height: 0.95;
	max-width: 17ch;
}
body.company .nw-article-hero .nw-title { max-width: 17ch; }
.nw-crumb { transition: color 0.25s var(--ease); }
.nw-crumb:hover, .nw-crumb:focus-visible { color: var(--accent-2); }
/* block, not .m-label's inline-flex: its gap would open spaces around the
   <time> and <a> inside the parentheses */
.nw-meta { display: block; margin: 0; }
.nw-meta a { transition: color 0.25s var(--ease); }
.nw-meta a:hover, .nw-meta a:focus-visible { color: var(--text); }

/* topic chip: the topic's accent as a dot */
.nw-topic {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-soft);
}
.nw-topic::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--nw-tint, var(--accent-2));
	flex: none;
}
.nw-topic.t-heyu { --nw-tint: #8b7bff; }
.nw-topic.t-studio { --nw-tint: #6e97ff; }

/* the halftone panels breathe on their link's hover (company.css owns the
   panel and does the same for .c-story) */
.nw-feature:hover .c-story-icon::before, .nw-feature:focus-visible .c-story-icon::before,
.nw-row:hover .c-story-icon::before, .nw-row:focus-visible .c-story-icon::before,
.nw-pn:hover .c-story-icon::before, .nw-pn:focus-visible .c-story-icon::before { transform: scale(1.08); }
.nw-feature:hover .c-story-icon svg, .nw-feature:focus-visible .c-story-icon svg,
.nw-row:hover .c-story-icon svg, .nw-row:focus-visible .c-story-icon svg,
.nw-pn:hover .c-story-icon svg, .nw-pn:focus-visible .c-story-icon svg { transform: scale(1.06); }
/* (icon panels keep .c-story-icon's own grid centring and glow) */
.nw-feature-media, .nw-thumb, .nw-pn-media { overflow: hidden; }
.nw-feature-media:not(.c-story-icon), .nw-thumb:not(.c-story-icon), .nw-pn-media:not(.c-story-icon) {
	display: block;
	background: var(--bg-2);
}
.nw-feature-media img, .nw-thumb img, .nw-pn-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.nw-feature:hover img, .nw-row:hover img, .nw-pn:hover img { transform: scale(1.03); }

/* ------------------------------------------------------------- feature */
.section.nw-lead { padding-block: clamp(3rem, 6vw, 5.5rem); }
.nw-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: clamp(1.6rem, 4vw, 4.5rem);
	align-items: center;
}
.nw-feature-media { aspect-ratio: 16 / 10; }
.nw-feature-media.c-story-icon svg { width: clamp(64px, 8vw, 128px); height: clamp(64px, 8vw, 128px); }
.nw-feature-body { display: grid; justify-items: start; gap: 1.1rem; min-width: 0; }
.nw-kicker {
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}
.nw-kicker b { color: var(--accent-2); font-weight: 600; }
.nw-feature-title {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.4vw, 4.6rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1;
	text-wrap: balance;
	transition: color 0.3s var(--ease);
}
.nw-feature:hover .nw-feature-title, .nw-feature:focus-visible .nw-feature-title { color: var(--accent-2); }
.nw-feature-sum { font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: var(--text-mute); max-width: 44ch; }
.nw-feature-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin-top: 0.4rem; }
.nw-read { color: var(--text); transition: color 0.25s var(--ease); }
.nw-feature:hover .nw-read, .nw-feature:focus-visible .nw-read { color: var(--accent-2); }

/* ------------------------------------------------------------- archive */
.nw-year-group {
	display: grid;
	grid-template-columns: minmax(200px, 0.38fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 4.5rem);
	align-items: start;
}
.nw-year-group + .nw-year-group { margin-top: clamp(3rem, 6vw, 5rem); }
.nw-year-side {
	position: sticky;
	top: 6.5rem;
	display: grid;
	justify-items: start;
	gap: 0.6rem;
	container-type: inline-size;
}
.nw-year {
	font-family: var(--font-display);
	font-size: min(11rem, calc(100cqw / 2.5));
	font-weight: 800;
	letter-spacing: -0.06em;
	line-height: 0.82;
	margin-left: -0.04em;
	font-variant-numeric: tabular-nums;
}
.nw-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-2); }
.nw-row {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) clamp(5.5rem, 9vw, 7.5rem);
	gap: clamp(1rem, 2.6vw, 2.4rem);
	align-items: start;
	padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
	border-bottom: 1px solid var(--hairline);
}
.nw-date {
	padding-top: 0.55rem;
	font-family: var(--font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}
.nw-row-body { display: block; min-width: 0; }
.nw-row-title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 2.4vw, 2.2rem);
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1.08;
	text-wrap: balance;
	transition: color 0.25s var(--ease);
}
.nw-row:hover .nw-row-title, .nw-row:focus-visible .nw-row-title { color: var(--accent-2); }
.nw-row-sum { display: block; margin-top: 0.55rem; font-size: 0.98rem; line-height: 1.55; color: var(--text-mute); max-width: 58ch; }
.nw-row-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.2rem;
	margin-top: 0.9rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.nw-thumb { aspect-ratio: 1; }
.nw-thumb.c-story-icon svg { width: clamp(28px, 2.6vw, 38px); height: clamp(28px, 2.6vw, 38px); }

/* ------------------------------------------------------------- article */
.section.nw-body { padding-top: clamp(3rem, 6vw, 5.5rem); }
.nw-layout {
	display: grid;
	grid-template-columns: minmax(14rem, 0.38fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: start;
}
.nw-side {
	position: sticky;
	top: 6.5rem;
	display: grid;
	gap: 2rem;
	justify-items: start;
}
.nw-facts { display: grid; gap: 1.2rem; margin: 0; }
.nw-facts dd { margin: 0.4rem 0 0; font-size: 0.98rem; color: var(--text); }
.nw-side-actions { display: grid; justify-items: start; gap: 0.7rem; }
.nw-copy {
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.25s var(--ease);
}
.nw-copy[hidden] { display: none; }
.nw-copy:hover, .nw-copy:focus-visible,
.nw-back:hover, .nw-back:focus-visible { color: var(--text); }
.nw-copy.is-done { color: var(--accent-2); }
.nw-back { transition: color 0.25s var(--ease); }

.doc.nw-article {
	max-width: 42rem;
	margin: 0;
	padding: 0;
	font-size: 1.1rem;
	line-height: 1.75;
}
.doc.nw-article > p:first-of-type {
	font-size: clamp(1.22rem, 1.7vw, 1.42rem);
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--text);
	margin-bottom: 1.4rem;
}
.doc.nw-article p { margin-bottom: 1.15rem; }
.doc.nw-article strong { color: var(--text); font-weight: 600; }
.doc.nw-article h2,
.doc.nw-article h3 {
	margin: 2.8rem 0 0.8rem;
	font-family: var(--font-display);
	font-size: clamp(1.45rem, 2.2vw, 1.9rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
	color: var(--text);
}
.doc.nw-article li { line-height: 1.62; }
/* pull quote */
.doc.nw-article blockquote {
	position: relative;
	margin: 2.8rem 0;
	padding: 0.2rem 0 0.2rem 1.6rem;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 600;
	letter-spacing: -0.032em;
	line-height: 1.18;
	color: var(--text);
	text-wrap: balance;
}
.doc.nw-article blockquote::before {
	content: '';
	position: absolute;
	left: 0; top: 0.35rem; bottom: 0.35rem;
	width: 3px;
	background: var(--accent);
}
.doc.nw-article blockquote strong { color: inherit; font-weight: inherit; }
.nw-cover { margin: 0 0 2.4rem; }
.nw-cover img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* -------------------------------------------------------- keep reading */
.nw-pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1.2rem, 2.4vw, 2.2rem);
}
/* one neighbour only: it keeps its side (older on the right) */
.nw-pair.is-single .nw-pn-older { grid-column: 2; }
.nw-pn {
	display: grid;
	grid-template-columns: clamp(6rem, 11vw, 9rem) minmax(0, 1fr);
	gap: clamp(1rem, 2vw, 1.6rem);
	align-items: start;
	padding-top: clamp(1.2rem, 2vw, 1.6rem);
	border-top: 1px solid var(--hairline-2);
}
.nw-pn-media { aspect-ratio: 1; }
.nw-pn-media.c-story-icon svg { width: clamp(28px, 2.8vw, 40px); height: clamp(28px, 2.8vw, 40px); }
.nw-pn-body { display: grid; justify-items: start; gap: 0.6rem; min-width: 0; }
.nw-pn-title {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.2vw, 2rem);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
	transition: color 0.25s var(--ease);
}
.nw-pn:hover .nw-pn-title, .nw-pn:focus-visible .nw-pn-title { color: var(--accent-2); }
.nw-pn-sum { font-size: 0.95rem; line-height: 1.5; color: var(--text-mute); }
.nw-next .c-stories-more { margin-top: clamp(2.6rem, 5vw, 4rem); }

/* ------------------------------------------------------------- tablet */
@media (max-width: 900px) {
	.nw-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.nw-side {
		position: static;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: end;
		gap: 1rem 2rem;
		margin-bottom: clamp(2.2rem, 6vw, 3rem);
		padding-bottom: 1.4rem;
		border-bottom: 1px solid var(--hairline);
	}
	.nw-facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 0.8rem 2rem; }
	.nw-facts dd { font-size: 0.92rem; }
	.nw-side-actions { justify-items: end; }
	.doc.nw-article { max-width: 46rem; }
}

/* -------------------------------------------------------------- phone */
@media (max-width: 720px) {
	.nw-feature { grid-template-columns: minmax(0, 1fr); }
	.nw-year-group { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
	.nw-year-side { position: static; }
	.nw-year { font-size: min(7rem, calc(100cqw / 2.5)); }
	.nw-row { grid-template-columns: minmax(0, 1fr) 4.5rem; gap: 0.5rem 1rem; }
	.nw-date { grid-column: 1; grid-row: 1; padding-top: 0; }
	.nw-row-body { grid-column: 1; grid-row: 2; }
	.nw-thumb { grid-column: 2; grid-row: 1 / span 2; }
	.nw-row-sum {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.nw-article-hero .nw-title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }
	.nw-side { grid-template-columns: minmax(0, 1fr); }
	.nw-facts { gap: 0.8rem 1.4rem; }
	.nw-side-actions { justify-items: start; grid-auto-flow: column; gap: 1.6rem; }
	.nw-pair { grid-template-columns: minmax(0, 1fr); }
	.nw-pair.is-single .nw-pn-older { grid-column: auto; }
}

/* -------------------------------------------------------------- print */
@media print {
	.nw-hero .c-smoke, .nw-side, .nw-next { display: none !important; }
	.c-smoke-host.nw-hero, .section.nw-body { background: #fff !important; }
	.hero.c-page-hero.nw-hero { min-height: 0; padding: 0 0 1rem; }
	.nw-hero .display { font-size: 2.4rem; color: #000; max-width: none; }
	.nw-hero .m-label, .nw-hero .lede { color: #333; }
	.nw-hero .m-label.dot::before { background: #333; }
	.nw-layout { display: block; }
	.doc.nw-article, .doc.nw-article > p:first-of-type, .doc.nw-article h3,
	.doc.nw-article blockquote, .doc.nw-article strong { color: #000; }
	.doc.nw-article blockquote::before { background: #000; }
}