/* Infinite's teaser (ADR 0012): Infinite's tokens, reset and `/soon` styles, plus the newsletter
   form's busy and honeypot rules, since the teaser loads none of academind.com's stylesheet. */

@font-face {
	font-family: 'Newsreader Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(/infinite/newsreader.woff2) format('woff2-variations');
	unicode-range:
		U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
		U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--ink: light-dark(#141a19, #edf1f0);
	--muted: light-dark(#5c6765, #b4bebb);
	--faint: light-dark(#879290, #65706d);
	--line: light-dark(rgb(20 44 40 / 0.14), rgb(255 255 255 / 0.15));
	--accent: light-dark(#0d7a6e, #167a6e);
	--accent-hover: light-dark(#0a685e, #1a897c);
	--accent-ink: white;
	--accent-soft: light-dark(rgb(13 122 110 / 0.12), rgb(92 196 182 / 0.18));
	--danger: light-dark(#b42318, #d9443a);
	--font-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
	--font-display:
		-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
	--text-12: 0.75rem;
	--text-13: 0.8125rem;
	--text-15: 0.9375rem;
	--text-16: 1rem;
	--text-17: 1.0625rem;
	--text-18: 1.125rem;
	--text-20: 1.25rem;
	--text-22: 1.375rem;
	--text-32: 2rem;
	--text-hero: clamp(2.25rem, 1.4rem + 2.6vw, 3.5rem);
	--radius-12: 0.75rem;
	--radius-full: 999px;
	--ease: cubic-bezier(0.22, 0.9, 0.35, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
}

html {
	scrollbar-gutter: stable;
	font-size: clamp(100%, 0.175rem + 0.75 * min(1vw, 16vh / 9), 175%);
}

body {
	background: #141413;
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--text-17);
	letter-spacing: -0.022em;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

h1,
h2 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.028em;
	line-height: 1.15;
	text-wrap: balance;
}

img,
svg {
	display: block;
	max-inline-size: 100%;
}

input,
button {
	font: inherit;
	color: inherit;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration: none;
}

.visually-hidden,
.newsletter-honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The page */

.teaser {
	--serif: 'Newsreader Variable', Georgia, serif;
	--canvas: #141413;
	--cream: #f5efe0;
	display: grid;
	grid-template-columns:
		[full-start] minmax(1.25rem, 1fr) [text-start] minmax(0, 38rem) [text-end] minmax(2rem, 6rem)
		[side-start] minmax(0, 34rem) [side-end] minmax(0, 1fr) [full-end];
	grid-template-rows: auto 1fr auto;
	min-block-size: 100svh;
	overflow-x: clip;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 0 0 0 -2.4 1.3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)' opacity='0.07'/%3E%3C/svg%3E")
			0 0 / 18.75rem,
		var(--canvas);
	color-scheme: dark;
	color: var(--ink);

	@media (width < 64rem) {
		grid-template-columns:
			[full-start] 1.25rem [text-start side-start] minmax(0, 1fr)
			[text-end side-end] 1.25rem [full-end];
		grid-template-rows: auto;
	}

	> header {
		grid-area: 1 / text;
		padding-block: 1.5rem 4rem;

		@media (width < 64rem) {
			padding-block-end: 2rem;
		}
	}

	> main {
		grid-area: 2 / text;
		display: grid;
		align-content: center;
		gap: 1.25rem;
		padding-block-end: 5rem;
		font-family: var(--serif);
		font-optical-sizing: auto;

		@media (width < 64rem) {
			align-content: start;
			padding-block-end: 3rem;
		}
	}

	> footer {
		grid-area: 3 / text;
		display: flex;
		gap: 1.25rem;
		padding-block: 0 1.5rem;
		color: var(--faint);
		font-size: var(--text-13);

		@media (width < 64rem) {
			grid-area: 4 / text;
			padding-block-start: 1.5rem;
		}

		a:hover {
			color: var(--ink);
		}
	}
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 700 var(--text-18) var(--font-display);
	letter-spacing: -0.02em;

	.mark {
		color: #39786e;
		font-size: var(--text-22);
		font-weight: 600;
		line-height: 1;
	}

	span:last-child {
		color: var(--faint);
		font-weight: 500;
		letter-spacing: 0;
	}
}

h1 {
	margin-block-end: 0.5rem;
	font-family: var(--serif);
	font-size: var(--text-hero);
	font-weight: 450;
	line-height: 1.08;
	letter-spacing: -0.015em;
}

main p {
	color: color-mix(in srgb, var(--ink) 84%, var(--canvas));
	font-size: var(--text-20);
	line-height: 1.6;

	@media (width < 64rem) {
		font-size: var(--text-18);
	}
}

main .byline {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	color: var(--ink);
	font-family: var(--font-text);
	font-size: var(--text-15);
	font-weight: 500;
	line-height: 1.35;

	small {
		display: block;
		color: var(--faint);
		font-size: var(--text-13);
		font-weight: 400;
	}
}

.faces {
	display: flex;
	flex: none;

	img {
		inline-size: 2.75rem;
		block-size: 2.75rem;
		border: 0.125rem solid var(--canvas);
		border-radius: var(--radius-full);
		object-fit: cover;

		& + img {
			margin-inline-start: -0.625rem;
		}
	}
}

aside {
	position: relative;
	grid-area: 1 / text-end / 4 / full-end;
	display: grid;
	align-content: end;
	padding: 3rem 6rem 4.5rem 13rem;
	color-scheme: light;
	color: var(--cream);

	.loop {
		position: absolute;
		inset: 10rem auto auto 4rem;
		inline-size: 29rem;
		overflow: visible;

		path {
			fill: none;
			stroke: currentColor;
			stroke-width: 34;
			stroke-linejoin: round;
		}
	}

	@media (width < 64rem) {
		grid-area: 3 / full;
		padding: 12rem 1.25rem 3rem;

		.loop {
			inset: 1.5rem auto auto calc(50% - 9.5rem);
			inline-size: 19rem;
		}
	}
}

.cream {
	position: absolute;
	inset: 0;
	clip-path: polygon(43% 0, 100% 0, 100% 100%, 6% 100%);
	background: var(--cream);
	color: var(--accent);

	@media (width < 64rem) {
		clip-path: polygon(0 9rem, 100% 1rem, 100% 100%, 0 100%);
	}
}

.invite {
	position: relative;
	display: grid;
	gap: 0.875rem;
	max-inline-size: 27rem;
	color: var(--ink);

	h2 {
		font-family: var(--serif);
		font-size: var(--text-32);
		font-weight: 450;
		line-height: 1.15;
		letter-spacing: -0.01em;
	}

	> p {
		margin-block-end: 0.5rem;
		color: var(--muted);
		font-family: var(--serif);
		font-size: var(--text-17);
		line-height: 1.55;
	}
}

.soon {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	justify-self: start;
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-full);
	background: var(--accent-soft);
	color: var(--accent);
	font-size: var(--text-12);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	&::before {
		content: '';
		inline-size: 0.5rem;
		block-size: 0.5rem;
		border-radius: var(--radius-full);
		background: currentColor;
		box-shadow: 0 0 0 0.25rem var(--accent-soft);
	}
}

/* The sign-up: NewsletterForm's markup in Infinite's look */

.signup {
	display: grid;
	gap: 0.75rem;
}

.newsletter-form {
	display: grid;
	gap: 0.625rem;
}

.newsletter-input,
.newsletter-submit {
	block-size: 3.25rem;
	border-radius: var(--radius-12);
	font-size: var(--text-16);
}

.newsletter-input {
	padding-inline: 1rem;
	border: 1px solid var(--line);
	background: white;
	color: var(--ink);
	outline: none;
	transition:
		border-color 160ms var(--ease),
		opacity 160ms var(--ease);

	&::placeholder {
		color: var(--faint);
	}

	&:focus-visible {
		border-color: var(--accent);
	}
}

/* Turnstile's flexible widget keeps its 65 px free, so the form doesn't jump when it loads. */
.newsletter-turnstile {
	min-block-size: 65px;
}

.newsletter-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 0;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 160ms var(--ease);

	&:hover:not(:disabled) {
		background: var(--accent-hover);
	}

	&:disabled {
		opacity: 0.5;
		cursor: default;
	}

	/* Busy from the first submit until the next page (newsletter.ts); the input dims with it. */
	&[aria-busy='true']:disabled {
		opacity: 0.8;
		cursor: progress;
	}
}

.newsletter-form:has(.newsletter-submit[aria-busy='true']) .newsletter-input {
	opacity: 0.6;
}

.newsletter-spinner {
	display: none;
	inline-size: 1em;
	block-size: 1em;
	border: 2px solid currentColor;
	border-inline-end-color: transparent;
	border-radius: var(--radius-full);
	animation: newsletter-spin 800ms linear infinite;

	[aria-busy='true'] > & {
		display: inline-block;
	}

	@media (prefers-reduced-motion: reduce) {
		animation: none;
	}
}

@keyframes newsletter-spin {
	to {
		rotate: 1turn;
	}
}

/* Under the form, the problem line comes before the consent sentence. */
.newsletter-disclaimer {
	order: 1;
	color: var(--muted);
	font-size: var(--text-12);
	line-height: 1.5;

	a {
		text-decoration: underline;
	}
}

.problem {
	color: var(--danger);
	font-size: var(--text-15);
}

.sent {
	padding: 0.75rem 1rem;
	border-radius: var(--radius-12);
	background: var(--accent-soft);
	color: var(--ink);
	font-size: var(--text-18);
	line-height: 1.5;
}