/* ==========================================================================
   Newsletter opt-in — v11 "Field"
   --------------------------------------------------------------------------
   The form's BEHAVIOUR is unchanged: same fields, same honeypot, same time
   trap, same consent checkbox, same double opt-in, same handler. Only its
   appearance is redesigned.

   What changed from the clinical build, and why:

   The field and the button are ONE joined control — a single bordered row
   with the submit pill sitting inside its right edge. A newsletter form is
   one action, and drawing it as one object is both truer and harder to
   ignore than an input with a separate button floating under it.

   The joined control is now a PILL rather than a 10px tile. This is the one
   place the design's near-square rule is broken deliberately: the whole
   control is a single action, and a pill is what the rest of the site's
   actions look like. Everything inside it inherits that shape.

   The consent line sits BELOW the joined control as quiet small print
   rather than beside it. It is a legal requirement, not a decision the
   reader is being asked to weigh, so it should be legible and out of the
   way — not competing with the field for attention.

   Three contexts, one component:
     default          on the sand ground or a white panel (the sidebar)
     --on-accent      on a forest panel — white on green
     inside .st-modal the dialog's own plate

   The consent checkbox is drawn rather than native: a native box cannot be
   given a radius or an accent that matches this palette across browsers,
   and it is the last thing a reader looks at before subscribing.
   ========================================================================== */

.st-optin {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	width: 100%;
}

.st-optin__field {
	position: relative;
	min-width: 0;
}

/* ── The joined control ──────────────────────────────────────────────
   The field that holds an input carries the border, the fill and the pill
   radius; the input inside it is bare and the submit is absolutely placed
   against its right edge. Padding on the input reserves the submit's width
   so a long address never runs underneath the button. */
.st-optin__field:has(.st-optin__input) {
	display: flex;
	align-items: center;
	border: 1.5px solid var(--line-firm, rgba(20, 16, 13, 0.22));
	border-radius: 999px;
	background: var(--paper, #FFFFFF);
	transition: border-color 180ms cubic-bezier(0.2, 0.6, 0.3, 1),
	            box-shadow 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* The focus ring is drawn on the JOINED control rather than on the input,
   because the input has no edge of its own to ring. :focus-within is what
   makes that possible without script. */
.st-optin__field:has(.st-optin__input):focus-within {
	border-color: var(--forest, #1F4A42);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest, #1F4A42) 18%, transparent);
}

.st-optin__input {
	flex: 1;
	min-width: 0;
	padding: 0.95rem 0.5rem 0.95rem 1.25rem;
	border: 0;
	background: transparent;
	font-size: 0.9375rem;
	line-height: 1.3;
	color: var(--ink, #14100D);
	border-radius: 999px;
}

.st-optin__input:focus {
	outline: none;
}

.st-optin__input::placeholder {
	color: var(--ink-500, #8A8175);
	opacity: 1;
}

/* An invalid address only flags once the reader has typed something and
   moved on — flagging an empty or half-typed field is nagging, not help. */
.st-optin__field:has(.st-optin__input:not(:placeholder-shown):invalid) {
	border-color: var(--clay, #C25B3A);
}

/* ── The submit ──────────────────────────────────────────────────────
   Inside the joined control, against its right edge. */
.st-optin__submit {
	flex: none;
	margin: 0.3rem;
	padding: 0.65rem 1.25rem;
	border: 0;
	border-radius: 999px;
	background: var(--forest, #1F4A42);
	color: #FFFFFF;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.008em;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background 180ms cubic-bezier(0.2, 0.6, 0.3, 1),
	            transform 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.st-optin__submit:hover,
.st-optin__submit:focus-visible {
	background: var(--forest-deep, #143029);
}

.st-optin__submit:active {
	transform: translateY(1px);
}

.st-optin__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* ── Consent ─────────────────────────────────────────────────────────
   Small print under the control. The drawn box is 1.05rem so it stays a
   comfortable target without dominating the line beside it. */
.st-optin__consent {
	margin-top: -0.15rem;
}

.st-optin__consent-label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}

/* The native input stays in the DOM and keeps carrying the state, validation
   and keyboard behaviour; it is only visually replaced. Not display:none,
   which would take it out of the tab order and off the form. */
.st-optin__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	margin: 0;
	pointer-events: none;
}

.st-optin__consent-text {
	position: relative;
	padding-left: 1.65rem;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--ink-400, #6B6358);
}

/* The box. */
.st-optin__consent-text::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.05rem;
	height: 1.05rem;
	border: 1.5px solid var(--line-firm, rgba(20, 16, 13, 0.22));
	border-radius: 4px;
	background: var(--paper, #FFFFFF);
	transition: background 180ms cubic-bezier(0.2, 0.6, 0.3, 1),
	            border-color 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

/* The tick, drawn as two borders on a rotated box so it needs no glyph and
   no second element. */
.st-optin__consent-text::after {
	content: "";
	position: absolute;
	left: 0.36rem;
	top: 0.3em;
	width: 0.3rem;
	height: 0.55rem;
	border: solid #FFFFFF;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transform-origin: center;
	transition: transform 160ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.st-optin__checkbox:checked + .st-optin__consent-text::before {
	background: var(--forest, #1F4A42);
	border-color: var(--forest, #1F4A42);
}

.st-optin__checkbox:checked + .st-optin__consent-text::after {
	transform: rotate(45deg) scale(1);
}

.st-optin__checkbox:focus-visible + .st-optin__consent-text::before {
	outline: 2px solid var(--forest, #1F4A42);
	outline-offset: 2px;
}

.st-optin__consent-text a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.st-optin__consent-text a:hover {
	color: var(--forest, #1F4A42);
}

/* ── The status line ─────────────────────────────────────────────────
   role="status" with aria-live, so a result is announced. Collapsed when
   empty so it reserves no space before there is anything to say. */
.st-optin__message {
	font-size: 0.8125rem;
	line-height: 1.45;
	font-weight: 500;
	padding-left: 1.1rem;
	position: relative;
}

.st-optin__message:empty {
	display: none;
}

.st-optin__message::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: currentColor;
}

.st-optin__message.is-success {
	color: var(--forest, #1F4A42);
}

.st-optin__message.is-error {
	color: var(--clay, #C25B3A);
}

/* The honeypot. Hidden with CSS rather than type="hidden" so a bot still
   fills it; off-screen rather than display:none because some bots skip
   undisplayed fields. */
.st-optin__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── On a forest panel ───────────────────────────────────────────────
   The closing band, the sidebar's subscribe panel and the modal all invert.
   The control goes transparent with a white edge, and the submit flips to
   white-on-green so it stays the brightest thing in the panel. */
.st-optin--on-accent .st-optin__field:has(.st-optin__input),
.panel--subscribe .st-optin__field:has(.st-optin__input),
.st-modal .st-optin__field:has(.st-optin__input) {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.35);
}

.st-optin--on-accent .st-optin__field:has(.st-optin__input):focus-within,
.panel--subscribe .st-optin__field:has(.st-optin__input):focus-within,
.st-modal .st-optin__field:has(.st-optin__input):focus-within {
	border-color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.st-optin--on-accent .st-optin__input,
.panel--subscribe .st-optin__input,
.st-modal .st-optin__input {
	color: #FFFFFF;
}

.st-optin--on-accent .st-optin__input::placeholder,
.panel--subscribe .st-optin__input::placeholder,
.st-modal .st-optin__input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.st-optin--on-accent .st-optin__submit,
.panel--subscribe .st-optin__submit,
.st-modal .st-optin__submit {
	background: #FFFFFF;
	color: var(--forest-deep, #143029);
}

.st-optin--on-accent .st-optin__submit:hover,
.st-optin--on-accent .st-optin__submit:focus-visible,
.panel--subscribe .st-optin__submit:hover,,
.st-modal .st-optin__submit:hover,
.panel--subscribe .st-optin__submit:focus-visible,
.st-modal .st-optin__submit:focus-visible {
	background: var(--sand, #F2EEE7);
}

.st-optin--on-accent .st-optin__consent-text,
.panel--subscribe .st-optin__consent-text,
.st-modal .st-optin__consent-text {
	color: rgba(255, 255, 255, 0.7);
}

.st-optin--on-accent .st-optin__consent-text::before,
.panel--subscribe .st-optin__consent-text::before,
.st-modal .st-optin__consent-text::before {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.45);
}

.st-optin--on-accent .st-optin__checkbox:checked + .st-optin__consent-text::before,
.panel--subscribe .st-optin__checkbox:checked + .st-optin__consent-text::before,
.st-modal .st-optin__checkbox:checked + .st-optin__consent-text::before {
	background: #FFFFFF;
	border-color: #FFFFFF;
}

/* The tick inverts to the panel's own green, since the box is now white. */
.st-optin--on-accent .st-optin__checkbox:checked + .st-optin__consent-text::after,
.panel--subscribe .st-optin__checkbox:checked + .st-optin__consent-text::after,
.st-modal .st-optin__checkbox:checked + .st-optin__consent-text::after {
	border-color: var(--forest, #1F4A42);
}

.st-optin--on-accent .st-optin__checkbox:focus-visible + .st-optin__consent-text::before,
.panel--subscribe .st-optin__checkbox:focus-visible + .st-optin__consent-text::before,
.st-modal .st-optin__checkbox:focus-visible + .st-optin__consent-text::before {
	outline-color: #FFFFFF;
}

.st-optin--on-accent .st-optin__consent-text a:hover,
.panel--subscribe .st-optin__consent-text a:hover,
.st-modal .st-optin__consent-text a:hover {
	color: #FFFFFF;
}

.st-optin--on-accent .st-optin__message.is-success,
.st-optin--on-accent .st-optin__message.is-error,
.panel--subscribe .st-optin__message.is-success,,
.st-modal .st-optin__message.is-success,
.panel--subscribe .st-optin__message.is-error,
.st-modal .st-optin__message.is-error {
	color: #FFFFFF;
}

/* ── The modal ───────────────────────────────────────────────────────
   Opened by the masthead's Subscribe control and by any link to
   #formPopup. Hidden with the `hidden` attribute, which main.css forces to
   win over this display:grid. */
.st-modal {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: grid;
	place-items: center;
	padding: var(--gutter, 1.5rem);
}

.st-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 13, 0.62);
	backdrop-filter: blur(3px);
}

.st-modal__dialog {
	position: relative;
	width: min(34rem, 100%);
	max-height: calc(100vh - (var(--gutter, 1.5rem) * 2));
	overflow-y: auto;
	padding: clamp(1.75rem, 4vw, 2.75rem);
	border-radius: 8px;
	background: var(--forest, #1F4A42);
	color: #FFFFFF;
	box-shadow: 0 40px 90px -50px rgba(20, 16, 13, 0.8);
}

.st-modal__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: transparent;
	color: #FFFFFF;
	font-size: 1.25rem;
	line-height: 1;
	transition: background 180ms cubic-bezier(0.2, 0.6, 0.3, 1),
	            border-color 180ms cubic-bezier(0.2, 0.6, 0.3, 1);
}

.st-modal__close:hover,
.st-modal__close:focus-visible {
	background: rgba(255, 255, 255, 0.14);
	border-color: rgba(255, 255, 255, 0.6);
}

/* The kicker names what the dialog is, which the title alone does not — a
   reader who has just clicked Subscribe should see the word "Newsletter"
   confirming where they landed. It is the one label of its kind kept in the
   design, because it carries information rather than restating a heading. */
.st-modal__kicker {
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	margin-bottom: 0.6rem;
}

.st-modal__title {
	font-size: clamp(1.625rem, 3.4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
	margin-bottom: 0.75rem;
	max-width: 18ch;
}

.st-modal__title em {
	font-style: normal;
	color: rgba(255, 255, 255, 0.58);
}

.st-modal__sub {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.74);
	margin-bottom: 1.5rem;
	max-width: 46ch;
}

@media (prefers-reduced-motion: reduce) {
	.st-optin__field:has(.st-optin__input),
	.st-optin__submit,
	.st-optin__consent-text::before,
	.st-optin__consent-text::after,
	.st-modal__close {
		transition: none;
	}
}