/*
 * Newsletter modal + unsubscribe result page.
 *
 * Its own sheet rather than more of brand.css, for the same reason article.css
 * is: brand.css is already the catch-all, and a component with a dialog, a
 * two-pane layout, an animation and three states is easier to reason about
 * whole.
 *
 * The panel is a native <dialog> in the top layer, so nothing here fights the
 * sticky header or the cookie banner for z-index and none is set.
 *
 * COLOUR NOTES, measured against the palette rules in brand.css:
 *   #FFFFFF on #7C5CFC   4.38:1   the pitch pane and the submit fill
 *   #FFFFFF on #0D0D0F  19.5:1    the input
 *   #B3B3B3 on #141416   9.1:1    secondary copy
 *   #9478FD on #141416   5.4:1    accent used as small text (never #7C5CFC,
 *                                 which is under AA at this size)
 */

.c-nl {
	width: min(100%, 62rem);
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	overflow: visible;
}

.c-nl::backdrop {
	background: rgba(6, 6, 8, 0.72);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 220ms ease;
}

.c-nl.is-open::backdrop {
	opacity: 1;
}

/*
 * The panel animates on a class rather than @starting-style: the dialog goes
 * from display:none to block on showModal(), which a plain transition cannot
 * see. newsletter.js forces a layout read to commit that change, then adds
 * .is-open, which the transition can see.
 */
.c-nl__shell {
	position: relative;
	display: grid;
	grid-template-columns: 0.85fr 1fr;
	max-height: calc(100dvh - 2rem);
	overflow: hidden;
	background: #141416;
	border: 1px solid #303030;

	/* The accent hairline across the top. The welcome email wears the same
	   3px bar, so the panel and the message it triggers are recognisably the
	   same piece of design. */
	border-top: 3px solid var(--afw-purple, #7C5CFC);

	opacity: 0;
	transform: translateY(12px) scale(0.985);
	transition: opacity 220ms ease, transform 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.c-nl.is-open .c-nl__shell {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------- pitch pane */

.c-nl__pitch {
	position: relative;
	overflow: hidden;
	padding: var(--space-40, 2.5rem) var(--space-36, 2.25rem);
	background: linear-gradient(158deg, #7C5CFC 0%, #6B4AE8 52%, #4E33B8 100%);
	display: flex;
	flex-direction: column;
	gap: var(--space-20, 1.25rem);
}

/* The roundel, oversized and bled off the bottom corner. Same device as the
   footer and the follow card. Its facial detail is transparent artwork, so it
   only works on a saturated or dark ground -- this pane is both. */
.c-nl__watermark {
	position: absolute;
	right: -3.5rem;
	bottom: -4.5rem;
	width: 16rem;
	line-height: 0;
	opacity: 0.16;
	pointer-events: none;
}

.c-nl__watermark-img {
	display: block;
	width: 100%;
	height: auto;
}

.c-nl__eyebrow {
	position: relative;
	margin: 0;
	font-family: var(--font-family-sansSerif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.c-nl__pitch-lede {
	position: relative;
	margin: 0;
	font-family: var(--font-family-serif);
	font-size: clamp(1.5rem, 2.4vw, 1.95rem);
	font-weight: 400;
	line-height: 1.16;
	color: #FFFFFF;
}

.c-nl__list {
	position: relative;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 0.75rem);
}

.c-nl__list li {
	position: relative;
	padding-left: 1.5rem;
	font-family: var(--font-family-sansSerif);
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
}

/* A rule, not a tick. The publication sets lists this way everywhere else and
   a row of check marks would read as a pricing table. */
.c-nl__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.85rem;
	height: 1.5px;
	background: rgba(255, 255, 255, 0.55);
}

.c-nl__terms {
	position: relative;
	margin: auto 0 0;
	font-family: var(--font-family-sansSerif);
	font-size: 12px;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.72);
}

.c-nl__terms span {
	margin: 0 0.4rem;
	opacity: 0.6;
}

/* ---------------------------------------------------------------- form pane */

.c-nl__main {
	position: relative;
	padding: var(--space-40, 2.5rem) var(--space-36, 2.25rem);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.c-nl__title {
	margin: 0 0 var(--space-8, 0.5rem);
	font-family: var(--font-family-serif);
	font-size: clamp(1.6rem, 2.6vw, 2.05rem);
	font-weight: 400;
	line-height: 1.12;
	color: #FFFFFF;
}

.c-nl__title em {
	font-style: italic;
	color: #FFFFFF;
}

.c-nl__sub {
	margin: 0 0 var(--space-24, 1.5rem);
	font-family: var(--font-family-sansSerif);
	font-size: 14px;
	line-height: 1.55;
	color: #B3B3B3;
}

.c-nl__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-12, 0.75rem);
}

/*
 * A dark field, not the white one the homepage band uses. The band sits on a
 * purple gradient where white is the only legible fill; this panel is dark
 * throughout and a white block would punch a hole in it.
 *
 * SPECIFICITY, not decoration. The compiled theme resets every text input with
 * an attribute selector -- input[type="email"], ... { background-color: initial }
 * -- which is (0,1,1) and beats a bare .c-nl__input at (0,1,0). The field came
 * out transparent with the theme's own border colour. Every rule in this block
 * is scoped to .c-nl to win, and must stay that way.
 */
.c-nl .c-nl__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.95rem 1rem;
	font-family: var(--font-family-sansSerif);
	font-size: 16px; /* 16px or iOS zooms the page on focus. */
	line-height: 1.2;
	color: #FFFFFF;
	background: #0D0D0F;
	border: 1px solid #3A3A3E;
	border-radius: 0;
	transition: border-color 140ms ease, box-shadow 140ms ease;
	appearance: none;
}

.c-nl .c-nl__input::placeholder {
	color: #6E6E76;
}

.c-nl .c-nl__input:focus {
	outline: none;
	border-color: var(--afw-purple, #7C5CFC);
	box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.28);
}

.c-nl .c-nl__input[aria-invalid="true"] {
	border-color: #E5484D;
	box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.22);
}

/* Chrome paints its own near-white autofill background over the field and
   keeps it on focus. An inset shadow the size of the box is the only reliable
   way to repaint it. */
.c-nl .c-nl__input:-webkit-autofill,
.c-nl .c-nl__input:-webkit-autofill:hover,
.c-nl .c-nl__input:-webkit-autofill:focus {
	-webkit-text-fill-color: #FFFFFF;
	-webkit-box-shadow: 0 0 0 60rem #0D0D0F inset;
	caret-color: #FFFFFF;
}

.c-nl__submit {
	position: relative;
	padding: 0.95rem 1.4rem;
	font-family: var(--font-family-sansSerif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	color: #FFFFFF;
	background: var(--afw-purple, #7C5CFC);
	border: 0;
	cursor: pointer;
	transition: background-color 140ms ease;
}

.c-nl__submit:hover,
.c-nl__submit:focus-visible {
	background: var(--afw-purple-deep, #6B4AE8);
}

.c-nl__submit[disabled] {
	cursor: default;
	opacity: 0.75;
}

/* In-flight. The label is hidden rather than replaced so the button does not
   change width mid-submit. */
.c-nl__submit.is-loading .c-nl__submit-label {
	visibility: hidden;
}

.c-nl__submit.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.05rem;
	height: 1.05rem;
	margin: -0.525rem 0 0 -0.525rem;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #FFFFFF;
	border-radius: 50%;
	animation: c-nl-spin 620ms linear infinite;
}

@keyframes c-nl-spin {
	to {
		transform: rotate(360deg);
	}
}

.c-nl__alert {
	margin: var(--space-12, 0.75rem) 0 0;
	font-family: var(--font-family-sansSerif);
	font-size: 13px;
	line-height: 1.5;
	color: #B3B3B3;
	min-height: 0;
}

.c-nl__alert:empty {
	display: none;
}

.c-nl__alert.is-error {
	color: #FF8A8E;
}

.c-nl__note {
	margin: var(--space-16, 1rem) 0 0;
	font-family: var(--font-family-sansSerif);
	font-size: 12px;
	line-height: 1.55;
	color: #8A8A92;
}

.c-nl__note a {
	color: #9478FD;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Off-screen, not display:none. A headless browser that skips invisible
   fields still fills this one, which is the entire point of it. */
.c-nl__trap {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ------------------------------------------------------- mobile menu CTA */

/*
 * .c-mobile-menu__cta is the compiled theme's own class (a column with a top
 * gap) but the menu around it carries no horizontal padding, because this
 * build renders wp_nav_menu output rather than the original .c-mobile-menu__nav
 * wrapper. Without this the button would run edge to edge.
 */
.c-mobile-menu__cta {
	padding: var(--space-24, 1.5rem) var(--grid-margin, 1.25rem) var(--space-40, 2.5rem);
}

.c-mobile-menu__cta .c-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* ------------------------------------------------------------- the band */

/*
 * The homepage/article signup band gets the same one-line live region as the
 * modal. It replaces the three pre-rendered .c-alert divs the Ghost markup
 * shipped with, which could only ever say one of three fixed sentences.
 *
 * White on the purple gradient measures 4.38:1 at the light end, under AA for
 * body text. A translucent black plate under it takes the effective ground to
 * roughly #543EAB and the ratio to 7.4:1, and reads as a notice rather than
 * as more of the band's own copy.
 */
.c-subscribe-form__alert {
	display: inline-block;
	margin: var(--space-16, 1rem) 0 0;
	padding: 0.55rem 0.8rem;
	font-family: var(--font-family-sansSerif);
	font-size: 14px;
	line-height: 1.5;
	color: #FFFFFF;
	background: rgba(0, 0, 0, 0.32);
}

.c-subscribe-form__alert:empty {
	display: none;
}

.c-subscribe-form__alert.is-error {
	color: #FFDADB;
}

/* ------------------------------------------------------------ result state */

.c-nl__done {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8, 0.5rem);
}

.c-nl__done[hidden] {
	display: none;
}

.c-nl__tick {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--space-8, 0.5rem);
	color: var(--afw-purple, #7C5CFC);
	border: 1.5px solid rgba(124, 92, 252, 0.5);
	border-radius: 50%;
}

.c-nl__tick svg {
	width: 1.35rem;
	height: 1.35rem;
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
	animation: c-nl-draw 420ms 90ms ease forwards;
}

@keyframes c-nl-draw {
	to {
		stroke-dashoffset: 0;
	}
}

.c-nl__submit--wide {
	width: 100%;
	margin-top: var(--space-16, 1rem);
}

/* ------------------------------------------------------------------ close */

.c-nl__close {
	position: absolute;
	/*
	 * z-index is load-bearing, not tidiness. The button is the first child of
	 * the shell, and .c-nl__pitch and .c-nl__main are both positioned, so at
	 * z-index auto they paint OVER it in DOM order. On the desktop layout the
	 * button sits above .c-nl__main, which has no background of its own, so it
	 * still showed -- while elementFromPoint already returned the pane, meaning
	 * the click never reached it. Stacked under the pitch pane's gradient in
	 * the narrow layout it vanished outright, leaving a modal a phone reader
	 * could only leave with the back button.
	 */
	z-index: 2;
	top: 0.6rem;
	right: 0.6rem;
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	padding: 0;
	color: #FFFFFF;
	background: rgba(20, 20, 22, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.16);
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease;
}

.c-nl__close:hover,
.c-nl__close:focus-visible {
	background: rgba(20, 20, 22, 0.9);
	border-color: rgba(255, 255, 255, 0.4);
}

.c-nl__close svg {
	width: 1.05rem;
	height: 1.05rem;
}

/* --------------------------------------------------------------- narrow */

@media (max-width: 52em) {

	.c-nl__shell {
		grid-template-columns: 1fr;
	}

	.c-nl__pitch {
		padding: var(--space-32, 2rem) var(--space-24, 1.5rem);
		gap: var(--space-16, 1rem);
	}

	.c-nl__watermark {
		width: 11rem;
		right: -2.5rem;
		bottom: -3rem;
	}

	.c-nl__main {
		padding: var(--space-32, 2rem) var(--space-24, 1.5rem);
	}

	/* On a phone the panel is the whole screen anyway, so the three bullets
	   push the field below the fold. The lede carries the pitch on its own. */
	.c-nl__list {
		display: none;
	}
}

@media (max-width: 30em) {

	.c-nl {
		max-width: calc(100vw - 1rem);
	}

	.c-nl__terms {
		font-size: 11px;
	}
}

/* ------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {

	.c-nl::backdrop,
	.c-nl__shell {
		transition: none;
	}

	.c-nl__shell {
		transform: none;
	}

	.c-nl__submit.is-loading::after,
	.c-nl__tick svg {
		animation: none;
	}

	.c-nl__tick svg {
		stroke-dashoffset: 0;
	}
}

/* ------------------------------------------------- unsubscribe result page */

.c-nl-result {
	max-width: 34rem;
	margin: var(--space-80, 5rem) 0 var(--space-96, 6rem);
}

.c-nl-result__eyebrow {
	margin: 0 0 var(--space-12, 0.75rem);
	font-family: var(--font-family-sansSerif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9478FD;
}

.c-nl-result__title {
	margin: 0 0 var(--space-16, 1rem);
	font-family: var(--font-family-serif);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	line-height: 1.08;
	color: var(--color-text-primary);
}

.c-nl-result__body {
	margin: 0 0 var(--space-32, 2rem);
	font-family: var(--font-family-sansSerif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-secondary);
}

.c-nl-result__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--space-20, 1.25rem);
}

.c-nl-result__undo {
	font-family: var(--font-family-sansSerif);
	font-size: 14px;
	color: #9478FD;
	text-decoration: underline;
	text-underline-offset: 2px;
}