/* The New Steam Times — broadsheet styling over Colcade. */

body {
	background-color: #e9e1cd;
	background-image: url("../features/the_new_steam_times/images/newspaper_bgd.a5b3afda7864.jpg");
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: top center;
}

/* ===== PAGE WRAPPER ===== */
.nst-page {
	--nst-paper:       #e9e1cd;
	--nst-paper-dark:  #d8cdb1;
	--nst-ink:         #1a140d;
	--nst-ink-soft:    #2d2418;
	--nst-rubric:      #a8231a;
	--nst-rubric-dark: #7a1812;
	--nst-plate:       #15110c;
	--nst-plate-edge:  #0a0805;

	color: var(--nst-ink);
	font-family: "Cormorant Garamond", "EB Garamond", "Times New Roman", serif;
	position: relative;
	isolation: isolate;
}

/* ===== MASTHEAD ===== */
.nst-mast {
	text-align: center;
	border-bottom: 3px double var(--nst-ink);
	padding-bottom: 14px;
	margin-bottom: 8px;
}
.nst-mast-kicker {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--nst-ink-soft);
	margin-bottom: 4px;
}
.nst-mast-title {
	font-family: "UnifrakturCook", "UnifrakturMaguntia", "Old English Text MT", serif;
	font-weight: 700;
	font-size: 75px;
	line-height: 0.95;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--nst-ink);
}
.nst-mast-rule {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 8px 4px 0;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--nst-ink-soft);
}
.nst-mast-rule span {
	font-family: "Courier Prime", "Courier New", monospace;
	font-weight: 700;
}
.nst-mast-rule .nst-mast-rule-mid {
	font-style: italic;
	font-family: "Cormorant Garamond", serif;
	letter-spacing: 0.04em;
	text-transform: none;
	font-size: 15px;
}

/* ===== SUB-HEADLINE ===== */
.nst-subhead {
	font-family: "Playfair Display", serif;
	text-align: center;
	font-style: italic;
	font-size: 28px;
	font-weight: 500;
	margin: 22px 0 8px;
	color: var(--nst-ink);
}
.nst-rule {
	border: 0;
	border-top: 1px solid var(--nst-ink);
	margin: 6px 0 28px;
}

/* ===== GRID ===== */
.nst-grid {
	display: grid;
	grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);
	gap: 0 28px;
	align-items: start;
}
.nst-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.nst-col-rule {
	background: repeating-linear-gradient(0deg, var(--nst-ink) 0 6px, transparent 6px 10px);
	width: 1px;
	align-self: stretch;
	margin-top: 12px;
}

/* Hide cards until Colcade reparents them — selector stops matching after move. */
.nst-grid > .nst-card {
	display: none;
}

/* JS adds .py-3 for trigger margin. */
.nst-col-sentinel {
	min-height: 1px;
}

/* ===== RESPONSIVE =====
   Children: col(1) rule(2) col(3) rule(4) col(5). :nth-child not :nth-of-type — all <div>. */
@media (max-width: 1100px) {
	.nst-grid {
		grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr);
	}
	.nst-grid > :nth-child(4) { display: none; }   /* Hide the 2nd column rule. */
	.nst-grid > :nth-child(5) {                    /* Wrap the 3rd column full-width below. */
		grid-column: 1 / -1;
		margin-top: 28px;
		border-top: 3px double var(--nst-ink);
		padding-top: 24px;
	}
	.nst-mast-title { font-size: 56px; }
	.nst-page { padding: 36px 32px 64px; }
}
@media (max-width: 720px) {
	.nst-grid { grid-template-columns: 1fr; gap: 0; }
	.nst-grid > :nth-child(2),
	.nst-grid > :nth-child(4) { display: none; }   /* Hide both column rules. */
	.nst-grid > :nth-child(3),
	.nst-grid > :nth-child(5) {
		margin-top: 36px;
		border-top: 3px double var(--nst-ink);
		padding-top: 24px;
	}
	.nst-mast-title { font-size: 38px; letter-spacing: 0; }
	.nst-mast-rule { flex-direction: column; gap: 6px; text-align: center; }
	.nst-subhead { font-size: 22px; }
	.nst-page { padding: 24px 16px 48px; }
}

/* ===== CAPSULE — dark "photographic plate" pasted on the paper ===== */
.nst-cap {
	position: relative;
	background: var(--nst-plate);
	color: #e8e2d0;
	border: 1px solid var(--nst-plate-edge);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.04) inset,
		0 2px 6px rgba(0,0,0,0.25),
		0 14px 28px -10px rgba(0,0,0,0.35);
	font-family: "Inria Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	overflow: hidden;   /* Clip Steam media to width. */
	transition: box-shadow 200ms ease;
}

.nst-cap-toplink {
	display: block;
	color: inherit;
	text-decoration: none;
}
/* Extend the toplink's hit area to cover the whole card. Body and footer are siblings
 * of the toplink in the DOM, but the ::after's absolute positioning references .nst-cap
 * (the nearest positioned ancestor), so the whole card becomes one click target.
 */
.nst-cap-toplink::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Body description links and any in-card interactive elements need to layer above the
 * card-wide ::after so they stay individually clickable.
 */
.nst-cap-body a { position: relative; z-index: 2; }
.nst-foot-cta { position: relative; z-index: 2; }
.nst-cap:has(.nst-cap-toplink:hover) {
	box-shadow:
		0 1px 0 rgba(255,255,255,0.06) inset,
		0 4px 12px rgba(0,0,0,0.6),
		0 22px 44px -10px rgba(0,0,0,0.75);
}

/* ===== RED HEADER ===== */
.nst-cap-head {
	position: relative;
	background: var(--nst-rubric);
	color: #f7ecd6;
	padding: 14px 16px 12px;
	border-bottom: 1px solid rgba(0,0,0,0.4);
	box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset;
}
.nst-cap-head::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 4px;
	background: linear-gradient(90deg, transparent, var(--nst-rubric-dark), transparent);
	opacity: 0.7;
}
.nst-cap-kicker {
	font-family: "Courier Prime", monospace;
	font-size: 12px;
	text-transform: uppercase;
	opacity: 0.85;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 4px;
}
.nst-cap-tags { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.nst-cap-date { white-space: nowrap; }

.nst-cap-title {
	font-family: "Playfair Display", "Cormorant Garamond", serif;
	font-weight: 900;
	font-size: 24px;
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
	text-wrap: balance;
}
/* Title variants by appid % 3. */
.nst-cap--a .nst-cap-title { font-size: 30px; }
.nst-cap--b .nst-cap-title {
	font-family: "Courier Prime", monospace;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.005em;
}
.nst-cap--c .nst-cap-title {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 21px;
}

/* ===== HERO IMAGE ===== */
.nst-cap-hero {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid rgba(0,0,0,0.5);
	filter: contrast(1.05) saturate(0.92);
}

/* ===== STAT STRIP ===== */
.nst-cap-stat {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0;
	border-bottom: 1px solid #2a2018;
	background: #0c0907;
}
.nst-cap-stat > * {
	padding: 10px 12px;
	border-right: 1px solid #2a2018;
}
.nst-cap-stat > *:last-child { border-right: 0; }

.nst-stat-score {
	font-family: "Playfair Display", serif;
	font-weight: 900;
	font-size: 30px;
	line-height: 1;
	color: #e8e2d0;
}
.nst-stat-score-sub {
	font-family: "Courier Prime", monospace;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: 0.15em;
	color: #8a7a5e;
	margin-top: 4px;
}
.nst-stat-noreviews {
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.1;
	color: #bfb29a;
}

.nst-stat-mid {
	font-family: "Cormorant Garamond", serif;
	font-style: italic;
	font-size: 14px;
	line-height: 1.3;
	color: #bfb29a;
	display: flex;
	align-items: center;
	padding: 8px 14px;
}

.nst-stat-price { text-align: right; }
.nst-price-final {
	font-family: "Playfair Display", serif;
	font-weight: 900;
	font-size: 22px;
	color: #f0e4ca;
	display: block;
}
.nst-price-orig {
	font-family: "Courier Prime", monospace;
	font-size: 12px;
	color: #7a6b51;
	text-decoration: line-through;
	display: block;
}
.nst-price-disc {
	font-family: "Courier Prime", monospace;
	font-size: 12px;
	color: var(--nst-rubric);
	font-weight: 700;
	display: block;
	letter-spacing: 0.1em;
}

/* ===== VIDEO TRAILER ===== */
.nst-cap-video {
	display: block;
	width: 100%;
	height: auto;
	border-bottom: 1px solid #2a2018;
}

/* ===== BODY ===== */
.nst-cap-body {
	padding: 18px 20px 4px;
}
.nst-cap-body > * + * { margin-top: 14px; }

.nst-cap-body p,
.nst-cap-body div {
	font-family: "Inria Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.2;
	color: #e8e2d0;
}
.nst-cap-body strong,
.nst-cap-body b { color: #f0e4ca; }
.nst-cap-body em,
.nst-cap-body i { color: #e8d8b4; }

.nst-cap-body a {
	color: #f0e4ca;
	text-decoration: underline;
	text-decoration-color: var(--nst-rubric);
	text-underline-offset: 2px;
}
.nst-cap-body a:hover { text-decoration-color: #f0e4ca; }

.nst-cap-body h1,
.nst-cap-body h2,
.nst-cap-body h3,
.nst-cap-body h4,
.nst-cap-body h5,
.nst-cap-body h6 {
	font-family: "Inria Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0;
	color: var(--nst-rubric);
	border-bottom: 1px solid #3a2a22;
	padding-bottom: 4px;
}

.nst-cap-body blockquote {
	margin: 0;
	padding: 14px 18px;
	border-left: 3px solid var(--nst-rubric);
	font-family: "Playfair Display", serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.35;
	color: #f0e4ca;
	background: rgba(168,35,26,0.06);
}

.nst-cap-body ul,
.nst-cap-body ol {
	margin: 0;
	padding-left: 18px;
	list-style: none;
}
.nst-cap-body li {
	position: relative;
	padding: 4px 0 4px 14px;
	font-size: 15px;
	line-height: 1.4;
	color: #d8cdb1;
}
.nst-cap-body li::before {
	content: "§";
	position: absolute;
	left: -2px;
	top: 4px;
	color: var(--nst-rubric);
	font-weight: 700;
}

.nst-cap-body img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid #2a2018;
	filter: contrast(1.05) saturate(0.9);
	margin: 1rem auto;
}
.nst-cap-body video,
.nst-cap-body iframe {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1rem auto;
}
.nst-cap-body table {
	max-width: 100%;
	table-layout: fixed;
	word-wrap: break-word;
}

/* JS tags one <p> with .nst-drop-cap; pure CSS :first-of-type would fire per wrapper. */
.nst-cap--a .nst-drop-cap::first-letter {
	font-family: "Playfair Display", serif;
	font-weight: 900;
	font-size: 64px;
	float: left;
	line-height: 0.85;
	margin: 6px 8px -2px 0;
	color: var(--nst-rubric);
}

/* ===== FOOTER ===== */
.nst-cap-foot {
	border-top: 1px solid #2a2018;
	margin-top: 12px;
	padding: 14px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
}
.nst-foot-meta {
	font-family: "Courier Prime", monospace;
	font-size: 18px;
	letter-spacing: 0.12em;
	color: #8a7a5e;
	text-transform: uppercase;
	line-height: 1.1;
}
.nst-foot-meta strong {
	color: #bfb29a;
	font-weight: 700;
}
.nst-foot-cta {
	font-family: "Playfair Display", serif;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #0c0907;
	background: #e8e2d0;
	padding: 8px 14px;
	border: 1px solid var(--nst-ink);
	text-decoration: none;
	white-space: nowrap;
}
.nst-foot-cta:hover { background: var(--nst-paper-dark); }
.nst-foot-cta::after { content: " →"; }