/* =============================================================================
   Subscribe band — _partials/subscribe.html
   -----------------------------------------------------------------------------
   Figma v4zuHnfQeDWmJsqAyNqiDq. The band itself is on the blog frame 2026:24
   (1088x302), and its six states are on 2808:970: default, focus, invalid,
   loading, success, error. The two frames agree on every position, so there is
   a single geometry here.

   The state lives on the section as a class, set by assets/js/subscribe.js:
     .is-attempted  someone pressed Send or Enter — the button turns orange
     .is-invalid    the address is malformed (client-side)
     .is-error      the server refused it or could not be reached
     .is-loading    a request is in flight
     .is-success    subscribed — the confirmation replaces the form

   No outer margin: the page decides where the band sits.
   ========================================================================== */

.subscribe {
	width: min(100%, 1088px);
	min-height: 302px;
	margin-inline: auto;
	padding: 29px var(--page-gutter-sm) 23px;
	border-radius: 30px;
	/* The wash is a 287x265 blur in Figma, stretched non-uniformly to 1443x521
	   and cropped to the band's 1088x302 at (164, 21). As percentages that
	   crop becomes the size and position below, and it scales with the band.
	   Black underneath, so the band never flashes transparent before the
	   image loads. */
	background:
		url("/assets/media/subscribe/band-wash.webp") 46.2% 9.7% / 132.6% 172.5% no-repeat,
		var(--color-black);
	color: var(--color-cream);
	text-align: center;
}

.subscribe__eyebrow {
	margin: 0;
	font: var(--label-m);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
}

.subscribe__title {
	margin: 19px 0 0;
	font: 700 var(--text-display-s) / 1 var(--font-sans);
	letter-spacing: var(--ls-display);
}

.subscribe__lede {
	max-width: 386px;
	margin: 11px auto 0;
	font: 400 var(--text-base) / 1.15 var(--font-sans);
	/* Evens the lines out, so a narrow band never leaves one word on the last
	   line. At 1088 it is the frame's own two lines either way. */
	text-wrap: balance;
}

/* --- The form --------------------------------------------------------------- */

.subscribe__form {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 31px;
}

.subscribe__field {
	position: relative;
	width: min(100%, 421px);
}

/* The borders are inset shadows, so focus and error never move anything by
   the width of a border. */
.subscribe__input {
	display: block;
	width: 100%;
	height: 37px;
	padding: 0 19px;
	border: 0;
	border-radius: 10px;
	background: var(--color-cream);
	color: var(--color-black);
	font: 400 var(--text-sm) / 1.35 var(--font-sans);
	outline: none;
	transition: box-shadow var(--transition);
}

.subscribe__input::placeholder {
	color: color-mix(in srgb, var(--color-sand) 80%, transparent);
}

.subscribe__input:focus {
	box-shadow: inset 0 0 0 2px var(--color-brand);
}

.subscribe.is-invalid .subscribe__input,
.subscribe.is-error .subscribe__input {
	box-shadow: inset 0 0 0 2px var(--color-danger-on-dark);
}

/* Absolute and inside the 25px gap above the button, the way the frame draws
   it, so a message appearing does not push the button down. */
.subscribe__message {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	margin: 0;
	font: 400 var(--text-4xs) / 1.3 var(--font-sans);
	color: var(--color-danger-on-dark);
	text-align: left;
}

.subscribe__send {
	min-width: 114px;
	height: 37px;
	margin-top: 25px;
	padding-inline: var(--space-8);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-black);
	color: var(--color-cream);
	font: var(--label-m);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background var(--transition),
		color var(--transition);
}

/* "When Enter is pressed or Send is clicked, the button stays orange" (Figma
   comment). */
.subscribe.is-attempted .subscribe__send {
	background: var(--color-brand);
}

.subscribe__send:focus-visible {
	outline: 2px solid var(--color-cream);
	outline-offset: 2px;
}

.subscribe.is-loading .subscribe__send,
.subscribe.is-loading.is-attempted .subscribe__send {
	background: var(--color-grid);
	color: color-mix(in srgb, var(--color-cream) 50%, transparent);
	cursor: progress;
}

/* --- Success: the confirmation replaces the form --------------------------- */

.subscribe.is-success .subscribe__form {
	display: none;
}

.subscribe__success {
	margin-top: 46px;
	outline: none;
}

.subscribe__success-title {
	margin: 0;
	font: 700 var(--text-lg) / 1.1 var(--font-sans);
}

.subscribe__success-body {
	margin: 6px 0 0;
	font: 400 var(--text-sm) / 1.35 var(--font-sans);
}

/* --- Mobile: no frame exists; a freestyle agreed with the owner -----------
   This is the same partial, not a second one: a page that includes the band
   gets these rules automatically. The rhythm follows the desktop band scaled
   down, the way Careers and Our Work scale their own mobile type (32 → 32 for
   the title, 16 → 14 for the copy). */
@media (max-width: 767px) {
	.subscribe {
		/* 288 x 387 (frame 87:5221), the band capped so it scales down on a
		   narrower phone. The content is centred in that height. */
		width: min(288px, 100%);
		min-height: 387px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 32px var(--page-gutter-sm);
		/* Radius stays the base 30px on mobile too (frame 87:5221), not the smaller
		   card radius. */
		/* The desktop crop, stretched onto a band this narrow, loses the orange
		   and reads as a grey smear. This keeps the same image but shows its
		   black-to-orange diagonal — black top-left, orange at the right — with
		   the grey glow along the bottom. */
		background-size: 260% 150%;
		background-position: 62% 30%;
	}

	.subscribe__title {
		margin-top: 16px;
	}

	.subscribe__lede {
		max-width: 300px;
		margin-top: 10px;
		font: 400 var(--text-sm) / 1.35 var(--font-sans);
	}

	.subscribe__form {
		margin-top: 24px;
	}

	.subscribe__field {
		width: 100%;
	}

	.subscribe__send {
		margin-top: 24px;
	}

	.subscribe__success {
		margin-top: 28px;
	}
}