.scnl-archive,
.scnl-form,
.scnl-notice {
	--scnl-main: #3a3036;
	--scnl-blue: #228dcd;
	--scnl-blue-dark: #1676ad;
	--scnl-yellow: #f7c343;
	--scnl-green: #92b79f;
	--scnl-pink: #ec6ba5;
	--scnl-paper: #fbfaf8;
	--scnl-mist: #efefef;
	--scnl-beige: #b2aea7;
	color: var(--scnl-main);
	font-family: "Inter", sans-serif;
}

.scnl-archive-list {
	border-top: 1px solid var(--scnl-main);
	counter-reset: scnl-newsletter;
	display: grid;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.scnl-archive-item {
	--scnl-row-accent: var(--scnl-blue);
	align-items: center;
	border-bottom: 1px solid color-mix(in srgb, var(--scnl-main) 28%, transparent);
	counter-increment: scnl-newsletter;
	display: grid;
	gap: clamp(16px, 3vw, 32px);
	grid-template-columns: 48px minmax(0, 1fr) auto;
	padding: clamp(19px, 3vw, 29px) 0;
	position: relative;
	transition: padding .35s cubic-bezier(.22, 1, .36, 1);
}

.scnl-archive-item:nth-child(4n + 2) { --scnl-row-accent: var(--scnl-yellow); }
.scnl-archive-item:nth-child(4n + 3) { --scnl-row-accent: var(--scnl-green); }
.scnl-archive-item:nth-child(4n + 4) { --scnl-row-accent: var(--scnl-pink); }
.scnl-archive-item::before { color: color-mix(in srgb, var(--scnl-row-accent) 82%, var(--scnl-main)); content: counter(scnl-newsletter, decimal-leading-zero); font-size: .7rem; font-weight: 850; letter-spacing: .08em; }
.scnl-archive-item::after { background: var(--scnl-row-accent); content: ""; inset: auto 0 -1px; height: 3px; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.scnl-archive-item:hover { padding-inline: 10px; }
.scnl-archive-item:hover::after { transform: scaleX(1); }
.scnl-archive-copy { min-width: 0; }
.scnl-archive-title { font-family: "Inter", sans-serif; font-size: clamp(1.08rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.25; margin: 5px 0 0; }
.scnl-archive-title a { color: var(--scnl-main); text-decoration: none; transition: color .2s ease; }
.scnl-archive-title a:hover,
.scnl-archive-title a:focus-visible { color: var(--scnl-blue-dark); outline: 0; }
.scnl-archive-date { color: #736970; font-size: .68rem; font-weight: 650; letter-spacing: .11em; text-transform: uppercase; }

.scnl-archive-button,
.scnl-submit {
	align-items: center;
	background: var(--scnl-main);
	border: 1px solid var(--scnl-main);
	border-radius: 2px;
	color: var(--scnl-paper);
	cursor: pointer;
	display: inline-flex;
	font-family: "Inter", sans-serif;
	font-size: .71rem;
	font-weight: 700;
	justify-content: center;
	letter-spacing: .075em;
	min-block-size: 44px;
	padding: 10px 17px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}

.scnl-archive-button:hover,
.scnl-archive-button:focus-visible,
.scnl-submit:hover,
.scnl-submit:focus-visible { background: var(--scnl-blue-dark); border-color: var(--scnl-blue-dark); color: var(--scnl-paper); outline: 0; transform: translateY(-2px); }

.scnl-form {
	background: var(--scnl-paper);
	border: 1px solid color-mix(in srgb, var(--scnl-main) 24%, transparent);
	box-shadow: 8px 8px 0 color-mix(in srgb, var(--scnl-blue) 18%, var(--scnl-mist));
	max-inline-size: 760px;
	padding: clamp(22px, 4vw, 38px);
	position: relative;
}

.scnl-form::before { background: var(--scnl-blue); content: ""; height: 5px; left: clamp(22px, 4vw, 38px); position: absolute; top: -1px; width: 70px; }
.scnl-form::after { border: 7px solid var(--scnl-pink); border-radius: 50%; content: ""; height: 22px; position: absolute; right: 20px; top: 19px; width: 22px; }
.scnl-form-grid { display: grid; gap: 17px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.scnl-field { display: grid; font-family: "Inter", sans-serif; font-size: .76rem; font-weight: 700; gap: 7px; letter-spacing: .02em; }
.scnl-field-email { grid-column: 1 / -1; }
.scnl-field input {
	background: #f5f2ee;
	border: 1px solid color-mix(in srgb, var(--scnl-main) 30%, transparent);
	border-radius: 2px;
	color: var(--scnl-main);
	font-family: "Inter", sans-serif;
	inline-size: 100%;
	min-block-size: 50px;
	padding: 10px 13px;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.scnl-field input:hover { background: var(--scnl-paper); border-color: var(--scnl-beige); }
.scnl-field input:focus { background: var(--scnl-paper); border-color: var(--scnl-blue-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--scnl-blue) 17%, transparent); outline: 0; }
.scnl-consent { align-items: flex-start; display: flex; font-size: .76rem; gap: 9px; line-height: 1.5; margin: 18px 0; }
.scnl-consent input { accent-color: var(--scnl-blue-dark); flex: 0 0 auto; margin-top: 3px; }
.scnl-consent a { color: var(--scnl-blue-dark); font-weight: 650; }
.scnl-submit:disabled { cursor: wait; opacity: .56; transform: none; }
.scnl-form-message { font-size: .82rem; font-weight: 700; margin: 13px 0 0; min-block-size: 1.4em; }
.scnl-form-message.is-success { color: #276b49; }
.scnl-form-message.is-error { color: #a33434; }
.scnl-honeypot { block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; inset: -9999px auto auto -9999px; }
.scnl-notice { border-left: 3px solid var(--scnl-yellow); font-size: .88rem; font-weight: 350; padding: 8px 12px; }

@media (max-width: 620px) {
	.scnl-archive-item { align-items: start; gap: 8px 12px; grid-template-columns: 32px minmax(0, 1fr); }
	.scnl-archive-button { grid-column: 2; justify-self: start; margin-top: 8px; }
	.scnl-archive-item:hover { padding-inline: 0; }
	.scnl-form-grid { grid-template-columns: 1fr; }
	.scnl-field-email { grid-column: auto; }
	.scnl-submit { inline-size: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.scnl-archive-item,
	.scnl-archive-item::after,
	.scnl-archive-button,
	.scnl-submit { transition-duration: .01ms !important; }
}