/* The landing page. Like /privacy and /terms it is the server's own page: it must answer
   before any JavaScript runs — to a crawler, to a cold cache, to somebody who has never
   heard of us. No build step and no third-party requests; the two fonts are ours, served
   from /home-assets.

   The tokens below are the wall's own (webclient/src/app.css) and the card, counter, photo
   and crushed-paper rules are ports of Card.svelte, so a card here looks like a card there. */

@font-face {
	font-family: 'Nunito Landing';
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url('/home-assets/nunito.woff2') format('woff2');
}
@font-face {
	font-family: 'Caveat Landing';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('/home-assets/caveat.woff2') format('woff2');
}

:root {
	--wall: #f3eee4;
	--wall-line: #e4dcce;
	--paper: #fffdf8;
	--ink: #2b2622;
	--ink-soft: #6b6560;
	--ink-faint: #9a948d;
	--accent: #e4572e;
	--green: #7cb342;
	--amber: #f9b233;
	--red: #e53935;

	--card-yellow: #ffe86b;
	--card-blue: #a9d8ff;
	--card-pink: #ffb3c7;
	--card-mint: #b8ecc9;
	--card-lilac: #d9c4f2;
	--card-orange: #ffc58a;
	--card-red: #ff8a7d;
	--card-grey: #d6d3ce;
	--card-navy: #2f4a7a;

	--phase-implement: #2f6fdb;
	--phase-review: #f2b705;
	--phase-deploy: #6dbe45;

	--font-ui: 'Nunito Landing', 'Nunito Variable', 'Nunito', system-ui, -apple-system, 'Segoe UI',
		sans-serif;
	--font-hand: 'Caveat Landing', 'Caveat Variable', 'Caveat', 'Segoe Print', cursive;
	--shadow-card: 0 1px 2px rgba(40, 30, 20, 0.14), 0 4px 10px rgba(40, 30, 20, 0.1);
}

* {
	box-sizing: border-box;
}
body {
	margin: 0;
	background: var(--wall);
	color: var(--ink);
	font-family: var(--font-ui);
	-webkit-font-smoothing: antialiased;
}
svg.defs {
	position: absolute;
}
.wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 48px;
}
.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
}

/* ---- footer (the top bar is site.css) ---- */
nav a {
	margin-left: 28px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft);
	text-decoration: none;
}
nav a:hover {
	color: var(--ink);
	text-decoration: underline;
}
footer {
	padding: 20px 0 30px;
	margin-top: 8px;
}
footer .site {
	font-size: 13px;
	font-weight: 700;
	color: var(--ink-soft);
}
footer nav a {
	font-size: 13px;
	margin-left: 20px;
}

/* ---- type ---- */
h1 {
	margin: 0;
	font-size: 58px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -1px;
}
h2 {
	margin: 0;
	font-size: 32px;
	font-weight: 800;
	line-height: 1.2;
}
h3 {
	margin: 18px 0 0;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
}
.lede {
	margin: 22px 0 0;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.55;
	color: var(--ink);
}
.copy p,
.half p {
	margin: 16px 0 0;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--ink-soft);
}
.hand {
	font-family: var(--font-hand);
	font-size: 21px;
	line-height: 1.3;
	color: var(--ink-soft);
}
.copy p.hand {
	font-size: 21px;
}
.hand.tilt {
	display: inline-block;
	transform: rotate(-3deg);
	font-size: 20px;
}

/* ---- buttons ---- */
.actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 24px 0 0;
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 24px;
	border-radius: 8px;
	border: 1.5px solid var(--wall-line);
	background: var(--paper);
	color: var(--ink);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}
.btn:hover {
	border-color: #d6cbb9;
}
.btn.primary {
	padding: 14px 26px;
	border-color: transparent;
	background: var(--accent);
	color: #fff;
	font-weight: 800;
	box-shadow: 0 3px 10px rgba(228, 87, 46, 0.2);
}
.btn.primary:hover {
	background: #d94d26;
}
.btn.dark {
	padding: 13px 22px;
	border-color: transparent;
	background: var(--ink);
	color: var(--paper);
	font-size: 15px;
	white-space: nowrap;
}
.btn.dark:hover {
	background: #1d1916;
}

/* ---- sections ---- */
.hero {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding-top: 56px;
	padding-bottom: 64px;
}
.hero .copy {
	flex: 0 0 560px;
}
.hero .board {
	flex: 1 1 auto;
}
.split {
	display: flex;
	align-items: center;
	gap: 56px;
	padding-bottom: 72px;
}
.split .copy {
	flex: 1 1 auto;
}
.split .media {
	flex: 0 0 auto;
}
.two-up {
	display: flex;
	align-items: flex-start;
	gap: 56px;
	padding-bottom: 72px;
}
.half {
	flex: 1 1 0;
}
.band {
	display: flex;
	align-items: center;
	gap: 40px;
	margin-bottom: 72px;
	padding: 34px 36px;
	border: 1px solid var(--wall-line);
	border-radius: 10px;
	background: var(--paper);
}
.band .copy {
	flex: 1 1 auto;
}
.band.theory .kicker {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.4px;
	color: var(--accent);
}

/* ---- a card, as the wall draws it (Card.svelte) ---- */
.card {
	position: relative;
	width: 160px;
	padding: 9px 11px;
	border-radius: 6px;
	background: var(--bg, var(--card-yellow));
	box-shadow: var(--shadow-card);
	transform: rotate(var(--tilt, 0deg));
}
.card .t {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ink);
}
.card:has(.peek) .t {
	padding-right: 36px;
}
.card .foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
}
.photo {
	position: relative;
	flex: none;
	width: 40px;
	height: 40px;
	border: 2px solid #fff;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(40, 30, 20, 0.25);
}
.photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
}
.counter {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, 0.9);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
	box-shadow: 0 1px 2px rgba(40, 30, 20, 0.25);
}
.counter.green {
	background: var(--green);
}
.counter.amber {
	background: var(--amber);
}
.counter.red {
	background: var(--red);
}
.sticker {
	line-height: 1;
	user-select: none;
}
.sticker.hat {
	position: absolute;
	top: -15px;
	left: 6px;
	font-size: 24px;
	transform: rotate(-8deg);
}
.sticker.loose {
	align-self: center;
	font-size: 22px;
	transform: rotate(6deg);
}
.peek {
	position: absolute;
	top: 7px;
	right: 9px;
	padding: 1px 6px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.55);
	color: var(--ink-soft);
	font-size: 10px;
	font-weight: 700;
}

/* aging: a corner bends a little more each day past the goal, a second corner joins
   halfway, and from twice the goal the paper is crushed (the #crumple-3 filter). */
.card.aged {
	filter: url('#crumple-3') saturate(0.85) brightness(0.97);
	background-image: linear-gradient(
			112deg,
			transparent 38%,
			rgba(255, 255, 255, 0.6) 39%,
			transparent 43%
		),
		linear-gradient(24deg, transparent 58%, rgba(0, 0, 0, 0.16) 59%, transparent 64%),
		linear-gradient(160deg, transparent 20%, rgba(0, 0, 0, 0.15) 21%, transparent 25%),
		linear-gradient(76deg, transparent 70%, rgba(255, 255, 255, 0.5) 71%, transparent 76%),
		linear-gradient(48deg, transparent 84%, rgba(0, 0, 0, 0.13) 85%, transparent 89%),
		linear-gradient(136deg, transparent 8%, rgba(0, 0, 0, 0.1) 9%, transparent 12%);
}
.curl {
	position: absolute;
	pointer-events: none;
}
.curl.br {
	right: 0;
	bottom: 0;
	width: 24px;
	height: 24px;
	border-top-left-radius: 3px;
	background: linear-gradient(
		315deg,
		var(--wall) 0 50%,
		rgba(255, 255, 255, 0.95) 50%,
		rgba(0, 0, 0, 0.16) 100%
	);
	box-shadow: -2px -2px 3px -1px rgba(0, 0, 0, 0.22);
}
.curl.tl {
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	border-bottom-right-radius: 3px;
	background: linear-gradient(
		135deg,
		var(--wall) 0 50%,
		rgba(255, 255, 255, 0.95) 50%,
		rgba(0, 0, 0, 0.16) 100%
	);
	box-shadow: 2px 2px 3px -1px rgba(0, 0, 0, 0.22);
}

/* ---- the board in the hero ---- */
.board {
	display: flex;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--wall-line);
	border-radius: 10px;
	background: var(--paper);
	box-shadow: 0 6px 20px rgba(43, 38, 34, 0.08);
}
.board .col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}
.col-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 11px;
	border-radius: 6px 6px 0 0;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}
.col-head.implement {
	background: var(--phase-implement);
}
.col-head.review {
	background: var(--phase-review);
}
.col-head.deploy {
	background: var(--phase-deploy);
}
.chip {
	padding: 3px 8px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 11px;
	font-weight: 800;
	white-space: nowrap;
}
.col-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 9px;
	padding: 9px;
	border: 1px solid var(--wall-line);
	border-top: 0;
	border-radius: 0 0 6px 6px;
	background: #fbf8f2;
}
.col-body .card {
	width: auto;
}

/* ---- the grey board nobody learns anything from ---- */
.grey {
	display: flex;
	gap: 12px;
	width: 560px;
	padding: 14px;
	border: 1px solid #dcd8d2;
	border-radius: 8px;
	background: #efede9;
}
.gcol {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 8px;
}
.gh {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.6px;
	color: #8b857d;
}
.grow {
	position: relative;
	display: block;
	height: 34px;
	border: 1px solid #dfdbd5;
	border-radius: 3px;
	background: #fff;
}
.grow::before,
.grow::after {
	content: '';
	position: absolute;
	left: 9px;
	height: 5px;
	border-radius: 3px;
}
.grow::before {
	top: 8px;
	right: 9px;
	background: #d8d4ce;
}
.grow::after {
	top: 19px;
	width: 62px;
	background: #e6e2dc;
}
.grow.short::after {
	width: 34px;
}

/* ---- card groups ---- */
.samples,
.cluster {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}
.cluster {
	flex-wrap: wrap;
	gap: 22px 26px;
	width: 620px;
}
.card.down {
	margin-top: 20px;
}
.aged-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 4px;
}
.aged-wrap .hand {
	padding-left: 12px;
}
.media.narrow {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 300px;
	padding-left: 24px;
}

/* ---- the pasted things ---- */
.pasted {
	display: flex;
	align-items: flex-start;
	gap: 26px;
}
.photo-frame {
	width: 300px;
	margin: 0;
	transform: rotate(-2deg);
}
.photo-frame img {
	display: block;
	width: 100%;
	padding: 8px;
	border-radius: 2px;
	background: #fff;
	box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.15);
}
.photo-frame figcaption {
	margin-top: 10px;
	font-size: 19px;
}
.goal-note {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 190px;
	margin-top: 34px;
	padding: 12px 14px;
	border-radius: 3px;
	background: var(--card-yellow);
	transform: rotate(3deg);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
}
.goal-note .hand {
	font-size: 17px;
}
.goal-note .hand.big {
	font-size: 22px;
	color: var(--ink);
}

/* ---- connectors ---- */
.chips {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}
.chip-row {
	padding: 12px 16px;
	border: 1px solid var(--wall-line);
	border-radius: 8px;
	background: var(--paper);
	font-size: 15px;
	font-weight: 700;
}

/* ---- narrower windows: the same page, stacked ---- */
@media (max-width: 1180px) {
	.hero,
	.split,
	.two-up {
		flex-direction: column;
		align-items: stretch;
		gap: 40px;
	}
	.hero .copy {
		flex: 1 1 auto;
	}
	h1 {
		font-size: 46px;
	}
	.grey,
	.cluster,
	.media.narrow {
		width: 100%;
		padding-left: 0;
	}
	.band {
		flex-direction: column;
		align-items: flex-start;
		gap: 28px;
	}
	.samples,
	.cluster {
		flex-wrap: wrap;
	}
}
@media (max-width: 760px) {
	.wrap {
		/* the sides only: the shorthand would also take the sections' bottom padding,
		   which is the whole gap between one section and the next */
		padding-left: 20px;
		padding-right: 20px;
	}
	h1 {
		font-size: 34px;
	}
	h2 {
		font-size: 26px;
	}
	h3 {
		font-size: 24px;
	}
	.hero {
		gap: 32px;
		padding-top: 32px;
		padding-bottom: 48px;
	}
	.split,
	.two-up {
		gap: 28px;
		padding-bottom: 56px;
	}
	/* stacked, the words come first and the picture under them, whichever side it sat on */
	.split.reverse .media {
		order: 1;
	}
	.band {
		gap: 24px;
		margin-bottom: 56px;
		padding: 26px 24px;
	}
	.samples {
		gap: 18px;
	}
	.samples .card.down {
		margin-top: 0;
	}
	.board {
		flex-direction: column;
	}
	.pasted {
		flex-direction: column;
		gap: 22px;
	}
	.photo-frame {
		width: 100%;
	}
	.goal-note {
		width: min(100%, 260px);
		margin-top: 0;
	}
	.half h3 {
		margin-top: 26px;
	}
	.chips {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px;
	}
	.top .bar,
	footer .bar {
		flex-wrap: wrap;
		gap: 10px 16px;
	}
	.top nav {
		margin-left: auto;
	}
	nav a {
		margin: 0 0 0 14px;
		font-size: 13px;
	}
	footer nav {
		display: flex;
		flex-wrap: wrap;
		gap: 6px 18px;
	}
	footer nav a {
		margin: 0;
	}
}