/*
Theme Name:   JPTNP
Theme URI:    https://jptnp.com/
Description:  Custom theme for jptnp.com, a Nepali humour site. Built for sharing
              and mobile reading, not for search. No page builder, no framework.
Author:       Navaraj Thapa
Author URI:   https://jptnp.com/
Version:      0.2.0
Requires PHP: 8.0
Text Domain:  jptnp
*/

/* ═══════════════════════════════════════════════════════════════════════════
   शिरोरेखा — the rail
   ───────────────────────────────────────────────────────────────────────────
   Devanagari does not sit on a baseline; it hangs from a head-line, the
   shirorekha, drawn across the top of every word. This theme borrows that as
   its layout grammar: content hangs from heavy rules rather than sitting in
   boxes. The rules run full-bleed and the text is inset from them, so the page
   reads the way the script does.

   That is the one bold move. Everything else stays quiet: no shadows, no
   gradients, no radius except on the share pills, and a single brand colour
   (sayapatri marigold) used in three places — the wordmark field, link
   underlines, and focus rings. Crimson is reserved: it means a post was
   removed after a claim, and it means nothing else.

   Owner review: this is a first pass, not a finished identity. The wordmark
   is still the site title in text — see HANDOVER, Nava's queue item 1.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
	color-scheme: light dark;

	/* Palette. Marigold is the brand; --jptnp-brand-text is the darkened
	   version for marigold-as-text, which fails contrast at full saturation. */
	--jptnp-paper: #ffffff;
	--jptnp-surface: #f2f0ea;
	--jptnp-fg: #17181c;
	--jptnp-fg-muted: #5a5c64;
	--jptnp-brand: #f2a007;
	--jptnp-brand-ink: #17181c;
	--jptnp-brand-text: #8a5a00;
	--jptnp-alert: #b3121b;

	/* Order is load-bearing. Font matching runs per character, so a Latin-first
	   stack gives Latin text the platform UI font and lets Devanagari fall
	   through to the Devanagari family — which is what we want. Reversing it
	   would render English in Noto Sans Devanagari's Latin glyphs.
	   The named families after Noto are what the platforms already ship
	   (Windows, Apple, Android), so the page reads correctly even before the
	   webfont exists — see inc/fonts.php. */
	--jptnp-font: system-ui, -apple-system, "Segoe UI", Roboto,
		"Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari",
		"Devanagari Sangam MN", sans-serif;

	/* The utility face. Monospace for dates and labels is a free second
	   typeface — no webfont, no request — and it reads as clearly non-Nepali,
	   which is exactly what metadata should be next to the joke. */
	--jptnp-font-util: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* 18px base, not 16. Devanagari carries matras above and below the line and
	   loses conjunct detail a size earlier than Latin does. */
	--jptnp-text: 1.125rem;
	--jptnp-lead: 1.25rem;
	--jptnp-util: 0.8125rem;
	--jptnp-h2: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	--jptnp-h1: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);

	/* The front-page hero only. Deliberately a step beyond --jptnp-h1, because
	   for a one-liner the headline is not a label for the post — it IS the
	   post, and it is what the share card renders at card scale. Nothing else
	   on the site is allowed this size. */
	--jptnp-hero: clamp(2.25rem, 1.5rem + 3.6vw, 3.75rem);

	/* Devanagari matras collide on wrapped text at 1.6. Headings need it too —
	   1.2 clips the top matra on a two-line headline. */
	--jptnp-leading: 1.75;
	--jptnp-leading-tight: 1.35;

	--jptnp-shell: 40rem;
	--jptnp-inset: 1.25rem;
	--jptnp-gap: 1.5rem;
	--jptnp-rule: 3px;
	--jptnp-hair: 1px;

	/* Kept: templates written before the rail direction still reference it. */
	--jptnp-measure: 68ch;
}

@media (prefers-color-scheme: dark) {
	:root {
		--jptnp-paper: #14151a;
		--jptnp-surface: #1e2027;
		--jptnp-fg: #eceae4;
		--jptnp-fg-muted: #9ea0a8;
		/* Marigold clears 8:1 on the dark ground, so text can use it directly. */
		--jptnp-brand-text: #f2a007;
		--jptnp-alert: #ff7b74;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--jptnp-paper);
	color: var(--jptnp-fg);
	font-family: var(--jptnp-font);
	font-size: var(--jptnp-text);
	line-height: var(--jptnp-leading);
	-webkit-text-size-adjust: 100%;
}

/* Never letter-space Devanagari: it separates conjuncts and breaks the
   shirorekha into dashes. Tracking below is scoped to elements explicitly
   marked lang="en" for exactly this reason. */

h1,
h2,
h3 {
	line-height: var(--jptnp-leading-tight);
	font-weight: 700;
	text-wrap: balance;
	margin: 0;
}

h1 {
	font-size: var(--jptnp-h1);
}

h2 {
	font-size: var(--jptnp-h2);
}

p {
	margin-block: 0 1em;
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration-color: var(--jptnp-brand);
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.18em;
}

a:hover {
	text-decoration-color: currentcolor;
}

/* The `hidden` attribute must win over any later display rule — the share
   button and the copy states rely on it (CLAUDE.md, common UI pitfalls). */
[hidden] {
	display: none !important;
}

:focus-visible {
	outline: var(--jptnp-rule) solid var(--jptnp-brand);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.jptnp-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10;
	background: var(--jptnp-brand);
	color: var(--jptnp-brand-ink);
	padding: 0.75rem 1rem;
	font-weight: 700;
}

.jptnp-skip:focus {
	left: 0;
}

/* ── The shell ─────────────────────────────────────────────────────────── */

.jptnp-wrap {
	max-width: var(--jptnp-shell);
	margin-inline: auto;
	padding-inline: var(--jptnp-inset);
}

/* The rail itself. Anything carrying this class hangs from a rule, and the
   rule bleeds past the text inset to the edge of the shell — on a phone, to
   the edge of the screen. */
.jptnp-rail {
	border-top: var(--jptnp-rule) solid var(--jptnp-fg);
	margin-inline: calc(var(--jptnp-inset) * -1);
	padding-inline: var(--jptnp-inset);
}

/* The eyebrow sits directly under the rule, the way a word sits under its
   shirorekha: no gap, no decoration. */
.jptnp-eyebrow {
	display: block;
	margin-block: 0.6rem 0;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jptnp-fg-muted);
}

/* Uppercasing and tracking are Latin-only treatments, so every element that
   opts into the utility face also opts into this reset. Once the site language
   is Nepali, <html lang="ne-NP"> makes :lang(ne) match everything EXCEPT the
   elements a template marks lang="en" — which is exactly the right split. Menu
   items and button labels will be Nepali and lose the treatment; the numeric
   eyebrow date is marked English and keeps it.

   The reset is the safety net, not the decoration: letter-spacing separates
   conjuncts and breaks the shirorekha into dashes. */
.jptnp-eyebrow:lang(ne),
.jptnp-share__label:lang(ne),
.jptnp-header nav a:lang(ne),
.jptnp-find summary:lang(ne),
.jptnp-search button:lang(ne) {
	font-family: var(--jptnp-font);
	text-transform: none;
	letter-spacing: normal;
}

.jptnp-eyebrow__mark {
	color: var(--jptnp-brand-text);
}

/* ── Header and footer ─────────────────────────────────────────────────── */

.jptnp-header {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	border-top: var(--jptnp-rule) solid var(--jptnp-fg);
	border-bottom: var(--jptnp-rule) solid var(--jptnp-fg);
	padding-block: 0.9rem;
	margin-bottom: 0;
}

/* The one solid field of brand colour on the page.
   Sized for the wordmark it actually holds — जे पायो त्यही, three Devanagari
   words. The vertical padding is generous because the top matras rise well
   above the shirorekha and a tight field crops them optically even though the
   glyphs never clip; 1.45 leading is for the same reason, and it is what stops
   a wrap on a 320px screen from setting the two lines on top of each other. */
.jptnp-brand {
	display: inline-block;
	background: var(--jptnp-brand);
	color: var(--jptnp-brand-ink);
	padding: 0.22em 0.45em;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.45;
	text-wrap: balance;
	text-decoration: none;
}

.jptnp-brand:hover,
.jptnp-brand:focus-visible {
	text-decoration: none;
}

.jptnp-header nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--jptnp-util);
	font-family: var(--jptnp-font-util);
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.jptnp-header nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	text-decoration: none;
}

/* Closed, it is one word sitting at the end of the wordmark row. Open, it takes
   a full row of its own and the field spans the shell — no overlay, no JS, no
   layout that only works at one width. */
.jptnp-find summary {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jptnp-fg-muted);
	cursor: pointer;
	list-style: none;
}

.jptnp-find summary::-webkit-details-marker {
	display: none;
}

.jptnp-find[open] {
	flex: 1 0 100%;
}

.jptnp-find[open] summary {
	color: var(--jptnp-brand-text);
}

.jptnp-find .jptnp-search {
	padding-block: 0 0.5rem;
}

.jptnp-footer {
	border-top: var(--jptnp-rule) solid var(--jptnp-fg);
	margin-top: 3.5rem;
	padding-block: 1.25rem 3rem;
	font-size: var(--jptnp-util);
	font-family: var(--jptnp-font-util);
	color: var(--jptnp-fg-muted);
}

.jptnp-footer p {
	margin-block: 0 0.4rem;
}

.jptnp-footer a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

/* ── The feed ──────────────────────────────────────────────────────────── */

.jptnp-card {
	padding-block: 0 2.25rem;
}

.jptnp-card__title {
	margin-block: 0.35rem 0.75rem;
}

.jptnp-card__title a {
	text-decoration: none;
}

.jptnp-card__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--jptnp-brand);
	text-decoration-thickness: 0.1em;
}

.jptnp-card p:last-child {
	margin-bottom: 0;
}

/* The empty state is the whole site until the first post exists, so it is a
   designed page rather than a placeholder. */
.jptnp-empty {
	padding-block: 3rem 4rem;
}

.jptnp-empty__lead {
	font-size: var(--jptnp-lead);
	max-width: 30ch;
}

/* ── Single post ───────────────────────────────────────────────────────── */

.jptnp-post__header {
	padding-block: 0 1.25rem;
}

.jptnp-post__date {
	margin: 0;
}

.jptnp-post__image {
	margin: 0 calc(var(--jptnp-inset) * -1) 1.5rem;
}

.jptnp-post__body {
	font-size: var(--jptnp-text);
}

.jptnp-post__footer {
	padding-block: 1.25rem 2rem;
}

.jptnp-post__nav {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
}

.jptnp-post__nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.jptnp-post__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
}

.navigation.pagination {
	padding-block: 1.5rem 2rem;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	text-decoration: none;
	border: var(--jptnp-hair) solid var(--jptnp-fg-muted);
}

.navigation.pagination .page-numbers.current {
	background: var(--jptnp-fg);
	color: var(--jptnp-paper);
	border-color: var(--jptnp-fg);
}

/* ── Attribution and takedown ──────────────────────────────────────────── */

/* Credit sits above the share row on purpose: whoever is about to pass the
   post on should see whose work it is first. */
.jptnp-credit {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	color: var(--jptnp-fg-muted);
	margin-block: 0 1.25rem;
}

.jptnp-credit a {
	color: var(--jptnp-fg);
}

/* Crimson appears here and nowhere else on the site. */
.jptnp-removed {
	border-left: var(--jptnp-rule) solid var(--jptnp-alert);
	padding: 0.75rem 1rem;
	background: var(--jptnp-surface);
}

.jptnp-removed p {
	margin: 0;
}

/* ── Share ─────────────────────────────────────────────────────────────── */

.jptnp-share__label {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jptnp-fg-muted);
	margin-block: 0 0.6rem;
}

.jptnp-share__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The single soft shape on the page, against a layout made entirely of
   straight rules. Deliberate: these are the controls that matter most, and the
   contrast is what makes them read as controls. */
.jptnp-share__link,
.jptnp-share__copy,
.jptnp-share__native {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding-inline: 1rem;
	font: inherit;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	border: 2px solid var(--jptnp-fg);
	border-radius: 999px;
	background: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.jptnp-share__native {
	background: var(--jptnp-brand);
	border-color: var(--jptnp-brand);
	color: var(--jptnp-brand-ink);
	font-weight: 700;
}

.jptnp-share__link:hover,
.jptnp-share__copy:hover {
	background: var(--jptnp-surface);
}

/* ── Prose (pages, and the takedown page) ──────────────────────────────── */

.jptnp-prose {
	padding-block: 2rem 1rem;
}

.jptnp-prose h1 {
	margin-bottom: 1rem;
}

.jptnp-prose h2 {
	margin-block: 2rem 0.75rem;
}

.jptnp-prose ol,
.jptnp-prose ul {
	padding-left: 1.25rem;
}

.jptnp-prose li {
	margin-bottom: 0.5rem;
}

.jptnp-page__body {
	padding-bottom: 1rem;
}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.jptnp-form {
	padding-block: 1rem 2rem;
}

.jptnp-form p {
	margin-bottom: 1.25rem;
}

.jptnp-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
}

.jptnp-form fieldset {
	border: var(--jptnp-hair) solid var(--jptnp-fg-muted);
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem 1rem;
}

.jptnp-form legend {
	font-weight: 600;
	padding-inline: 0.4rem;
}

.jptnp-form input[type="text"],
.jptnp-form input[type="email"],
.jptnp-form input[type="url"],
.jptnp-form textarea {
	width: 100%;
	/* 16px minimum, or iOS Safari zooms the page on focus. */
	font: inherit;
	font-size: 1rem;
	padding: 0.6rem;
	background: var(--jptnp-paper);
	color: var(--jptnp-fg);
	border: var(--jptnp-hair) solid var(--jptnp-fg-muted);
	border-radius: 0;
}

.jptnp-form input[type="checkbox"],
.jptnp-form input[type="radio"] {
	/* Comfortable to hit with a thumb; the labels beside them are long. */
	width: 1.25rem;
	height: 1.25rem;
	margin-right: 0.5rem;
	accent-color: var(--jptnp-brand);
}

.jptnp-form fieldset label,
.jptnp-form label:has(input[type="checkbox"]),
.jptnp-form label:has(input[type="radio"]) {
	display: flex;
	align-items: flex-start;
	gap: 0.15rem;
	min-height: 2.75rem;
	font-weight: 400;
}

.jptnp-form button {
	font: inherit;
	font-weight: 700;
	min-height: 2.75rem;
	padding-inline: 1.5rem;
	background: var(--jptnp-brand);
	color: var(--jptnp-brand-ink);
	border: 2px solid var(--jptnp-brand);
	cursor: pointer;
}

/* Honeypot: hidden from people, present for bots. Not `hidden`, not
   display:none on a wrapper a bot can detect trivially — off-canvas. */
.jptnp-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.jptnp-notice {
	border-left: var(--jptnp-rule) solid var(--jptnp-fg);
	background: var(--jptnp-surface);
	padding: 0.75rem 1rem;
	margin-block: var(--jptnp-gap);
}

.jptnp-notice p {
	margin: 0;
}

.jptnp-notice--ok {
	border-left-color: var(--jptnp-brand);
}

.jptnp-notice--error {
	border-left-color: var(--jptnp-alert);
}

.jptnp-fineprint {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	color: var(--jptnp-fg-muted);
	padding-bottom: 2rem;
}

/* ── Search ────────────────────────────────────────────────────────────── */

.jptnp-search {
	display: flex;
	gap: 0.5rem;
	padding-block: 1.25rem;
}

.jptnp-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	font: inherit;
	font-size: 1rem;
	padding: 0.6rem;
	background: var(--jptnp-paper);
	color: var(--jptnp-fg);
	border: var(--jptnp-hair) solid var(--jptnp-fg-muted);
	border-radius: 0;
}

.jptnp-search button {
	font: inherit;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	min-height: 2.75rem;
	padding-inline: 1rem;
	background: var(--jptnp-fg);
	color: var(--jptnp-paper);
	border: 2px solid var(--jptnp-fg);
	cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Front page
   ───────────────────────────────────────────────────────────────────────────
   The hero repeats the share card: marigold field, rule across the top,
   headline set at card scale. Someone who taps a card on Facebook should land
   on a page that looks like the card they tapped — on a site distributed as
   screenshots of an unmemorable domain, that recognition is the whole job.
   See PLAN.md §2 fact 1 and §5 Phase 3b.

   The field stays marigold in dark mode. It is the one place the theme does
   not adapt, and that is deliberate: the share card is a fixed image, always
   marigold, so a hero that went dark at night would break the parity that is
   the point of the design. --jptnp-brand-ink is near-black and clears contrast
   on marigold in both schemes.
   ═══════════════════════════════════════════════════════════════════════════ */

.jptnp-home {
	/* No shell here — the hero bleeds to the screen edge. Each section below
	   applies its own inset, rather than a blanket `.jptnp-home > *` rule that
	   the hero would then have to fight. */
	margin: 0;
}

.jptnp-hero {
	background: var(--jptnp-brand);
	color: var(--jptnp-brand-ink);
	border-top: var(--jptnp-rule) solid var(--jptnp-brand-ink);
	padding-block: 2.75rem 2.25rem;
	padding-inline: var(--jptnp-inset);
}

.jptnp-hero__inner {
	max-width: var(--jptnp-shell);
	margin-inline: auto;
}

.jptnp-hero__title {
	font-size: var(--jptnp-hero);
	/* Tighter than the global heading leading: at this size the default opens
	   gaps a headline cannot carry. Still loose enough for a top matra when the
	   content turns Nepali. */
	line-height: 1.15;
	margin-block: 0.5rem 0;
}

.jptnp-hero__link {
	color: inherit;
	text-decoration: none;
	display: block;
}

.jptnp-hero__link:hover .jptnp-hero__title {
	text-decoration: underline;
	text-decoration-thickness: 0.06em;
	text-underline-offset: 0.12em;
}

.jptnp-hero__lead {
	font-size: var(--jptnp-lead);
	max-width: 32ch;
	margin-block: 1rem 0;
}

/* The eyebrow and credit invert inside the field. Their usual colours —
   --jptnp-brand-text and --jptnp-fg-muted — are tuned for paper and are
   unreadable on marigold. */
.jptnp-hero .jptnp-eyebrow,
.jptnp-hero .jptnp-eyebrow__mark,
.jptnp-hero .jptnp-credit,
.jptnp-hero .jptnp-credit a {
	color: var(--jptnp-brand-ink);
}

.jptnp-hero .jptnp-credit {
	margin-block: 1rem 0;
}

.jptnp-hero :focus-visible {
	outline: 3px solid var(--jptnp-brand-ink);
	outline-offset: 3px;
}

/* ── Formats ───────────────────────────────────────────────────────────────
   A list hanging from one rule, not a row of buttons: the shirorekha with
   words beneath it. Stacked rather than side-by-side because "Nepali internet,
   explained" does not fit three-across in a 40rem shell, and stacking keeps
   the tap targets full-width on a phone.

   Rendered only for formats that have posts — see front-page.php. With zero
   posts the whole block is absent, so the page must read as finished without
   it. */

.jptnp-formats {
	max-width: var(--jptnp-shell);
	margin: 2.5rem auto 0;
	padding-inline: var(--jptnp-inset);
}

.jptnp-formats__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.9rem;
	border-top: var(--jptnp-hair) solid var(--jptnp-fg);
	color: inherit;
	text-decoration: none;
}

.jptnp-formats__item:first-child {
	border-top-width: var(--jptnp-rule);
}

.jptnp-formats__item:last-child {
	border-bottom: var(--jptnp-hair) solid var(--jptnp-fg);
}

.jptnp-formats__item:hover .jptnp-formats__label {
	text-decoration: underline;
	text-decoration-color: var(--jptnp-brand);
	text-decoration-thickness: 0.1em;
}

.jptnp-formats__label {
	font-weight: 700;
}

/* The count is machinery, so it takes the utility face — the same two-voice
   split the eyebrow uses: sans for the jokes, mono for everything about
   them. */
.jptnp-formats__count {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	color: var(--jptnp-fg-muted);
	font-variant-numeric: tabular-nums;
}

/* ── Latest ────────────────────────────────────────────────────────────────
   Titles only, no excerpts. On this site the headline is usually the entire
   post, so an excerpt would repeat it. */

.jptnp-latest {
	max-width: var(--jptnp-shell);
	margin: 2.5rem auto 0;
	padding-inline: var(--jptnp-inset);
}

.jptnp-latest__heading {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jptnp-fg-muted);
	margin-block: 0 0.75rem;
}

.jptnp-latest__item {
	padding-block: 0 1.5rem;
}

.jptnp-latest__title {
	font-size: var(--jptnp-h2);
	margin-block: 0.35rem 0.5rem;
}

.jptnp-latest__title a {
	text-decoration: none;
}

.jptnp-latest__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--jptnp-brand);
	text-decoration-thickness: 0.1em;
}

.jptnp-more {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	text-transform: uppercase;
	letter-spacing: 0.09em;
	border-top: var(--jptnp-rule) solid var(--jptnp-fg);
	padding-block: 1rem;
	margin: 0;
}

/* ── Blog index header ─────────────────────────────────────────────────── */

.jptnp-index__header {
	padding-block: 1.5rem 2rem;
}

.jptnp-index__title {
	font-size: var(--jptnp-h1);
}

/* ── Channels ──────────────────────────────────────────────────────────────
   The follow row. Text labels, never brand icons: this theme has no images
   anywhere, and four inline logos would be the heaviest thing on the page.

   Two variants of one component. The front-page one is a destination — it can
   be the only thing under the hero before post #1, so it carries a rule and
   real tap targets. The footer one is a footnote and inherits the footer's
   mono, muted treatment. */

.jptnp-channels--front {
	max-width: var(--jptnp-shell);
	margin: 3rem auto 0;
	padding-inline: var(--jptnp-inset);
}

.jptnp-channels__label {
	margin-block: 0 0.75rem;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--jptnp-fg-muted);
}

/* Reset only — each variant sets its own display, so no base flex to override. */
.jptnp-channels__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── front variant ── */

.jptnp-channels--front .jptnp-channels__label {
	border-top: var(--jptnp-rule) solid var(--jptnp-fg);
	padding-top: 0.6rem;
	margin-block: 0 0;
}

.jptnp-channels--front .jptnp-channels__link {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0.9rem;
	border-top: var(--jptnp-hair) solid var(--jptnp-fg);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.jptnp-channels--front .jptnp-channels__item:first-child .jptnp-channels__link {
	border-top: 0;
}

.jptnp-channels--front .jptnp-channels__link::after {
	content: "→";
	margin-inline-start: auto;
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	color: var(--jptnp-fg-muted);
}

.jptnp-channels--front .jptnp-channels__link:hover,
.jptnp-channels--front .jptnp-channels__link:focus-visible {
	color: var(--jptnp-brand-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ── footer variant ── */

.jptnp-channels--footer {
	margin-block: 0 0.9rem;
}

.jptnp-channels--footer .jptnp-channels__label {
	display: inline;
	margin: 0;
}

.jptnp-channels--footer .jptnp-channels__label::after {
	content: " ";
}

.jptnp-channels--footer .jptnp-channels__list {
	display: inline-flex;
	flex-wrap: wrap;
	column-gap: 1rem;
	row-gap: 0;
	vertical-align: baseline;
}

/* No min-height here: `.jptnp-footer a` already makes every footer link an
   inline-flex 2.75rem tap target, and repeating it at higher specificity is the
   kind of duplicate that later gets edited in one place only. */

/* ── The glossary ──────────────────────────────────────────────────────────
   "Nepali internet, explained" is a reference, not a stream, so its archive is
   alphabetical and unpaginated (category-explained.php). The letter headings
   are the structure: they encode where you are in the alphabet, which is real
   information here, unlike a decorative 01/02/03. */

.jptnp-glossary__letter {
	font-family: var(--jptnp-font-util);
	font-size: var(--jptnp-util);
	font-weight: 600;
	letter-spacing: 0.16em;
	color: var(--jptnp-fg-muted);
	border-top: var(--jptnp-rule) solid var(--jptnp-fg);
	margin-block: 2rem 0;
	padding-top: 0.5rem;
}

.jptnp-glossary__letter:first-child {
	margin-block-start: 0;
}

.jptnp-glossary__entry {
	border-top: var(--jptnp-hair) solid var(--jptnp-fg);
	padding-block: 0.9rem;
}

.jptnp-glossary__letter + .jptnp-glossary__entry {
	border-top: 0;
}

.jptnp-glossary__title {
	font-size: 1.0625rem;
	line-height: 1.35;
	margin: 0;
}

.jptnp-glossary__title a {
	color: inherit;
	text-decoration: none;
}

.jptnp-glossary__title a:hover,
.jptnp-glossary__title a:focus-visible {
	color: var(--jptnp-brand-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.jptnp-index__lead {
	margin-block: 0.5rem 0;
	color: var(--jptnp-fg-muted);
}

/* The more-row now holds two links, so it lays them out rather than relying on
   a single anchor sitting alone. */
.jptnp-more {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}