/* TemplateStyles for {{Newsletter layout}}, the Miniscope Newsletter layout (since 2026-09-24).

   Magazine-style issue: the Main Page banner, an "In this issue" strip,
   three wide sections (text | image | side list), then three columns.
   Everything stacks to one column below 960px.

   Only features already used by other stylesheets on this wiki
   (grid, flex, @media, !important). var() is kept to
   color, background and border properties. All class names start with
   nlx- so nothing here touches the current newsletter design. */

.nlx {
	max-width: 66rem;
	margin: 0 auto;
	color: var(--labki-text, #1c2833);
}

.nlx p {
	margin: 0 0 0.7em 0;
	line-height: 1.55;
}

/* ---------- Shared type ----------

   Section headings are h3, not h2: the skin puts a rule under every
   h2 with an ID selector (#content h2), which a TemplateStyles class
   can't outrank. */

.nlx-eyebrow {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--labki-text-muted, #3b4855);
}

.nlx-n {
	margin-right: 0.9em;
}

.nlx .nlx-h {
	margin: 0.3em 0 0.45em 0;
	padding: 0;
	border: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.9rem;
	font-weight: 400;
	line-height: 1.15;
	color: var(--labki-text, #1c2833);
}

/* ---------- Masthead ----------

   The banner is {{UI/hero}}, styled by Template:UI/hero/styles.css.
   On the Main Page it uses negative margins to reach the content card's
   edges (MediaWiki:Common.css removes the padding there). On an issue
   page those margins push it out of the column, so .nlx-banner resets
   them and lines the banner up with the sections below. The text area
   is narrower than the Main Page's because "Miniscope Newsletter" is
   longer than "Miniscope.org" and would otherwise run into the devices.
   The default image, File:Miniscope Newsletter banner.webp, is the Main
   Page banner with the devices smaller and further right, made by
   content/newsletters/images/2026-09-24_make-banner-newsletter.py. */

.nlx-banner {
	max-width: 66rem;
	margin: 0 auto;
}

.nlx-banner .wiki-hero {
	margin: 0;
	border-radius: 6px;
}

.nlx-banner .wiki-hero__content {
	max-width: 470px;
}

.nlx-hero-meta {
	display: block;
	margin-top: 0.9em;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--labki-text-muted, #3b4855);
}

.nlx {
	margin-top: 22px;
}

/* ---------- Draft notice ---------- */

.nlx-draft {
	max-width: 66rem;
	margin: 0 auto 14px auto;
	padding: 0.6em 0.9em;
	border: 1px dashed var(--labki-border, #d9dee3);
	background: var(--labki-bg-subtle, #f4f6f8);
	color: var(--labki-text, #1c2833);
	font-size: 0.95rem;
}

/* ---------- In this issue ---------- */

.nlx-toc {
	margin: 0 0 6px 0;
	padding: 14px 18px 16px 18px;
	border-radius: 4px;
	background: var(--labki-bg-subtle, #eef1f3);
}

.nlx-toc-title {
	margin: 0 0 10px 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.25rem;
}

.nlx-toc ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlx-toc li {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
	padding: 4px 12px;
	border-left: 1px solid var(--labki-border, #d9dee3);
	font-size: 0.85rem;
	line-height: 1.25;
}

.nlx-toc li:first-child {
	padding-left: 0;
	border-left: 0;
}

.nlx-toc a {
	text-decoration: none;
	color: var(--labki-text, #1c2833);
}

.nlx-toc .nlx-n {
	display: block;
	margin: 0;
	font-size: 0.72rem;
	color: var(--labki-text-muted, #5f6d7a);
}

.nlx-ico img {
	display: block;
}

/* ---------- Wide sections ---------- */

.nlx-sec {
	padding: 22px 0 24px 0;
	border-top: 1px solid var(--labki-border, #d9dee3);
}

.nlx-lead {
	display: grid;
	grid-template-columns: 1.1fr 1fr 0.8fr;
	gap: 26px;
	align-items: start;
}

.nlx-lead.nlx-noimg {
	grid-template-columns: 1.4fr 0.8fr;
}

.nlx-lead.nlx-noside {
	grid-template-columns: 1fr 1fr;
}

.nlx-lead.nlx-noimg.nlx-noside {
	grid-template-columns: 1fr;
}

.nlx-fig img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.nlx-btn {
	margin-top: 10px;
}

/* !important because the skin's external-link rule (#content
   a.external) replaces the background with its arrow icon, which
   left white text on nothing. */
.nlx-btn a,
.nlx-btn a.external {
	display: inline-block;
	padding: 0.5em 1.2em !important;
	border-radius: 2px;
	background: #1f3346 !important;
	color: #ffffff !important;
	font-weight: 600;
	text-decoration: none;
}

.nlx-btn a::after {
	content: "  →";
}

/* Side list: "A few places to start", "Links", "What's new". */

.nlx-side-title {
	margin: 0 0 10px 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--labki-text-muted, #3b4855);
}

.nlx-side ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nlx-side li {
	margin: 0 0 0.75em 0;
	font-size: 0.9rem;
	line-height: 1.35;
	color: var(--labki-text-muted, #5f6d7a);
}

.nlx-side li b {
	display: block;
}

.nlx-side-research,
.nlx-side-project {
	padding: 14px 16px;
	border-radius: 4px;
	background: var(--labki-bg-subtle, #eef1f3);
}

.nlx-side-research li {
	font-weight: 600;
}

.nlx-side-project li {
	position: relative;
	padding-left: 1.6em;
	color: var(--labki-text, #1c2833);
}

.nlx-side-project li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
}

/* ---------- Bottom row: three columns ---------- */

.nlx-cols {
	display: grid;
	grid-template-columns: 1.25fr 1fr 1fr;
	border-top: 1px solid var(--labki-border, #d9dee3);
}

.nlx-cols-2 {
	grid-template-columns: 1fr 1fr;
}

.nlx-cols-1 {
	grid-template-columns: 1fr;
}

.nlx-cols .nlx-sec {
	padding-right: 22px;
	border-top: 0;
}

.nlx-cols .nlx-col + .nlx-col {
	padding-left: 22px;
	border-left: 1px solid var(--labki-border, #d9dee3);
}

.nlx-col .nlx-h {
	font-size: 1.5rem;
}

.nlx-captions ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 6px 0 10px 0;
	padding: 0;
	list-style: none;
}

.nlx-captions li {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--labki-text-muted, #5f6d7a);
}

.nlx-captions li b {
	display: block;
	color: var(--labki-text, #1c2833);
}

.nlx-questions ul {
	margin: 0.6em 0;
	padding: 0;
	list-style: none;
}

.nlx-questions li {
	margin: 0 0 0.4em 0;
	padding: 0.4em 0.7em;
	border: 1px solid var(--labki-border, #d9dee3);
	border-radius: 3px;
	font-size: 0.88rem;
	line-height: 1.3;
}

.nlx-standing {
	margin: 0.8em 0;
	padding: 0;
	list-style: none;
}

.nlx-standing li {
	margin: 0 0 0.75em 0;
	font-size: 0.88rem;
	line-height: 1.35;
	color: var(--labki-text-muted, #5f6d7a);
}

.nlx-standing li b {
	display: block;
}

.nlx-more {
	margin-top: 8px;
	font-weight: 600;
}

.nlx-more a::after {
	content: " →";
}

/* ---------- Footer ---------- */

.nlx-foot {
	margin-top: 8px;
	padding-top: 14px;
	border-top: 1px solid var(--labki-border, #d9dee3);
	font-size: 0.88rem;
	color: var(--labki-text-muted, #5f6d7a);
}

.nlx-foot-note {
	max-width: 48rem;
	margin: 0 0 0.6em 0;
	line-height: 1.5;
}

.nlx-foot-sign {
	margin-top: 1em;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 960px) {
	.nlx-banner .wiki-hero {
		border-radius: 0;
	}

	.nlx-lead,
	.nlx-lead.nlx-noimg,
	.nlx-lead.nlx-noside,
	.nlx-cols,
	.nlx-cols-2 {
		grid-template-columns: 1fr;
	}

	.nlx-cols .nlx-sec {
		padding-right: 0;
		border-top: 1px solid var(--labki-border, #d9dee3);
	}

	.nlx-cols .nlx-col + .nlx-col {
		padding-left: 0;
		border-left: 0;
	}

	.nlx-toc li {
		padding-left: 0;
		border-left: 0;
	}

}