/* PNGNRLC — Our Competitions v2 (page 3560).
 *
 * Scoped under .pngrfl-nrlc so none of it reaches the rest of the site.
 *
 * Horizontal measurements are in cqi, not vw. The theme reserves a fixed
 * 230px sidebar, so the content column is always narrower than the viewport
 * and a 5vw gutter computed against the viewport overshoots it — the same
 * trap that pushed the competition hero titles out of their column. Each
 * widget root is its own inline-size container and the gutters are read off
 * that. Vertical rhythm stays in vh, which the sidebar does not affect.
 */

.pngrfl-nrlc {
	/* Deliberately NOT a query container. Type here is sized in cqi, and the
	   design scales it off the section width — the same 4.4vw the reference
	   uses against the viewport. Making every widget its own container made
	   cqi mean "this column", so a heading in a 420px column resolved to
	   22px and sat on its 32px clamp floor while the identical heading in a
	   full-width section rendered at 53px. The containers are the sections
	   below. */
	--nrlc-ink: #12100F;
	--nrlc-paper: #F7F4EF;
	--nrlc-white: #FFFFFF;
	--nrlc-gold: #E8B23A;
	--nrlc-red: #C0392B;
	--nrlc-body: #4A433F;
	--nrlc-meta: #6B635E;
	--nrlc-rule: #D5CDC4;
	--nrlc-rule-dark: #3A3431;
	--nrlc-panel-dark: #1D1A18;
	--nrlc-plate: #2A2523;
	--nrlc-measure: 1280px;
	--nrlc-gutter: 5cqi;
	font-family: Archivo, Helvetica, Arial, sans-serif;
	color: var(--nrlc-ink);
	box-sizing: border-box;
}

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

.pngrfl-nrlc__in {
	max-width: var(--nrlc-measure);
	margin-inline: auto;
}

/* Section shells ------------------------------------------------------- */

.pngrfl-nrlc__sec {
	container-type: inline-size;
	padding: 12vh var(--nrlc-gutter) 0;
}

.pngrfl-nrlc__sec.is-dark {
	container-type: inline-size;
	margin-top: 12vh;
	padding: 12vh var(--nrlc-gutter);
	background: var(--nrlc-ink);
	color: var(--nrlc-paper);
	position: relative;
	overflow: hidden;
}

/* The 135° stripe behind the ink sections. */
.pngrfl-nrlc__stripe {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px);
	opacity: .6;
	pointer-events: none;
}

.pngrfl-nrlc__sec.is-dark > .pngrfl-nrlc__in { position: relative; }

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

.pngrfl-nrlc__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--nrlc-red);
}

.is-dark .pngrfl-nrlc__eyebrow,
.pngrfl-nrlc__eyebrow.is-gold { color: var(--nrlc-gold); }

.pngrfl-nrlc__eyebrow i {
	width: 34px;
	height: 2px;
	background: var(--nrlc-red);
	display: block;
	flex: none;
}

.pngrfl-nrlc h2.pngrfl-nrlc__h2 {
	margin: 0;
	font-size: clamp(32px, 4.4cqi, 56px);
	line-height: .95;
	font-weight: 800;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: inherit;
}

.pngrfl-nrlc h3.pngrfl-nrlc__h3 {
	margin: 0;
	font-size: clamp(26px, 3cqi, 38px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: inherit;
}

.pngrfl-nrlc__lead {
	margin: 0;
	font-size: 19px;
	line-height: 1.5;
	font-weight: 600;
	text-wrap: pretty;
}

.pngrfl-nrlc__rt p { margin: 0 0 14px; }
.pngrfl-nrlc__rt p:last-child { margin-bottom: 0; }

.pngrfl-nrlc a { text-decoration: none; }
.pngrfl-nrlc :focus-visible {
	outline: 3px solid var(--nrlc-gold);
	outline-offset: 3px;
}

/* 1 — Hero ------------------------------------------------------------- */

.pngrfl-phero.is-nrlc {
	container-type: inline-size;
	position: relative;
	overflow: hidden;
	background: var(--nrlc-ink);
	color: var(--nrlc-paper);
	padding: 10vh var(--nrlc-gutter) 14vh;
}

.pngrfl-phero.is-nrlc .pngrfl-nrlc__stripe { opacity: 1; }

.pngrfl-phero__bg {
	position: absolute;
	inset: 0 0 0 48%;
	opacity: .55;
	pointer-events: none;
}

.pngrfl-phero__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pngrfl-phero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #12100F 0%, rgba(18,16,15,.4) 45%, rgba(18,16,15,0) 100%);
}

.pngrfl-phero.is-nrlc .pngrfl-phero__in {
	position: relative;
	max-width: var(--nrlc-measure);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	/* The default hero is a two-column grid with align-items:end, which is
	   sensible there and ruinous here: on a column flex container that same
	   declaration becomes horizontal alignment, so every child shrinks to
	   its content and pins right — the h1 collapsed to zero width. */
	align-items: stretch;
	gap: 28px;
}

.pngrfl-phero.is-nrlc .pngrfl-phero__lead {
	gap: 22px;
	min-width: 0;
}

.pngrfl-phero__brand {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

.pngrfl-phero__mark {
	width: 84px;
	height: 84px;
	background: var(--nrlc-white);
	padding: 8px;
	flex: none;
}

.pngrfl-phero__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pngrfl-phero.is-nrlc .pngrfl-phero__title {
	margin: 0;
	font-size: clamp(40px, 7cqi, 96px);
	line-height: .92;
	font-weight: 800;
	letter-spacing: -.03em;
	text-transform: uppercase;
	max-width: 14ch;
	color: inherit;
}

.pngrfl-phero__subtitle {
	margin: 0;
	font-size: clamp(20px, 2.2cqi, 28px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--nrlc-gold);
	max-width: 30ch;
	text-wrap: pretty;
}

.pngrfl-phero.is-nrlc .pngrfl-phero__copy {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 60ch;
}

.pngrfl-phero.is-nrlc .pngrfl-phero__intro p {
	margin: 0 0 14px;
	font-size: 18px;
	line-height: 1.6;
	text-wrap: pretty;
}

.pngrfl-phero.is-nrlc .pngrfl-phero__intro p:last-child { margin-bottom: 0; }

.pngrfl-phero.is-nrlc .pngrfl-phero__sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(247,244,239,.8);
	text-wrap: pretty;
}

/* 2 — Competition cards ------------------------------------------------ */

.pngrfl-comps.is-nrlc {
	container-type: inline-size;
	padding-inline: var(--nrlc-gutter);
	position: relative;
}

.pngrfl-comps.is-nrlc.is-overlap { margin-top: -8vh; }

.pngrfl-comps.is-nrlc .pngrfl-comps__grid {
	max-width: var(--nrlc-measure);
	margin-inline: auto;
	display: grid;
	/* Three abreast or one — never two, which would leave a lone third card
	   hanging on its own row. A plain auto-fit minmax does land on two (it
	   did at 1024 and at 768, where the sidebar collapses and the column
	   grows again), so the minimum is switched rather than fixed: above
	   1008px it is a third of the row, below it the whole row.
	   The middle term of the clamp is the switch — it goes hugely negative
	   above the threshold, pinning the result to the lower bound. */
	grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 48px) / 3), (1008px - 100%) * 999, 100%), 1fr));
	gap: 24px;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__card {
	display: flex;
	flex-direction: column;
	background: var(--nrlc-white);
	color: var(--nrlc-ink);
	border-top: 4px solid var(--nrlc-card-accent, var(--nrlc-red));
	box-shadow: 0 1px 0 var(--nrlc-rule);
	transition: transform .2s;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__card:hover { transform: translateY(-4px); }

.pngrfl-comps.is-nrlc .pngrfl-comps__media {
	position: relative;
	aspect-ratio: var(--nrlc-card-ratio, 16 / 10);
	background: var(--nrlc-plate);
}

.pngrfl-comps.is-nrlc .pngrfl-comps__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__logo {
	position: absolute;
	left: 16px;
	bottom: -32px;
	width: 80px;
	height: 80px;
	background: var(--nrlc-white);
	box-shadow: 0 4px 14px rgba(18,16,15,.18);
	padding: 8px;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__logo img {
	position: static;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 52px 24px 24px;
	flex: 1;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__body.is-nologo { padding-top: 24px; }

.pngrfl-comps.is-nrlc .pngrfl-comps__kicker {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--nrlc-red);
}

.pngrfl-comps.is-nrlc .pngrfl-comps__title {
	margin: 0;
	font-size: 28px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
	color: var(--nrlc-body);
	text-wrap: pretty;
	flex: 1;
}

.pngrfl-comps.is-nrlc .pngrfl-comps__cta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--nrlc-rule);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nrlc-red);
}

/* Compact variant — the four CTA cards at the foot of the page. */

/* No gutter of its own: the compact row always sits inside a section that
   has already applied one, and padding both cost it a fourth column. */
.pngrfl-comps.is-compact { padding: 0; }

.pngrfl-comps.is-compact .pngrfl-comps__grid {
	/* 240, not the design's 260: four 260px cards plus three 16px gaps need
	   1088px and the content column is 1061px here, so the fourth card wrapped
	   to a row of its own. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}

.pngrfl-comps.is-compact .pngrfl-comps__card {
	justify-content: space-between;
	gap: 28px;
	min-height: 160px;
	padding: 24px;
	transition: background .18s, color .18s;
}

.pngrfl-comps.is-compact .pngrfl-comps__card:hover {
	transform: none;
	background: var(--nrlc-ink);
	color: var(--nrlc-paper);
}

.pngrfl-comps.is-compact .pngrfl-comps__card.is-gold { background: var(--nrlc-gold); }
.pngrfl-comps.is-compact .pngrfl-comps__card.is-gold:hover { background: var(--nrlc-ink); color: var(--nrlc-gold); }
.pngrfl-comps.is-compact .pngrfl-comps__card.is-gold .pngrfl-comps__kicker { color: inherit; }

.pngrfl-comps.is-compact .pngrfl-comps__kicker { letter-spacing: .16em; }

.pngrfl-comps.is-compact .pngrfl-comps__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	font-size: 22px;
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
}

.pngrfl-comps.is-compact .pngrfl-comps__row i {
	font-style: normal;
	color: var(--nrlc-red);
}

.pngrfl-comps.is-compact .pngrfl-comps__card.is-gold .pngrfl-comps__row i,
.pngrfl-comps.is-compact .pngrfl-comps__card:hover .pngrfl-comps__row i { color: inherit; }

/* 3 — Section intro ---------------------------------------------------- */

.pngrfl-nrlc__intro-head {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pngrfl-nrlc__intro.is-rule .pngrfl-nrlc__intro-head {
	padding-bottom: 20px;
	border-bottom: 2px solid currentColor;
}

.pngrfl-nrlc__intro.is-two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: 32px 72px;
}

.pngrfl-nrlc__intro-body {
	font-size: 16px;
	line-height: 1.65;
	color: var(--nrlc-body);
}

.is-dark .pngrfl-nrlc__intro-body,
.pngrfl-nrlc__intro.is-dark .pngrfl-nrlc__intro-body { color: rgba(247,244,239,.82); }

.pngrfl-nrlc__intro-body p { margin: 0 0 16px; text-wrap: pretty; }
.pngrfl-nrlc__intro-body p:last-child { margin-bottom: 0; }

.pngrfl-nrlc__stack { display: flex; flex-direction: column; gap: 40px; }

/* 4 — Year timeline ---------------------------------------------------- */

.pngrfl-nrlc__timeline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	border-top: 2px solid var(--nrlc-ink);
}

.pngrfl-nrlc__tl-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 24px 28px 0;
}

.pngrfl-nrlc__tl-dot {
	width: 14px;
	height: 14px;
	margin-top: -8px;
	display: block;
	background: var(--nrlc-ink);
}

.pngrfl-nrlc__tl-step.is-last .pngrfl-nrlc__tl-dot { background: var(--nrlc-red); }

.pngrfl-nrlc__tl-year {
	font-size: 44px;
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
}

.pngrfl-nrlc__tl-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nrlc-body);
	text-wrap: pretty;
}

/* 5 — Profile card ----------------------------------------------------- */

.pngrfl-nrlc__profile {
	display: flex;
	flex-wrap: wrap;
	background: var(--nrlc-white);
	box-shadow: 0 1px 0 var(--nrlc-rule);
}

.pngrfl-nrlc__profile-media {
	position: relative;
	flex: 1 1 280px;
	min-height: 360px;
	background: var(--nrlc-plate);
}

.pngrfl-nrlc__profile-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pngrfl-nrlc__profile-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(24px, 4cqi, 48px);
	flex: 2 1 420px;
	min-width: 0;
	color: var(--nrlc-ink);
}

.pngrfl-nrlc__profile-name {
	margin: 0;
	font-size: clamp(28px, 3cqi, 40px);
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.pngrfl-nrlc__profile-body .pngrfl-nrlc__rt {
	font-size: 16px;
	line-height: 1.65;
	color: var(--nrlc-body);
}

.pngrfl-nrlc__profile-body .pngrfl-nrlc__rt p { margin-bottom: 16px; text-wrap: pretty; }

/* 6 — Hierarchy diagram ------------------------------------------------ */

.pngrfl-nrlc__hier {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.pngrfl-nrlc__hier-node {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 64px;
	padding: 8px 20px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.pngrfl-nrlc__hier-node.is-ink { background: var(--nrlc-ink); color: var(--nrlc-paper); }
.pngrfl-nrlc__hier-node.is-red { background: var(--nrlc-red); color: var(--nrlc-white); }
.pngrfl-nrlc__hier-node.is-outline { background: var(--nrlc-white); border: 2px solid var(--nrlc-ink); color: var(--nrlc-ink); }

.pngrfl-nrlc__hier-link {
	height: 28px;
	width: 2px;
	align-self: center;
	background: var(--nrlc-red);
}

.pngrfl-nrlc__hier-link.is-ink { background: var(--nrlc-ink); }

.pngrfl-nrlc__hier-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.pngrfl-nrlc__hier-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 64px;
	padding: 8px;
	background: #F0EBE4;
	border-top: 3px solid var(--nrlc-tile-accent, var(--nrlc-ink));
	color: var(--nrlc-ink);
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.2;
}

.pngrfl-nrlc__hier-tile:hover { color: var(--nrlc-red); }

/* 7 — Pathway (numbered) ----------------------------------------------- */

.pngrfl-nrlc__pathway { display: flex; flex-direction: column; }

.pngrfl-nrlc__pw-step {
	display: grid;
	grid-template-columns: var(--nrlc-pw-size, 44px) minmax(0, 1fr);
	gap: 16px;
}

.pngrfl-nrlc__pw-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pngrfl-nrlc__pw-n {
	width: var(--nrlc-pw-size, 44px);
	height: var(--nrlc-pw-size, 44px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nrlc-ink);
	color: var(--nrlc-paper);
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 13px;
	border: 1px solid var(--nrlc-body);
	flex: none;
}

.pngrfl-nrlc__pw-line {
	flex: 1;
	width: 2px;
	min-height: 14px;
	background: var(--nrlc-pw-line, var(--nrlc-body));
}

/* Painted bottom-up, so the rail reads as a climb: 01 at the foot and the
   destination at the head. The markup order is untouched — only the paint
   order flips — so assistive technology still reads the pathway forwards. */
.pngrfl-nrlc__pathway.is-up { flex-direction: column-reverse; }

/* is-end is the step with nothing under it, so it draws no connector.
   is-goal is the destination, which keeps the accent wherever it sits. */
.pngrfl-nrlc__pw-step.is-end .pngrfl-nrlc__pw-line { background: transparent; }
.pngrfl-nrlc__pw-step.is-goal .pngrfl-nrlc__pw-n { background: var(--nrlc-red); color: var(--nrlc-paper); }
.pngrfl-nrlc__pathway.is-gold-last .pngrfl-nrlc__pw-step.is-goal .pngrfl-nrlc__pw-n { background: var(--nrlc-gold); color: var(--nrlc-ink); }

.pngrfl-nrlc__pw-text {
	padding: 10px 0 20px;
	font-size: 18px;
	font-weight: 800;
	line-height: 1.25;
}

/* Panelled pathway (the Men / Women pair). */

.pngrfl-nrlc__pw-panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}

.pngrfl-nrlc__pw-panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 28px;
	background: var(--nrlc-panel-dark);
	border-top: 4px solid var(--nrlc-panel-accent, var(--nrlc-red));
}

.pngrfl-nrlc__pw-panel h4 {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: inherit;
}

.pngrfl-nrlc__pw-panel .pngrfl-nrlc__pw-step { --nrlc-pw-size: 40px; gap: 14px; }
.pngrfl-nrlc__pw-panel .pngrfl-nrlc__pw-n { font-size: 12px; }
.pngrfl-nrlc__pw-panel .pngrfl-nrlc__pw-line { min-height: 12px; }
.pngrfl-nrlc__pw-panel .pngrfl-nrlc__pw-text { padding: 9px 0 18px; font-size: 17px; font-weight: 700; }

/* Horizontal pathway — the six-step "future" row. */

.pngrfl-nrlc__pathway.is-horizontal {
	display: grid;
	/* One row of six once the column can hold them, otherwise cards of at
	   least 260px. The clamp is the standard container-free switch: the
	   middle term goes hugely negative above 1100px, pinning the minimum to
	   a sixth of the row. */
	/* The design switches to one row of six at a 1100px viewport. Here the
	   content column is the viewport minus a 230px sidebar and two gutters,
	   so 1100 would never be reached on any normal window and the row sat at
	   4+2 forever. The threshold is the column width that fits six, not the
	   window width. */
	grid-template-columns: repeat(auto-fit, minmax(clamp(calc((100% - 20px) / 6), (980px - 100%) * 999, min(100%, 260px)), 1fr));
	gap: 4px;
}

.pngrfl-nrlc__hz-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px 16px 24px;
	background: #24201E;
	color: var(--nrlc-paper);
	min-height: 150px;
	min-width: 0;
}

.pngrfl-nrlc__hz-step.is-gold { background: var(--nrlc-gold); color: var(--nrlc-ink); }
.pngrfl-nrlc__hz-step.is-red { background: var(--nrlc-red); color: var(--nrlc-paper); }

.pngrfl-nrlc__hz-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
}

.pngrfl-nrlc__hz-text {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	hyphens: auto;
	text-wrap: pretty;
}

/* 8 — Highlight block -------------------------------------------------- */

.pngrfl-nrlc__highlight {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 28px 28px 24px;
	background: var(--nrlc-gold);
	color: var(--nrlc-ink);
}

.pngrfl-nrlc__highlight.is-red {
	background: var(--nrlc-red);
	color: var(--nrlc-white);
	padding: clamp(28px, 4cqi, 48px);
	gap: 20px;
}

.pngrfl-nrlc__highlight .pngrfl-nrlc__eyebrow {
	color: inherit;
	letter-spacing: .22em;
}

.pngrfl-nrlc__highlight-text {
	font-size: clamp(48px, 7cqi, 92px);
	line-height: .88;
	font-weight: 800;
	letter-spacing: -.04em;
	text-transform: uppercase;
}

.pngrfl-nrlc__highlight.is-red .pngrfl-nrlc__highlight-text {
	font-size: clamp(32px, 4cqi, 52px);
	line-height: .95;
	letter-spacing: -.03em;
	text-wrap: balance;
}

/* 9 — Feature grid (Why This Matters) ---------------------------------- */

.pngrfl-nrlc__fgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 1px;
	background: var(--nrlc-rule-dark);
	border: 1px solid var(--nrlc-rule-dark);
}

.pngrfl-nrlc__fgrid.is-light {
	background: var(--nrlc-rule);
	border-color: var(--nrlc-rule);
}

.pngrfl-nrlc__fcell {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 28px;
	background: var(--nrlc-ink);
}

.pngrfl-nrlc__fgrid.is-light .pngrfl-nrlc__fcell { background: var(--nrlc-paper); }

.pngrfl-nrlc__fcell-n {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	color: var(--nrlc-gold);
}

.pngrfl-nrlc__fgrid.is-light .pngrfl-nrlc__fcell-n { color: var(--nrlc-red); }

.pngrfl-nrlc__fcell-t {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1.1;
}

.pngrfl-nrlc__fcell-p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgba(247,244,239,.78);
	text-wrap: pretty;
}

.pngrfl-nrlc__fgrid.is-light .pngrfl-nrlc__fcell-p { color: var(--nrlc-body); }

/* 10 — Check list ------------------------------------------------------ */

.pngrfl-nrlc__checks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--nrlc-check-min, 220px)), 1fr));
	column-gap: 24px;
	border-top: 1px solid var(--nrlc-rule);
}

.pngrfl-nrlc__checks.is-dark {
	border-top: 0;
}

.pngrfl-nrlc__check {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 54px;
	border-bottom: 1px solid var(--nrlc-rule);
	font-size: 16px;
	font-weight: 700;
}

.pngrfl-nrlc__checks.is-dark .pngrfl-nrlc__check {
	min-height: 56px;
	border-bottom-color: var(--nrlc-rule-dark);
}

.pngrfl-nrlc__check i {
	font-style: normal;
	color: var(--nrlc-red);
	font-weight: 800;
	flex: none;
}

.pngrfl-nrlc__check i.is-dot {
	width: 8px;
	height: 8px;
	background: var(--nrlc-gold);
	display: block;
}

/* 11 — Feature article ------------------------------------------------- */

.pngrfl-nrlc__features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
	gap: 48px;
}

.pngrfl-nrlc__article {
	display: flex;
	flex-direction: column;
	background: var(--nrlc-white);
	border-top: 4px solid var(--nrlc-art-accent, var(--nrlc-red));
	box-shadow: 0 1px 0 var(--nrlc-rule);
}

.pngrfl-nrlc__article-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--nrlc-plate);
}

.pngrfl-nrlc__article-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pngrfl-nrlc__article-body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: clamp(24px, 3cqi, 40px);
	flex: 1;
}

.pngrfl-nrlc__article-body h2 {
	margin: 0;
	font-size: clamp(28px, 3.2cqi, 42px);
	line-height: .95;
	font-weight: 800;
	letter-spacing: -.025em;
	text-transform: uppercase;
}

.pngrfl-nrlc__article-body .pngrfl-nrlc__rt {
	font-size: 16px;
	line-height: 1.65;
	color: var(--nrlc-body);
}

.pngrfl-nrlc__article-body .pngrfl-nrlc__rt p { margin-bottom: 16px; text-wrap: pretty; }

.pngrfl-nrlc__roles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 12px;
	flex: 1;
	align-content: start;
}

.pngrfl-nrlc__role {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px;
	background: var(--nrlc-paper);
}

.pngrfl-nrlc__role span {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	color: var(--nrlc-red);
}

.pngrfl-nrlc__role b {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}

.pngrfl-nrlc__pull {
	margin: 0;
	padding-left: 16px;
	border-left: 3px solid var(--nrlc-gold);
	font-size: 17px;
	line-height: 1.5;
	font-weight: 700;
	flex: 1;
	text-wrap: pretty;
}

.pngrfl-nrlc__btn {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 26px;
	background: var(--nrlc-red);
	color: var(--nrlc-white);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: background .18s, color .18s;
}

.pngrfl-nrlc__btn:hover { background: var(--nrlc-ink); color: var(--nrlc-gold); }
.pngrfl-nrlc__btn.is-ink { background: var(--nrlc-ink); color: var(--nrlc-paper); }
.pngrfl-nrlc__btn.is-ink:hover { background: var(--nrlc-red); color: var(--nrlc-white); }

/* 12 — Branch diagram -------------------------------------------------- */

.pngrfl-nrlc__branch {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 920px;
	width: 100%;
	margin-inline: auto;
}

/* The <li>s are flex items of a column container, so they shrink to their
   content unless told otherwise — which collapsed every node onto one line. */
.pngrfl-nrlc__branch > li {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* The connectors are the exception: they keep their own width, which the
   rule above would otherwise shrink to nothing. */
.pngrfl-nrlc__branch > li.pngrfl-nrlc__branch-drop { width: 2px; }
.pngrfl-nrlc__branch > li.pngrfl-nrlc__branch-bar { width: 52%; }

.pngrfl-nrlc__branch-arm > ul > li { width: 100%; }

.pngrfl-nrlc__branch-node {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 24px 16px;
	background: var(--nrlc-white);
	border-top: 4px solid var(--nrlc-node-accent, var(--nrlc-ink));
	box-shadow: 0 1px 0 var(--nrlc-rule);
	color: var(--nrlc-ink);
	text-align: center;
}

.pngrfl-nrlc__branch-node.is-top { max-width: 440px; }
.pngrfl-nrlc__branch-node:hover { color: var(--nrlc-red); }

.pngrfl-nrlc__branch-node b {
	font-size: 22px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

.pngrfl-nrlc__branch-node span {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--nrlc-meta);
}

.pngrfl-nrlc__branch-drop { height: 36px; width: 2px; background: var(--nrlc-ink); }
.pngrfl-nrlc__branch-drop.is-short { height: 28px; }
.pngrfl-nrlc__branch-bar { width: 52%; height: 2px; background: var(--nrlc-ink); }

.pngrfl-nrlc__branch-pair {
	display: grid;
	/* Stays two abreast all the way down: the diagram reads as a fork, and
	   stacking it would say something different. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
}

.pngrfl-nrlc__branch-arm {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pngrfl-nrlc__branch-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 28px 24px;
	background: var(--nrlc-ink);
	color: var(--nrlc-paper);
	text-align: center;
}

.pngrfl-nrlc__branch-foot b {
	font-size: clamp(20px, 2.4cqi, 28px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -.01em;
	color: var(--nrlc-gold);
}

.pngrfl-nrlc__branch-foot span {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(247,244,239,.85);
	text-wrap: pretty;
}

.pngrfl-nrlc__branch-close {
	margin: 0 auto;
	max-width: 62ch;
	text-align: center;
	font-size: 17px;
	line-height: 1.6;
	color: var(--nrlc-body);
	text-wrap: pretty;
}

.pngrfl-nrlc__branch-close strong { color: var(--nrlc-ink); }

.pngrfl-nrlc__centred {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: center;
	align-items: center;
}

.pngrfl-nrlc__centred .pngrfl-nrlc__h2 { max-width: 18ch; }

/* 13 — Statement stack ------------------------------------------------- */

.pngrfl-nrlc__statements {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: clamp(36px, 6.4cqi, 88px);
	line-height: .92;
	font-weight: 800;
	letter-spacing: -.035em;
	text-transform: uppercase;
}

.pngrfl-nrlc__statements .is-gold { color: var(--nrlc-gold); }
.pngrfl-nrlc__statements .is-red { color: var(--nrlc-red); }

/* 14 — Internal note (never public) ------------------------------------ */

.pngrfl-nrlc__note {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border: 2px dashed var(--nrlc-red);
	background: #FFF6F4;
	color: var(--nrlc-ink);
}

.pngrfl-nrlc__note p { margin: 0; font-size: 14px; line-height: 1.55; text-wrap: pretty; }

/* Quote rule ------------------------------------------------------------ */

.pngrfl-nrlc__quote {
	margin: 0;
	padding-left: 18px;
	border-left: 3px solid var(--nrlc-gold);
	font-size: 18px;
	line-height: 1.5;
	font-weight: 600;
	text-wrap: pretty;
}

/* Two-up blocks with a divider rule above ------------------------------ */

.pngrfl-nrlc__block {
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding-top: 56px;
	border-top: 1px solid var(--nrlc-rule-dark);
}

.pngrfl-nrlc__two {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 32px 72px;
}

.pngrfl-nrlc__two.is-wide { gap: 48px 72px; }
.pngrfl-nrlc__two.is-middle { align-items: center; }
.pngrfl-nrlc__two.is-end { align-items: end; }
.pngrfl-nrlc__two.is-start { align-items: start; }

.pngrfl-nrlc__col { display: flex; flex-direction: column; gap: 16px; }
.pngrfl-nrlc__col.is-loose { gap: 18px; }

@media (max-width: 560px) {
	.pngrfl-nrlc__branch-node b { font-size: 18px; }
	.pngrfl-nrlc__branch-pair { gap: 12px; }
	.pngrfl-nrlc__hier-row { grid-template-columns: 1fr; }
}

/* Container utilities ---------------------------------------------------
 *
 * Applied to Elementor containers (css_classes, not _css_classes — the two
 * are not interchangeable and mixing them fails silently). They give the
 * page its section rhythm without each widget having to own it, so the
 * composite rows can put two widgets side by side inside one section.
 */

.nrlc-sec {
	container-type: inline-size;
	padding: 12vh 5cqi 0 !important;
	width: 100% !important;
	max-width: none !important;
}

.nrlc-sec-dark {
	container-type: inline-size;
	margin-top: 12vh !important;
	padding: 12vh 5cqi !important;
	width: 100% !important;
	max-width: none !important;
	background: #12100F;
	color: #F7F4EF;
	position: relative;
	overflow: hidden;
}

.nrlc-sec-dark::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(135deg, #201C1A 0 14px, #191615 14px 28px);
	opacity: .6;
	pointer-events: none;
}

.nrlc-sec-flush { padding-top: 0 !important; }
.nrlc-sec-foot { padding: 9vh 5cqi 11vh !important; }

.nrlc-wrap {
	position: relative;
	width: 100% !important;
	max-width: 1280px !important;
	margin-inline: auto !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.nrlc-wrap.nrlc-gap-sm { gap: 28px; }
.nrlc-wrap.nrlc-gap-lg { gap: 56px; }
.nrlc-wrap.nrlc-gap-xl { gap: 72px; }

/* Two columns, same auto-fit rule the widgets use so they break together. */
.nrlc-row {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 40px 72px;
}

.nrlc-row.nrlc-row-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 72px; }
.nrlc-row.nrlc-row-wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 48px; }
.nrlc-row.nrlc-mid { align-items: center; }
.nrlc-row.nrlc-end { align-items: end; }
.nrlc-row.nrlc-top { align-items: start; }

.nrlc-col {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.nrlc-col.nrlc-col-loose { gap: 28px; }

/* A block introduced by a hairline rule, inside the dark sections. */
.nrlc-ruled {
	width: 100% !important;
	max-width: none !important;
	padding: 56px 0 0 !important;
	border-top: 1px solid #3A3431;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* The dark sections put their own colour on descendants. */
.nrlc-sec-dark .pngrfl-nrlc,
.nrlc-sec-dark .nrlc-col { color: #F7F4EF; }
.nrlc-sec-dark .pngrfl-nrlc__h2,
.nrlc-sec-dark .pngrfl-nrlc__h3 { color: #F7F4EF; }
.nrlc-sec-dark .pngrfl-nrlc__intro-body,
.nrlc-sec-dark .nrlc-col p { color: rgba(247,244,239,.82); }
.nrlc-sec-dark .pngrfl-nrlc__eyebrow { color: #E8B23A; }
.nrlc-sec-dark .pngrfl-nrlc__highlight,
.nrlc-sec-dark .pngrfl-nrlc__pw-panel,
.nrlc-sec-dark .pngrfl-nrlc__fcell { color: inherit; }
.nrlc-sec-dark .pngrfl-nrlc__highlight { color: #12100F; }
.nrlc-sec-dark .pngrfl-nrlc__pw-panel,
.nrlc-sec-dark .pngrfl-nrlc__fcell { color: #F7F4EF; }

/* White card holding the NYC / Academy pair. */
.nrlc-card {
	width: 100% !important;
	max-width: none !important;
	padding: clamp(24px, 4cqi, 48px) !important;
	background: #FFFFFF;
	box-shadow: 0 1px 0 #D5CDC4;
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 40px 72px;
}

/* A single red line of emphasis inside body copy. */
.pngrfl-nrlc .pngrfl-nrlc__kicker-red {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: var(--nrlc-red);
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* The future section's closing paragraph keeps a reading measure. */
.pngrfl-nrlc .pngrfl-nrlc__measure { max-width: 64ch; font-size: 18px; line-height: 1.6; }

.pngrfl-nrlc__intro-body .pngrfl-nrlc__btn { margin-top: 8px; }