/*
 * ntw_manifesto — port of `.a-manifesto`. Words brighten as the section is read.
 *
 * The dimmed state exists only under `.ntw-anim`, and only on words the script has
 * already wrapped in `.ntw-mword` — so no JS, reduced motion, or a script error
 * leaves the sentence fully legible.
 */

.ntw-manifesto { padding-block: clamp(96px, 14vw, 200px); overflow: hidden; }

/* The texture, only when one is uploaded. Very faint, masked to one corner. */
.ntw-manifesto--tex::before {
	content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; mix-blend-mode: screen;
	background: var(--ntw-tex) center / cover no-repeat;
	-webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
	mask-image: radial-gradient(ellipse at 70% 40%, #000, transparent 70%);
}

/*
 * `26ch` is on the paragraph itself, which carries the display size — so it resolves
 * against that size, not an inherited 16px.
 */
.ntw-manifesto__text {
	position: relative; margin: 0; max-width: 26ch;
	font: 500 clamp(1.6rem, 3.6vw, 3.1rem)/1.32 var(--f-display);
	letter-spacing: -.025em; text-wrap: balance;
}
.ntw-manifesto__text em { font-style: normal; }
.ntw-mword { transition: opacity .4s linear, color .4s; }
.ntw-anim .ntw-manifesto .ntw-mword { opacity: .16; }
.ntw-anim .ntw-manifesto .ntw-mword.on { opacity: 1; }

.ntw-manifesto__small { position: relative; display: block; margin-top: 30px; font-size: 13px; letter-spacing: .06em; }