@font-face {
	font-family: Excalifont;
	src: url('fonts/Excalifont-Regular.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Comic Shanns';
	src: url('fonts/ComicShanns-Regular.woff2') format('woff2');
	font-display: swap;
}

:root {
	--ink: #1e1e1e;
	--dim: #495057;
	--hand: Excalifont, 'Comic Sans MS', cursive;
	--mono: 'Comic Shanns', ui-monospace, Menlo, monospace;
	/* The unit of the sizes in the card. The wide form of the page changes it. */
	--u: 1px;
	color-scheme: light;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background: #ffffff;
	color: var(--ink);
}

body {
	position: relative;
	font-family: var(--hand);
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

/* The canvas of vignettes. It covers the page, is behind the hub and takes no pointer events. */
#canvas {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.v {
	position: absolute;
	left: 0;
	top: 0;
	will-change: transform;
}
.v svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.v path {
	transition: fill 0.25s;
}
.pop {
	transform-box: fill-box;
	transform-origin: center;
}

/* The page has two forms. The basic one is a column that scrolls: the card, the sample clip
   under it, and rows of drawings (canvas.js sets the space above and below the hub for them).
   In a window that is wide and high enough, <html> has the class "wide": all is in one screen,
   with the card and the clip side by side in one outline and the drawings around them. */

/* The bottom 30px of the page is the line of the footer. */
.stage {
	position: relative;
	display: grid;
	place-items: start center;
	min-height: 100vh;
	min-height: 100svh;
	padding: 16px 16px 46px;
}
.wide .stage {
	place-items: center;
}

/* The hub: the card and the sample clip. In the wide form its unit --u is less than 1px in a
   low window and more in a large one. */
.hub {
	position: relative;
	isolation: isolate;
	width: min(100%, 520px);
}
.card {
	padding: 30px 40px 18px;
}
.wide .hub {
	--u: max(clamp(0.875px, 0.1156vh, 1px), min(0.065vw, 0.1156vh, 1.5px));
	display: flex;
	align-items: center;
	gap: calc(32 * var(--u));
	width: auto;
	padding: calc(30 * var(--u)) calc(40 * var(--u)) calc(18 * var(--u));
}
.wide .card {
	width: calc(410 * var(--u));
	padding: 0;
}
.ink {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}
.bulb {
	position: absolute;
	left: calc(30 * var(--u));
	top: calc(-32 * var(--u));
	width: calc(60 * var(--u));
	transform: rotate(-12deg);
}
.rays {
	animation: glow 3.2s ease-in-out infinite;
}
@keyframes glow {
	50% {
		opacity: 0.25;
	}
}

/* The name of the newsletter: a wordmark in the hand font, smaller than the headline. */
.name {
	margin: 0 0 calc(5 * var(--u));
	font-size: calc(24 * var(--u));
	line-height: 1.1;
}
h1 {
	margin: 0 0 calc(12 * var(--u));
	font-size: calc(38 * var(--u));
	font-weight: 400;
	line-height: 1.14;
}
/* A short headline (the thank-you page) is larger. */
h1.big {
	font-size: calc(54 * var(--u));
}
/* The headline breaks only between its three parts. */
h1 > span {
	display: inline-block;
}
.lede {
	margin: 0 0 calc(18 * var(--u));
	font-family: var(--mono);
	font-size: calc(17 * var(--u));
	line-height: 1.4;
	color: var(--dim);
	text-wrap: balance;
}

label {
	display: block;
	margin-bottom: calc(7 * var(--u));
	font-family: var(--mono);
	font-size: calc(14 * var(--u));
	color: var(--dim);
}
.row {
	display: flex;
	gap: calc(12 * var(--u));
}
.field {
	position: relative;
	isolation: isolate;
	flex: 1;
	min-width: 0;
}
input,
button {
	height: calc(54 * var(--u));
	border: 0;
	border-radius: 14px;
	background: none;
	font-family: var(--hand);
	color: var(--ink);
}
input {
	display: block;
	width: 100%;
	padding: 0 calc(18 * var(--u));
	font-size: calc(21 * var(--u));
}
input::placeholder {
	color: #adb5bd;
	opacity: 1;
}
button {
	position: relative;
	isolation: isolate;
	padding: 0 calc(24 * var(--u));
	font-size: calc(23 * var(--u));
	cursor: pointer;
	transition: transform 0.15s;
}
button:hover {
	transform: translateY(-2px) rotate(-1deg);
}
button:active {
	transform: translateY(1px);
}
button:disabled {
	cursor: default;
	opacity: 0.55;
	transform: none;
}
/* The focus: a blue ring, and the outline of the field turns blue. */
input:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 3px solid #4263eb;
	outline-offset: 2px;
}
.field:focus-within .ink path[stroke] {
	stroke: #4263eb;
}
.field:has([aria-invalid='true']) .ink path[stroke] {
	stroke: #e03131;
}

/* The line under the form: a hint, or a message with a marker highlight in the colour of its kind. */
.note {
	min-height: 26px;
	margin: calc(8 * var(--u)) 0 0;
	font-family: var(--mono);
	font-size: calc(14 * var(--u));
	line-height: 26px;
	color: var(--dim);
}
#note[data-kind='busy'],
#note[data-kind='warn'],
#note[data-kind='error'],
#note[data-kind='ok'] {
	padding: 3px 10px;
	border-radius: 8px;
	background: #f1f3f5;
	color: var(--ink);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
#note a {
	color: inherit;
}
#note[data-kind='warn'] {
	background: #ffec99;
}
#note[data-kind='error'] {
	background: #ffc9c9;
}
#note[data-kind='ok'] {
	background: #d3f9d8;
}

/* After a sign-up, the message takes the place of the field and the button.
   main.js keeps the height of the form, so that nothing on the page moves. */
form.done {
	display: grid;
	align-items: center;
}
form.done label,
form.done .row {
	display: none;
}
form.done .note {
	margin: 0;
	font-size: calc(17 * var(--u));
	line-height: 1.75;
}

/* The sample clip, in a hand-drawn frame. The play mark shows only when the clip is a link. */
.sample {
	margin: 26px 6px 0;
}
.wide .sample {
	width: calc(300 * var(--u));
	margin: 0 0 calc(14 * var(--u));
}
.clip {
	position: relative;
	isolation: isolate;
	display: block;
	border-radius: 10px;
}
.clip video {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #ffffff;
}
.clip .ink {
	inset: -5px;
	z-index: 1;
	width: calc(100% + 10px);
	height: calc(100% + 10px);
}
.play {
	position: absolute;
	right: -12px;
	bottom: -12px;
	z-index: 2;
	width: calc(44 * var(--u));
	transition: transform 0.15s;
}
.clip:not([href]) .play {
	display: none;
}
.clip:hover .play {
	transform: scale(1.1) rotate(-5deg);
}
.clip:focus-visible {
	outline-offset: 7px;
}
figcaption {
	margin-top: calc(14 * var(--u));
	font-family: var(--mono);
	font-size: calc(14 * var(--u));
	line-height: 1.4;
	color: var(--dim);
	text-align: center;
	text-wrap: balance;
}

/* A text link in the card or in a page of text: an orange underline. */
.back a,
.doc a {
	color: inherit;
	text-decoration-color: #f08c00;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
/* The link to the home page on the thank-you page. */
.back {
	margin: 0 0 calc(8 * var(--u));
	font-size: calc(21 * var(--u));
}

/* The quiet links at the bottom of each page. */
.foot {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 30px;
	font-family: var(--mono);
	font-size: 12px;
}
.foot a {
	padding: 6px 10px;
	border-radius: 6px;
	color: var(--dim);
	text-decoration: none;
}
.foot a:hover {
	text-decoration: underline;
}

/* A page of plain text (the privacy page): one column that is easy to read. */
.doc {
	max-width: 690px;
	margin: 0 auto;
	padding: 26px 20px 0;
	font-family: var(--mono);
	font-size: 17px;
	line-height: 1.6;
}
.doc + .foot {
	position: static;
	margin: 26px 0 10px;
}
.home {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: -8px;
	font-family: var(--hand);
	font-size: 22px;
	line-height: 1.2;
}
.doc .home {
	text-decoration: none;
}
.home svg {
	width: 40px;
	transform: rotate(-12deg);
}
.doc h1,
.doc h2 {
	font-family: var(--hand);
	font-weight: 400;
	line-height: 1.2;
}
.doc h1 {
	margin: 30px 0 2px;
	font-size: 46px;
}
/* The yellow marker under the title, with no script. */
.doc h1 span {
	padding: 0 8px;
	margin-left: -8px;
	background: linear-gradient(transparent 66%, #ffec99 66%, #ffec99 90%, transparent 90%);
}
.doc h2 {
	margin: 34px 0 6px;
	font-size: 26px;
}
.doc p,
.doc ul {
	margin: 0 0 12px;
}
.doc ul {
	padding-left: 24px;
}
.doc li {
	margin-bottom: 6px;
}
.doc .date {
	font-size: 15px;
	color: var(--dim);
}
.doc .back {
	margin: 36px 0 0;
	font-family: var(--hand);
	font-size: 21px;
}

/* A phone: a compact card, so that a drawing fits above it in the first screen. */
@media (max-width: 560px) {
	.card {
		padding: 24px 20px 10px;
	}
	.name {
		margin-bottom: 6px;
		font-size: 20px;
	}
	h1.big {
		font-size: 40px;
	}
	.back {
		font-size: 19px;
	}
	.doc {
		font-size: 16px;
	}
	.doc h1 {
		font-size: 38px;
	}
	.bulb {
		left: 18px;
		top: -26px;
		width: 48px;
	}
	h1 {
		margin-bottom: 10px;
		font-size: 26px;
	}
	.lede {
		margin-bottom: 12px;
		font-size: 15px;
		line-height: 1.45;
	}
	.row {
		gap: 8px;
	}
	input,
	button {
		height: 48px;
	}
	/* The text of the field is 16px or more: under that, Safari on a phone zooms the page on focus. */
	input {
		padding: 0 10px;
		font-size: 17px;
	}
	button {
		padding: 0 12px;
		font-size: 20px;
	}
	.note {
		min-height: 44px;
		margin-top: 8px;
		line-height: 22px;
	}
	#note[data-kind] {
		padding-top: 2px;
		padding-bottom: 2px;
	}
	/* The message after a sign-up is long: at this size it fits in the place of the field and the button. */
	form.done .note {
		font-size: 15px;
		line-height: 1.7;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rays {
		animation: none;
	}
	button,
	.play,
	.v path {
		transition: none;
	}
	button:hover,
	.clip:hover .play {
		transform: none;
	}
}