/* ============================================================
   Stiri — news feed, article and archive
   Poster-wall layout: the key visual is the story.
   Loaded only on /stiri.html and article pages.
   ============================================================ */

/* --- Type ------------------------------------------------- */
@font-face {
	font-family: 'NwSans';
	src: url('fonts/dmsans-latin.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'NwSans';
	src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
	font-weight: 100 1000;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'NwSerif';
	src: url('fonts/fraunces-italic.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'NwSerif';
	src: url('fonts/fraunces-italic-ext.woff2') format('woff2');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens ----------------------------------------------- */
.nw-page {
	--nw-ink: #18182a;
	--nw-paper: #ffffff;
	--nw-mist: #f4f5f9;
	--nw-line: #e3e5ec;
	--nw-mute: #6b7080;
	--nw-orange: #FE9900;
	--nw-blue: #0094F7;
	--nw-poster: 172px;

	font-family: 'NwSans', 'Segoe UI', Verdana, sans-serif;
	color: var(--nw-ink);
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 14px 44px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}
.nw-page *,
.nw-page *:before,
.nw-page *:after { box-sizing: border-box; }

/* --- Breadcrumb ------------------------------------------- */
.nw-crumbs {
	font-size: 11px;
	color: var(--nw-mute);
	padding: 14px 0 0;
	letter-spacing: .01em;
}
.nw-crumbs a,
.nw-crumbs a:link,
.nw-crumbs a:visited { color: var(--nw-mute); text-decoration: none; }
.nw-crumbs a:hover { color: var(--nw-blue); text-decoration: underline; }

/* --- Masthead --------------------------------------------- */
.nw-mast {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 20px;
	padding: 12px 0 18px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--nw-line);
}
.nw-kicker {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .16em;
	color: var(--nw-orange);
}
.nw-mast h1 {
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.05;
	margin: 6px 0 0;
	color: var(--nw-ink);
}
.nw-mast-sub {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--nw-mute);
	max-width: 46ch;
}
.nw-ghost,
.nw-ghost:link,
.nw-ghost:visited {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--nw-ink);
	border-radius: 999px;
	padding: 8px 15px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--nw-ink);
	text-decoration: none;
	background: transparent;
	transition: background .18s ease, color .18s ease;
}
.nw-ghost:hover,
.nw-ghost:focus-visible {
	background: var(--nw-ink);
	color: #fff;
}

/* --- Poster grid ------------------------------------------ */
.nw-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 12px;
}
.nw-card,
.nw-card:link,
.nw-card:visited {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.nw-shot {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	border-radius: 10px;
	background: var(--nw-mist);
	display: block;
}
.nw-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
	transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.nw-card:hover .nw-shot img,
.nw-card:focus-visible .nw-shot img { transform: scale(1.045); }
.nw-cardbody {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

/* No key visual on file: a quiet ruled placeholder rather than a gap. */
.nw-shot.is-empty {
	background:
		repeating-linear-gradient(135deg, #eceef4 0 8px, #f4f5f9 8px 16px);
}

/* Marks the items that carry a trailer — most of them do, and that is
   what the reader is scanning for. */
.nw-play {
	position: absolute;
	left: 7px;
	bottom: 7px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(24, 24, 42, .78);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, transform .2s ease;
}
.nw-play svg { width: 10px; height: 10px; display: block; fill: currentColor; }
.nw-card:hover .nw-play,
.nw-card:focus-visible .nw-play {
	background: var(--nw-orange);
	transform: scale(1.08);
}
.nw-card h3 {
	font-size: 13.5px;
	line-height: 1.35;
	font-weight: 700;
	letter-spacing: -.005em;
	margin: 9px 0 0;
	color: var(--nw-ink);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .15s ease;
}
.nw-card:hover h3,
.nw-card:focus-visible h3 { color: var(--nw-blue); }
/* Pushed to the bottom so every card in a row shares a baseline, whatever
   the title runs to. */
.nw-src {
	margin-top: auto;
	padding-top: 5px;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nw-mute);
}
.nw-excerpt { display: none; }

/* Feed rows: poster beside its text. Every entry in the feed uses this, so
   nothing on the page gets a paragraph its neighbours are denied. */
.nw-feed {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}
.nw-card.is-wide {
	flex-direction: row;
	align-items: flex-start;
	gap: 14px;
}
.nw-card.is-wide .nw-shot {
	flex: 0 0 38%;
	width: 38%;
}
.nw-card.is-wide h3 {
	margin-top: -3px;
	font-size: 15.5px;
	letter-spacing: -.015em;
	-webkit-line-clamp: 3;
}
.nw-card.is-wide .nw-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--nw-mute);
}
/* The poster is taller than the text, so the meta follows the excerpt
   rather than being pushed to the card's floor. */
.nw-card.is-wide .nw-src { margin-top: 10px; padding-top: 0; }

/* --- Footer of the feed ----------------------------------- */
.nw-feedfoot {
	/* Matches .nw-mast's margin-bottom so the feed sits the same distance
	   from the rule above it as from the rule below it. */
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--nw-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.nw-feedfoot p {
	margin: 0;
	font-size: 12px;
	color: var(--nw-mute);
}

/* --- Archive ---------------------------------------------- */
.nw-month {
	font-family: 'NwSerif', Georgia, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 20px;
	margin: 28px 0 10px;
	padding-bottom: 7px;
	border-bottom: 1px solid var(--nw-line);
}
.nw-arch { display: grid; grid-template-columns: 1fr; gap: 0; }
.nw-arow,
.nw-arow:link,
.nw-arow:visited {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 6px;
	border-bottom: 1px solid #f0f1f5;
	text-decoration: none;
	color: var(--nw-ink);
	font-size: 13px;
	line-height: 1.4;
}
.nw-arow:hover { background: var(--nw-mist); color: var(--nw-blue); }
.nw-aday {
	flex: 0 0 26px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--nw-mute);
	font-variant-numeric: tabular-nums;
}
.nw-atitle { flex: 1; min-width: 0; }

/* --- Article ---------------------------------------------- */
/* The article shares the page's measure so its headline, breadcrumb and
   the "Alte stiri" grid below all sit on one left edge. */
.nw-article { max-width: none; }
.nw-article-body { display: block; }
.nw-article-head { padding: 12px 0 16px; margin-bottom: 28px; border-bottom: 1px solid var(--nw-line); }
.nw-article h1 {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.16;
	letter-spacing: -.025em;
	margin: 7px 0 0;
	color: var(--nw-ink);
}
.nw-article-meta {
	margin-top: 11px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--nw-mute);
}
.nw-article-meta a,
.nw-article-meta a:link,
.nw-article-meta a:visited { color: var(--nw-orange); text-decoration: none; }
.nw-article-meta a:hover { text-decoration: underline; }
.nw-article-meta .nw-dot { margin: 0 7px; opacity: .5; }

.nw-lead-img {
	margin: 0 0 22px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--nw-mist);
}
.nw-lead-img img { display: block; width: 100%; height: auto; border: 0; }

/* Source HTML carries inline colours (rgb(14,14,14), rgb(34,34,34)); keep
   the base neutral so spanned and unspanned text read as one colour. */
.nw-prose {
	font-size: 16px;
	line-height: 1.72;
	color: #1c1c1c;
}
.nw-prose p { margin: 0 0 1.05em; }
.nw-prose ul, .nw-prose ol { margin: 0 0 1.05em; padding-left: 1.35em; }
.nw-prose li { margin: 0 0 .3em; }
.nw-page .nw-prose a,
.nw-page .nw-prose a:link,
.nw-page .nw-prose a:visited {
	color: var(--nw-orange);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.nw-page .nw-prose a:hover { color: var(--nw-ink); }
.nw-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.nw-prose em, .nw-prose i { font-style: italic; }

/* Source markup ships fixed 560/640px iframes — cap them so articles do
   not scroll sideways on a phone. */
.nw-prose iframe,
.nw-embed iframe {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	background: #000;
}
.nw-embed { margin: 22px 0 0; }
.nw-embed .twitter-tweet { margin: 0 auto !important; }
.nw-embed blockquote { max-width: 100%; }

.nw-more-head {
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin: 38px 0 14px;
}
.nw-more-head:after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--nw-line);
	transform: translateY(-4px);
}
.nw-more-head h2 {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--nw-ink);
	margin: 0;
}

/* --- Focus ------------------------------------------------- */
.nw-page a:focus-visible {
	outline: 2px solid var(--nw-blue);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --- Tablet ------------------------------------------------ */
@media screen and (min-width: 560px) {
	.nw-page { padding: 0 20px 52px; }
	.nw-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 16px; }
	.nw-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
	.nw-card.is-wide { gap: 16px; }
	.nw-card.is-wide .nw-shot { flex-basis: 40%; width: 40%; }
	.nw-arch { grid-template-columns: 1fr 1fr; column-gap: 26px; }
	/* Poster moves into its own rail, keeping the prose to a readable
	   measure while the article still spans the full page. */
	.nw-article-body {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 200px;
		gap: 28px;
		align-items: start;
	}
	.nw-article-main { order: 1; min-width: 0; }
	.nw-article-side { order: 2; min-width: 0; }
	.nw-article-side .nw-lead-img { margin: 0; }
}

/* --- Desktop ----------------------------------------------- */
@media screen and (min-width: 900px) {
	.nw-page { max-width: 960px; padding: 0 28px 64px; }
	.nw-mast { padding: 16px 0 22px; margin-bottom: 32px; }
	.nw-feedfoot { margin-top: 32px; }
	.nw-mast h1 { font-size: 42px; }
	.nw-mast-sub { font-size: 13px; }
	/* Two entries across the 904px measure: a 166px poster plus a 250px
	   column of text, which is a readable measure for the excerpt. */
	.nw-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; }
	.nw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 18px; }
	.nw-card h3 { font-size: 14px; }
	.nw-card.is-wide { gap: 18px; }
	.nw-card.is-wide .nw-shot { flex-basis: 166px; width: 166px; }
	.nw-card.is-wide h3 { font-size: 17px; line-height: 1.28; }
	.nw-card.is-wide .nw-excerpt { font-size: 13px; -webkit-line-clamp: 5; }

	/* "Alte stiri" stays a compact poster grid — no excerpts there. */
	.nw-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
	.nw-more-grid .nw-card { width: auto; }

	.nw-article h1 { font-size: 38px; max-width: 26ch; }
	.nw-article-head { margin-bottom: 32px; }
	.nw-article-body { grid-template-columns: minmax(0, 1fr) 264px; gap: 36px; }
	.nw-prose { font-size: 16.5px; }
	.nw-arch { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Reduced motion ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nw-page * {
		transition: none !important;
		animation: none !important;
	}
	.nw-card:hover .nw-shot img { transform: none; }
	.nw-card:hover .nw-play { transform: none; }
}