/**
 * Top strip — date, tagline, Subscribe button. Global (every page).
 * Depends on tokens in assets/css/base/variables.css. Source: Design
 * Refrance `.ui-top` — verified against the exact literal CSS values in
 * TSI About.html (grepped directly, not approximated) after a user spot-
 * check flagged a mismatch. Corrections from the first pass:
 *   - .nt is Playfair Display italic 15px, NOT Archivo — wrong font family/
 *     style entirely in the first version.
 *   - .nt b has NO color override in the source at all — it's the same
 *     white as the rest of the tagline, just bold. The first version
 *     incorrectly colored it yellow/accent; removed.
 *   - .date has a specific muted color (#bcc7b7), not plain white.
 *   - Mobile behavior wraps (date on its own full-width line above the
 *     tagline), it does NOT hide the date as the first version did.
 * Literal px values from source kept as-is rather than forced onto the
 * spacing token scale, since they don't align with it and pixel fidelity
 * to source was explicitly requested.
 *
 * Padding now driven by per-section Theme Settings (Layout → "Top
 * Strip — ...") instead of the shared --gutter-desktop token — each
 * section gets independent side/top/bottom spacing, desktop and mobile,
 * per explicit request. Defaults are unchanged from the values above.
 */

.ui-top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	padding: var(--spacing-top_strip-top) var(--spacing-top_strip-side) var(--spacing-top_strip-bottom);
	background: var(--color-bar);
	color: var(--color-white);
}

.ui-top .date {
	font-size: 12px;
	letter-spacing: 0.4px;
	color: #bcc7b7;
	white-space: nowrap;
}

.ui-top .sp {
	flex: 1;
}

.ui-top .nt {
	font-family: var(--font-secondary);
	font-size: 15px;
	font-style: italic;
	color: var(--color-white);
}

/* Confirmed directly by the user against the real design: the bolded
   part of the tagline (e.g. "No noise.") is accent yellow, not plain
   white-bold as the raw prototype's CSS technically has it. */
.ui-top .nt b {
	color: var(--color-accent);
	font-weight: 700;
	font-style: normal;
}

.ui-top .ui-sub-btn {
	order: 3;
	flex: none;
	white-space: nowrap;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	background: var(--color-accent);
	color: var(--color-ink);
	border: 0;
	border-radius: var(--radius-button);
	padding: 9px 20px;
	cursor: pointer;
	transition: 0.15s;
}

.ui-top .ui-sub-btn:hover,
.ui-top .ui-sub-btn:focus-visible {
	filter: brightness(0.94);
}

@media (max-width: 768px) {
	.ui-top {
		gap: 6px 12px;
		padding-top: var(--spacing-top_strip-top);
		padding-bottom: var(--spacing-top_strip-bottom);
		padding-inline: 16px;
	}

	.ui-top .sp {
		display: none;
	}

	.ui-top .date {
		order: 1;
		flex-basis: 100%;
		width: 100%;
	}

	.ui-top .nt {
		font-size: 13px;
		order: 2;
		flex: 1;
		min-width: 0;
	}
}