/* ==========================================================================
   Newsletter template — newsletter-no-1, newsletter-no-2 and the December
   2023 newsletter (filed Uncategorized, so it takes the navy set).

   Each issue is set as a bulletin: a nameplate carrying the homepage strap on
   a double rule, a numbered 'In this issue', then one numbered folio per news
   item. The set-piece is the regulator's own numbers typeset as instruments —
   a figure line, a ledger of fines, a figure pair and share bars, two rate
   tables — and every one of them is STATIC: bars grow and rules draw, but no
   number ever changes on screen.

   Everything is written in its final state; start states live under
   .js-reveal [data-reveal]:not(.is-revealed), so no-JS, reduced motion and
   pre-arm pages simply show the finished page.

    1  Page wiring        7  Consequences trio, link list, quote
    2  Nameplate          8  Rates tables
    3  In this issue      9  Help band
    4  Items             10  Sign-off and end matter
    5  Figure line,      11  Responsive
       ledger            12  Reduced motion
    6  Figure pair and share bars
   ========================================================================== */

/* 1. Page wiring ----------------------------------------------------------
   The second petal is the next colour in the logo's order: red after the
   newsletter's yellow, yellow after December's navy (the cycle wraps). */
main.c-newsletter .nl { --acc-b: var(--logo-red); }
main.c-uncategorized .nl { --acc-b: var(--logo-yellow); }

@keyframes nl-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }

/* 2. Nameplate ------------------------------------------------------------ */
/* the homepage strap, taken out of the hero and set in the flow, in ink */
.nl-mast .hero__strap {
	position: relative;
	left: auto;
	bottom: auto;
	transform: none;
	flex-wrap: wrap;
	row-gap: 0.25rem;
	margin: 0;
	padding: calc(8px + clamp(0.9rem, 1.35vw, 1.6rem)) 0 clamp(0.9rem, 1.35vw, 1.6rem);
	color: var(--ink);
	white-space: normal;
}
.nl-mast .hero__rule { display: block; background: var(--ink); }
/* the double rule a newspaper's nameplate sits under: 3px, a 4px gap, 1px */
.nl-plate::before,
.nl-plate::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	background: var(--ink);
	transform-origin: left;
}
.nl-plate::before { top: 0; height: 3px; }
.nl-plate::after { top: 7px; height: 1px; }
.js-reveal .nl-plate::before { animation: rule-draw 0.9s var(--ease-out) both; }
.js-reveal .nl-plate::after { animation: rule-draw 0.9s var(--ease-out) 0.12s both; }

.nl-mast .mast__h1 {
	grid-column: 1 / 11;
	margin-top: clamp(1.75rem, 3.75vw, 4.5rem);
	font-size: var(--mast-post);
	line-height: 1.02;
}

/* the petal hangs higher than on a service page, so it clears a title that
   runs to column 10 */
@media (min-width: 1025px) {
	.nl-mast .mast__petal--a { right: 6vw; top: calc(min(34vw, 650px) * -0.56); }
}

.nl-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.35rem;
	margin: clamp(1.25rem, 1.9vw, 2.25rem) 0 0;
	font-size: var(--small);
	color: var(--body);
}
.nl-meta > * { display: inline-flex; align-items: center; gap: 0.5em; }
.nl-meta svg { width: 1.1em; height: 1.1em; flex: none; }
.nl-meta__n::before {
	content: '';
	width: 5px;
	aspect-ratio: 1;
	margin-right: 0.85rem;
	border-radius: 22%;
	background: var(--body);
	rotate: 45deg;
}
.nl-chip {
	padding: 0.35em 0.95em;
	border-radius: 999px;
	background: var(--cat-tint);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--tiny);
	color: var(--cat-text);
	transition: background-color 0.2s ease;
}
.nl-chip .lz { --c: var(--cat); width: 8px; }
.nl-chip:hover { background: var(--cat-pale); }

.nl-stand { grid-column: 1 / 8; margin-top: clamp(1.5rem, 2.3vw, 2.75rem); }
.nl-stand p { margin: 0 0 0.75em; }
.nl-stand p:last-child { margin-bottom: 0; }
/* inline links in the client's prose: ink, underlined in the accent's text
   tone (the saturated accent is too pale on white to mark a link) */
.nl-stand a,
.nl-sign a,
.nl .folio__body :is(.body, .lead) a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--acc-text);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.2s ease;
}
.nl-stand a:hover,
.nl-sign a:hover,
.nl .folio__body :is(.body, .lead) a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
/* a phone number never breaks across lines */
.nl a[href^="tel:"] { white-space: nowrap; }

/* 3. In this issue ---------------------------------------------------------- */
.nl-toc { position: relative; margin-top: clamp(2.5rem, 4.2vw, 5rem); }
.nl-toc__l { margin: 0 0 clamp(0.75rem, 1vw, 1.1rem); color: var(--ink); }
.nl-toc ol {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--card-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.nl-toc li { border-top: var(--rule); }
.nl-toc li:nth-child(-n + 3) { border-top: var(--rule-strong); }
/* A 3n + 1 issue (no-1 has seven items) never leaves one item alone on the
   last row. From 1280 it goes four across. The column gap already parts the
   cells, so the link drops its right inset, which keeps a three-word title
   ('Legal Ombudsman Report') on one line. Below 1280 four across would
   squeeze a title to five lines, so it stays two across, as at 1024. */
@media (min-width: 1280px) {
	.nl-toc--4 ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nl-toc--4 li:nth-child(4) { border-top: var(--rule-strong); }
	.nl-toc.nl-toc--4 a { padding-right: 0; }   /* outranks .nl-toc a below */
}
@media (min-width: 1025px) and (max-width: 1279px) {
	.nl-toc--4 ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nl-toc--4 li:nth-child(3) { border-top: var(--rule); }
}
.nl-toc a {
	display: grid;
	grid-template-columns: clamp(3.4rem, 4.2vw, 5rem) minmax(0, 1fr);
	column-gap: 0.9rem;
	align-items: start;
	height: 100%;
	padding: clamp(0.9rem, 1.2vw, 1.4rem) 1rem clamp(1.1rem, 1.5vw, 1.75rem) 0;
	color: var(--ink);
}
.nl-toc__n {
	display: flex;
	align-items: flex-end;
	gap: 0.14em;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1.75rem, 2.083vw, 2.5rem);   /* 40 · 28 */
	line-height: 0.85;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}
.nl-toc__n .lz { width: 10px; margin-bottom: 0.08em; transition: rotate 0.25s ease; }
.nl-toc__t {
	padding-top: 0.2em;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--base);
	line-height: 1.3;
	text-wrap: balance;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	transition: text-decoration-color 0.2s ease;
}
.nl-toc a:hover .nl-toc__t,
.nl-toc a:focus-visible .nl-toc__t { text-decoration-color: var(--ink); }
.nl-toc a:hover .lz,
.nl-toc a:focus-visible .lz { rotate: 135deg; }
.js-reveal .nl-toc li { animation: nl-rise 0.6s var(--ease-out) both; animation-delay: calc(0.35s + var(--i, 0) * 70ms); }

/* petal B rides just above the index's right-hand end, clear of the copy
   (it outranks the chassis' .mast--top placement, which is for the header) */
.nl-mast .nl-toc .nl-toc__petal {
	z-index: -1;
	top: auto;
	left: auto;
	right: 4%;
	bottom: calc(100% + clamp(1.5rem, 2.4vw, 3rem));
}

/* 4. Items ----------------------------------------------------------------
   A folio variant: numeral cols 1-2, body cols 3-12 as a 10-column sub-grid
   (prose 3-8, margin 10-12). Items sit above the help band's layer so its
   watermark, straddling the seam, passes UNDER the last item's words. */
.nl .folio--item {
	position: relative;
	z-index: 2;
	padding-block: clamp(2.75rem, 4.6vw, 5.5rem);
}
/* the nameplate closes on 'In this issue': the first item needs less air */
.nl .mast + .folio--item { padding-top: clamp(1.5rem, 2.5vw, 3rem); }
/* the last item leaves room for the help band's watermark to rise into
   white, so it never lands on a margin call-out */
.nl .folio--item:has(+ .nl-help) { padding-bottom: calc(clamp(220px, 25vw, 480px) * 0.5 + 1.5rem); }
.nl .folio--item .folio__num { grid-column: 1 / 3; font-size: var(--numeral-sm); }
.nl .folio--item .folio__body { grid-column: 3 / -1; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.nl .folio--item .folio__h { font-size: var(--h2-sm); line-height: 1.12; max-width: 20em; }
.nl .folio--item .folio__h:has(+ .nl-dek) { margin-bottom: 0.4em !important; }
.nl .w7 { grid-column: 1 / 8 !important; }
.nl .folio--item .pair { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.nl .folio--item .pair__main { grid-column: 1 / 7; }
.nl .folio--item .pair__main > :last-child { margin-bottom: 0; }
.nl .folio--item .pair > .note { grid-column: 8 / -1; }
/* a margin figure sits level with the closing sentence that states it */
.nl .folio--item .pair > .note--figure { align-self: end; }

.nl-dek {
	margin-bottom: 1.75rem !important;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h4);
	line-height: 1.3;
	color: var(--body);
}
.nl-h3 { margin-top: clamp(1rem, 2vw, 2.5rem) !important; font-size: var(--h3); line-height: 1.2; }

/* runs of paragraphs that are a list in all but markup: diamond bullets */
.nl-list {
	padding: 0;
	list-style: none;
	font-size: var(--read);
	line-height: 1.65;
	color: var(--body);
}
.nl-list li { position: relative; padding-left: 1.75em; }
.nl-list li + li { margin-top: 0.7em; }
.nl-list li::before {
	content: '';
	position: absolute;
	left: 0.3em;
	top: 0.62em;
	width: 0.42em;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--acc);
	rotate: 45deg;
}

/* a pasted bullet ('·', '•') kept in the text, drawn as the lozenge */
.nl-dot {
	display: inline-block;
	flex: none;
	width: 10px;
	height: 10px;
	overflow: hidden;
	border-radius: 22%;
	background: var(--c, var(--acc));
	rotate: 45deg;
	font-size: 10px;
	line-height: 10px;
	color: transparent;
	vertical-align: 0.12em;
}

/* the action note: a December call-out, closing its item in the margin */
.nl .note--action {
	position: relative;
	align-self: end;
	border-top: 0;
	padding-top: 1.25rem;
}
.nl .note--action::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--acc);
	transform-origin: left;
	transition: transform 0.5s var(--ease-out);
}
.nl .note--action > p:first-child {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--lead);
	line-height: 1.35;
	color: var(--ink);
	transition: opacity 0.5s var(--ease-out) 0.3s;
}
.nl .note--action strong { font-weight: 500; }
.js-reveal .nl .note--action[data-reveal]:not(.is-revealed)::before { transform: scaleX(0); }
.js-reveal .nl .note--action[data-reveal]:not(.is-revealed) > p:first-child { opacity: 0; }

/* 5. Figure line and ledger ------------------------------------------------
   The figure line is the cost post's: [£2,000 | date over the rule | £25,000],
   the rule drawing from the old cap to the new one, its red lozenge arriving
   last. The numbers are static. */
.nl .figline {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(1rem, 2.1vw, 2.5rem);
	margin: clamp(0.5rem, 1.5vw, 2rem) 0 clamp(2rem, 3.4vw, 4rem);
}
.figline__mid { display: grid; justify-items: center; row-gap: 0.4rem; min-width: 0; }
.figline__cap { color: var(--body); text-align: center; }
.figline__n {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--numeral-sm);
	line-height: 0.9;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ink);
}
.figline__u,
.ledger__cur { font-size: 0.5em; vertical-align: 0.62em; margin-right: 0.04em; color: var(--acc-text); }
.figline__line { position: relative; width: 100%; height: 28px; }
.figline__line::before {
	content: '';
	position: absolute;
	left: 0;
	right: 9px;
	top: 50%;
	border-top: 1px solid var(--ink);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out) 0.15s;
}
/* the arrowhead: a red lozenge, arriving once the line has drawn */
.figline__line i {
	position: absolute;
	right: 2px;
	top: 7px;
	width: 14px;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--logo-red);
	rotate: 45deg;
	transition: opacity 0.3s ease 0.9s, scale 0.45s var(--ease-out) 0.9s;
}
.js-reveal .nl .figline[data-reveal]:not(.is-revealed) .figline__line::before { transform: scaleX(0); }
.js-reveal .nl .figline[data-reveal]:not(.is-revealed) .figline__line i { opacity: 0; scale: 0.4; }

.nl .ledger {
	margin: 0.5rem 0 2.25rem;
	padding: 0;
	list-style: none;
	border-bottom: var(--rule);
}
.nl .ledger > li {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: baseline;
	padding: clamp(1.25rem, 2.5vw, 3rem) 0;
	transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.nl .ledger > li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-top: var(--rule);
	transform-origin: left;
	transition: transform 0.6s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}
.nl .ledger > li:first-child::before { border-top: var(--rule-strong); }
.ledger__amt {
	position: relative;
	padding-right: 3rem;
	text-align: right;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(2.5rem, 5vw, 6rem);
	line-height: 0.95;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--ink);
}
/* a red bead marks each sum */
.ledger__amt::after {
	content: '';
	position: absolute;
	right: 1.15rem;
	top: 0.42em;
	width: 10px;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--logo-red);
	rotate: 45deg;
}
.ledger__desc { font-size: var(--read); line-height: 1.65; color: var(--body); max-width: 34em; }
.ledger__desc p { margin: 0; }
.ledger__desc p + p { margin-top: 0.75em; }
.js-reveal .nl .ledger[data-reveal]:not(.is-revealed) > li { opacity: 0; translate: 0 14px; }
.js-reveal .nl .ledger[data-reveal]:not(.is-revealed) > li::before { transform: scaleX(0); }

/* 6. Figure pair and share bars -------------------------------------------- */
.nl .figpair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0.5rem 0 2.25rem;
	padding: 0;
	list-style: none;
	border-top: var(--rule-strong);
	border-bottom: var(--rule);
}
.figpair > li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
	padding: clamp(1.25rem, 2vw, 2.25rem) 1rem clamp(1.25rem, 2vw, 2.25rem) 0;
}
.figpair > li + li { border-left: var(--rule); padding-left: clamp(1.25rem, 2.5vw, 3rem); }
.figpair__label { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--body); }
.figpair__num {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--numeral-sm);
	line-height: 0.9;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.figpair__prior { font-size: var(--small); color: var(--body); font-variant-numeric: tabular-nums; }

.nl .bars { margin: 0.5rem 0 2.25rem; padding: 0; list-style: none; border-bottom: var(--rule); }
.bars > li {
	display: grid;
	grid-template-columns: clamp(5.5rem, 6.4vw, 7.5rem) minmax(0, 1fr);
	column-gap: clamp(1rem, 1.3vw, 1.5rem);
	row-gap: 0.45rem;
	align-items: center;
	padding: clamp(0.9rem, 1.3vw, 1.5rem) 0;
	border-top: var(--rule);
}
.bars > li:first-child { border-top: var(--rule-strong); }
.bars__pct {
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: clamp(1.5rem, 1.667vw, 2rem);   /* 32 */
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.bars__track { grid-column: 2; display: block; height: 12px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.bars__fill {
	display: block;
	width: var(--v);
	height: 100%;
	border-radius: 999px;
	background: var(--c);
	transform-origin: left;
	transition: transform 0.9s var(--ease-out) calc(var(--i, 0) * 80ms);
}
.bars__cat { grid-column: 2; font-size: var(--small); line-height: 1.4; color: var(--body); }
.js-reveal .nl .bars[data-reveal]:not(.is-revealed) .bars__fill { transform: scaleX(0); }

/* 7. Consequences trio, link list, quote ------------------------------------ */
.nl .trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0.5rem 0 2.25rem;
	padding: 0;
	list-style: none;
	border-top: var(--rule-strong);
	border-bottom: var(--rule);
}
/* the cells close with the inset they open with, on the list's own rule, as
   the ledger and the figure pair do */
.trio > li { padding: clamp(1.5rem, 2.4vw, 2.75rem) clamp(1rem, 1.7vw, 2rem) clamp(1.5rem, 2.4vw, 2.75rem) 0; }
.trio > li + li { padding-left: clamp(1rem, 1.7vw, 2rem); border-left: var(--rule); }
.trio__petal {
	display: block;
	width: 32px;
	aspect-ratio: 1;
	margin-bottom: clamp(1.25rem, 2vw, 2.25rem);
	border-radius: 30%;
	background: var(--c);
	rotate: -12deg;
	transition: opacity 0.6s var(--ease-out), scale 0.6s var(--ease-out), rotate 0.6s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 100ms);
}
.trio > li:nth-child(2) .trio__petal { rotate: 14deg; }
.trio > li:nth-child(3) .trio__petal { rotate: -4deg; }
.trio__h { margin: 0 0 0.6em; font-size: var(--h4); line-height: 1.25; }
.trio p { margin: 0; font-size: var(--base); line-height: 1.6; color: var(--body); }
.js-reveal .nl .trio[data-reveal]:not(.is-revealed) .trio__petal { opacity: 0; scale: 0.4; rotate: 40deg; }

.nl .nl-links { margin: 0.25rem 0 0; padding: 0; list-style: none; border-bottom: var(--rule); }
.nl-links > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 1.1rem;
	padding: clamp(0.9rem, 1.3vw, 1.5rem) 0;
	border-top: var(--rule);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--h5);
	line-height: 1.3;
}
.nl-links > li:first-child { border-top: var(--rule-strong); }
.nl-links a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: rgba(20, 22, 27, 0.25);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	overflow-wrap: anywhere;
	transition: text-decoration-color 0.2s ease;
}
.nl-links a:hover { text-decoration-color: var(--ink); }
.nl-links__go {
	display: grid;
	place-items: center;
	width: clamp(40px, 2.6vw, 50px);
	aspect-ratio: 1;
	border: 1px solid var(--green);
	border-radius: 50%;
	transition: background-color 0.25s ease, translate 0.25s ease;
}
.nl-links__go svg { width: 42%; height: auto; }
.nl-links > li:has(a:hover) .nl-links__go,
.nl-links > li:has(a:focus-visible) .nl-links__go { background: var(--green); translate: 4px 0; }

.nl-quote { position: relative; margin: 0.5rem 0 2.25rem !important; font-size: var(--h3); }
.nl-quote p {
	margin: 0;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: inherit;
	line-height: 1.32;
	letter-spacing: -0.01em;
	color: var(--ink);
}
.nl-quote em { font-style: normal; }
/* a green lozenge hangs in the gutter beside the quote */
.nl-quote::before {
	content: '';
	position: absolute;
	left: -0.95em;
	top: 0.42em;
	width: 0.45em;
	aspect-ratio: 1;
	border-radius: 22%;
	background: var(--logo-green);
	rotate: 45deg;
}

/* 8. Rates tables ---------------------------------------------------------- */
.nl .nl-rates { margin: 0.25rem 0 1.25rem; }
.nl-rates__hint { display: none; }
.nl .table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--white);
	scrollbar-width: thin;
}
/* the two tables stack under one heading, so they share one column grid
   (fixed layout, set by the header row): the grade, the fee earner, then
   five equal rate columns. Auto layout sized each table by its own text. */
.rates {
	width: 100%;
	min-width: 780px;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--small);
}
.rates thead th:first-child { width: 6.5rem; }
.rates thead th:nth-child(2) { width: 34%; }
.rates th,
.rates td {
	padding: clamp(0.85rem, 1.1vw, 1.3rem) clamp(0.9rem, 1.2vw, 1.5rem);
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.rates tbody tr:last-child > * { border-bottom: 0; }
.rates thead th {
	background: var(--band-blue-soft);
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--tiny);
	line-height: 1.3;
	color: var(--ink);
	white-space: nowrap;
}
/* the grade holds its place while the rates scroll past it */
.rates th:first-child { position: sticky; left: 0; z-index: 1; }
.rates tbody th {
	background: var(--white);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: var(--h3);
	line-height: 1;
	color: var(--ink);
}
.rates td:nth-child(2) { line-height: 1.5; color: var(--body); }
.rate {
	display: block;
	font-family: var(--font-head);
	font-weight: 500;
	font-size: var(--lead);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
}
.rate__was {
	display: block;
	margin-top: 0.2em;
	font-size: var(--tiny);
	font-variant-numeric: tabular-nums;
	color: var(--body);
}

/* 9. Help band -------------------------------------------------------------
   The homepage Why band, its ghost watermark straddling the top seam. */
.nl-help .why__decor {
	left: auto;
	right: 6%;
	top: calc(clamp(220px, 25vw, 480px) * -0.5);
	transform: none;
}
.nl-help__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	align-items: end;
}
.nl-help .nl-help__h { grid-column: 1 / 7; max-width: 12em; margin: 0; line-height: 1.08; text-wrap: balance; }
.nl-help__intro {
	grid-column: 7 / -1;
	max-width: 26em;
	margin: 0;
	font-size: var(--standfirst);
	line-height: 1.5;
	color: var(--body);
}
.nl-help .index { grid-column: 1 / -1; margin: clamp(2.5rem, 4vw, 4.5rem) 0 0 !important; }
/* each column closes on its own rule (13 services: rows of 7 and 6); the
   second column's strong head rule is the chassis' .index__colhead */
.nl-help .index--2col { border-bottom: 0; }
@media (min-width: 1280px) {
	.nl-help .index--2col > li:has(+ .index__colhead),
	.nl-help .index--2col > li:last-child { border-bottom: var(--rule); }
}
/* .index--lead, set as the cost post sets the same thirteen services: the
   name in Poppins, the rest beneath it in Questrial (the dash is hidden) */
.nl .index--lead .index__text { font-size: var(--lead); line-height: 1.35; }
.nl .index__rest {
	display: block;
	margin-top: 0.35em;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: var(--base);
	line-height: 1.55;
	color: var(--body);
	text-wrap: pretty;
}

/* 10. Sign-off and end matter ---------------------------------------------- */
.nl-end { padding-block: var(--section-y) clamp(3rem, 5vw, 6rem); }
.nl-end__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
}
.nl-end__grid > * { grid-column: 1 / -1; }
/* cols 1-10 is the measure; the statement's own 26em cap would squeeze a
   three-line sign-off onto four short ones */
.nl .nl-sign { grid-column: 1 / 11; margin: 0 !important; max-width: none; }
.nl-sign strong { font-weight: inherit; }
.nl-sign__line { display: block; }
.nl-sign__line + .nl-sign__line { margin-top: 0.35em; }
.nl-related {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--card-gap);
	margin-top: clamp(2.5rem, 4vw, 4.5rem);
}
.nl-related__l { grid-column: 1 / 3; align-self: center; margin: 0; color: var(--body); }
/* the homepage service card, laid on its side so it spans the article
   column: glyph and title | blurb | pill. One card has nothing beside it, so
   the pill shows at rest; the hover fill and lift are the homepage's. */
.nl-related .service-card {
	grid-column: 3 / -1;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: clamp(1.5rem, 3.3vw, 4rem);
	padding: clamp(1.5rem, 2.5vw, 3rem) clamp(1.5rem, 2.9vw, 3.5rem);
}
.nl-related .service-card__icon { grid-column: 1; grid-row: 1; align-self: end; margin: 0 0 1.1rem; }
.nl-related .service-card h3 { grid-column: 1; grid-row: 2; align-self: start; margin: 0; }
.nl-related .service-card p { grid-column: 2; grid-row: 1 / 3; margin: 0; max-width: 34em; }
.nl-related .service-card__more {
	grid-column: 3;
	grid-row: 1 / 3;
	align-self: center;
	margin: 0;
	opacity: 1;
	transform: none;
}

/* 11. Responsive ------------------------------------------------------------ */
@media (max-width: 1279px) {
	.nl-help .index--2col > li:last-child { border-bottom: var(--rule); }
}

@media (max-width: 1024px) {
	.nl-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nl-toc li:nth-child(3) { border-top: var(--rule); }
	.nl-toc__petal { display: none; }

	/* the item numeral goes inline, above its heading */
	.nl .folio--item .folio__grid { display: block; }
	.nl .folio--item .folio__grid::before { display: block; }
	.nl .folio--item .folio__num { position: static; font-size: clamp(3rem, 6vw, 4rem); margin-bottom: 1.25rem; }
	.nl .folio--item .w6 { grid-column: 1 / 9 !important; }
	.nl .w7 { grid-column: 1 / -1 !important; }

	/* the call-outs fall into the flow, the rule turning to a left border */
	.nl .note--action { margin-top: 1.75rem; padding: 0.2rem 0 0.2rem 1.25rem; border-left: 0; }
	.nl .note--action::before { right: auto; bottom: 0; width: 3px; height: auto; transform-origin: top; }
	.js-reveal .nl .note--action[data-reveal]:not(.is-revealed)::before { transform: scaleY(0); }

	.nl-help .nl-help__h,
	.nl-help__intro { grid-column: 1 / -1; }
	.nl-help__intro { margin-top: 1.25rem; }

	.nl .nl-sign { grid-column: 1 / -1; }
}

/* The chassis gives the H1 an 18vw top band here, a clear space for petal B
   beside petal A. Here petal B rides the index and is hidden, and the strap
   already makes the head taller, so the band was only white space. Petal A
   hangs higher instead, as it does above 1024, so it ends at the running
   head's rule. The H1 then keeps only its desktop margin. (At 640 and below
   the chassis band stays, because petal A sits over the stacked strap.) */
@media (min-width: 641px) and (max-width: 1024px) {
	.nl-mast .mast__petal--a { top: calc(42vw * -0.56) !important; }
	.nl-mast .mast__h1 { padding-top: 0; }
}

@media (max-width: 860px) {
	.nl .ledger > li { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
	.ledger__amt { padding-right: 0; text-align: left; font-size: clamp(2.25rem, 8vw, 3rem); }
	.ledger__amt::after { position: static; display: inline-block; margin-left: 0.9rem; vertical-align: 0.3em; }

	.nl .trio { grid-template-columns: minmax(0, 1fr); }
	.trio > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 1.5rem 0; }
	.trio > li + li { padding-left: 0; border-left: 0; border-top: var(--rule); }
	.trio__petal { grid-row: 1 / 3; margin: 0.2rem 0 0; }
	.trio__h,
	.trio p { grid-column: 2; }

	/* the statement's lozenge goes inline here: keep it on the first line of
	   December's three-line sign-off, not on a line of its own */
	.nl .nl-sign .nl-sign__line:first-child { display: inline; }

	.nl-links > li { font-size: 1.0625rem; }
	.nl-rates__hint { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; margin: 0 0 0.6rem; color: var(--body); }
	.nl-rates__hint svg { width: 1.1em; height: 1.1em; }

	.nl-related { display: block; }
	.nl-related__l { padding: 0 0 1rem; }
	/* back on its feet: the homepage card's own column, left-aligned */
	.nl-related .service-card { display: flex; flex-direction: column; align-items: flex-start; }
	.nl-related .service-card__icon { align-self: flex-start; margin-bottom: 1.5rem; }
	.nl-related .service-card h3 { align-self: stretch; }
	.nl-related .service-card p { align-self: stretch; max-width: none; margin-top: 0.6rem; }
	.nl-related .service-card__more { align-self: flex-start; margin-top: 1.25rem; }
}

@media (max-width: 640px) {
	/* the strap wraps under 'CRCS', its rule hidden */
	.nl-mast .hero__strap { flex-direction: column; align-items: flex-start; }
	.nl-mast .hero__rule { display: none; }

	.nl-toc ol { grid-template-columns: minmax(0, 1fr); }
	.nl-toc li:nth-child(n + 2) { border-top: var(--rule); }

	/* the two figures and the rule still share one line at 375 */
	.nl .figline { column-gap: 0.75rem; }
	.figline__n { font-size: clamp(2rem, 9vw, 3.5rem); }

	.nl .figpair { grid-template-columns: minmax(0, 1fr); }
	.figpair > li + li { padding-left: 0; border-left: 0; border-top: var(--rule); }
	.figpair__num { font-size: 3rem; }
	.bars > li { grid-template-columns: 4.75rem minmax(0, 1fr); }
	.bars__pct { font-size: 1.375rem; gap: 0.5rem; }

	/* the gutter is too narrow for the quote's hanging lozenge (it touched
	   the screen edge): it steps inside, its tip on the text column's edge */
	.nl-quote { padding-left: 1.1em; }
	.nl-quote::before { left: 0.05em; }
}

/* 12. Reduced motion ----------------------------------------------------------
   The index and the double rule are load entrances, not reveals. With
   reduced motion they are simply there from first paint, like the chassis
   masthead. */
@media (prefers-reduced-motion: reduce) {
	.js-reveal .nl-toc li,
	.js-reveal .nl-plate::before,
	.js-reveal .nl-plate::after { animation: none; }
}