/* The public page is type and one live preview: no screenshots, no feature
   list. The story does the work, so everything here is measure, rhythm and
   weight.

   Laid out by named areas. Stacked on a phone; once there is room for a
   readable measure alongside a legible calendar, the story takes the left and
   the preview the right. */

.public-page {
	/* What the story column measured when the page was a single column: the
	   34rem box less its own padding. The grid's padding sits outside the
	   tracks, so a bare 34rem track would come out wider than it used to. */
	--public-measure: calc(34rem - var(--space-lg) * 2);

	display: grid;
	font-family: "Hanken Grotesk", sans-serif;
	gap: var(--space-2xl);
	grid-template-areas:
		"header"
		"story"
		"demo"
		"tail";
	/* minmax(0, 1fr), not auto: the planner inside the preview is about 100ch
	   wide, and an auto track would size to it and push the page wider than the
	   viewport instead of letting the preview scroll inside itself. */
	grid-template-columns: minmax(0, 1fr);
	margin: 0 auto;
	max-width: 84rem;
	padding: var(--space-lg);
	width: 100%;
}

/* Stacked: the words hold their measure and centre, while the preview is free
   to run wider — a calendar squeezed to a text column is unreadable. */
.public-header,
.public-story,
.public-tail {
	margin-inline: auto;
	max-width: var(--public-measure);
	width: 100%;
}

.public-header {
	display: flex;
	grid-area: header;
	justify-content: space-between;
}

.public-story {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	grid-area: story;
}

.public-demo {
	grid-area: demo;
	margin-inline: auto;
	max-width: min(64rem, 100%);
	/* Grid items are min-width: auto by default, which here means "as wide as
	   the planner" — the preview keeps its own scrollbar only if it is allowed
	   to be narrower than its contents. */
	min-width: 0;
	width: 100%;
}

.public-tail {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	grid-area: tail;
}

@media (min-width: 72rem) {
	.public-page {
		/* The preview starts level with the lede rather than the wordmark, and
		   stays put while the story runs on beneath it. */
		align-items: start;
		column-gap: var(--space-xl);
		grid-template-areas:
			"header header"
			"story  demo"
			"tail   demo";
		/* The story gives up width here: the preview is the thing being sold,
		   and it needs about 100ch before the planner starts scrolling. */
		grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
		max-width: 84rem;
		padding: var(--space-xl) var(--space-lg);
		row-gap: var(--space-xl);
	}

	/* The tracks do the sizing now. */
	.public-header,
	.public-story,
	.public-tail,
	.public-demo {
		margin-inline: 0;
		max-width: none;
	}

	/* The prose is sized for a full-width read. In a 28rem column that measure
	   is too short for it, so it steps back down rather than up. */
	.public-prose {
		font-size: 1.05rem;
	}
}

/* Clan + calendar: the weight split lets the name explain itself. */
.public-mark {
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	strong {
		color: var(--color-text);
		font-weight: 700;
	}
}

.public-signin {
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.15s ease;

	&:hover {
		color: var(--color-accent);
	}
}

/* Two weights, not one: a light setup on its own line, then the claim at full
   black. The contrast is what makes it read as set rather than typed. */
.public-lede {
	color: var(--color-text);
	font-size: clamp(2.1rem, 7vw, 3.1rem);
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
	text-wrap: balance;

	.public-lede-open {
		display: block;
		font-weight: 300;
		/* Light weights need less negative tracking than heavy ones. */
		letter-spacing: -0.02em;
	}

	/* The full stop, picked out — the one flash of colour on the page. */
	.public-lede-stop {
		color: var(--color-accent);
	}
}

.public-prose {
	color: var(--color-text-muted);
	display: flex;
	flex-direction: column;
	font-size: 1.25rem;
	gap: 1.4em;
	/* Around 60 characters a line — a comfortable read, not a wall. */
	max-width: 34em;

	p {
		line-height: 1.5;
		margin: 0;
		text-wrap: pretty;
	}

	em {
		color: var(--color-text-subtle);
		font-style: italic;
	}

	del {
		color: var(--color-text-subtle);
		text-decoration-thickness: 1px;
	}
}

.public-close {
	color: var(--color-text-muted);
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	margin: 0;
	text-wrap: balance;
}

/* A link inside a sentence, rather than a standalone one like the sign-in in
   the header. Quiet enough to sit in the line without pulling the eye off it:
   a shade darker than the words around it and a hairline underneath, with the
   accent held back for the hover. The size is the sentence's, since it is part
   of one. */
.public-link {
	border-bottom: 1px solid
		color-mix(in srgb, var(--color-text-subtle) 50%, transparent);
	color: var(--color-text-muted);
	font-weight: 500;
	text-decoration: none;
	transition:
		border-color 0.15s ease,
		color 0.15s ease;

	&:hover {
		border-bottom-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
		color: var(--color-accent);
	}
}

.public-signin--end {
	align-self: flex-start;
	border-bottom: 1px solid
		color-mix(in srgb, var(--color-accent) 40%, transparent);
	color: var(--color-accent);
	font-size: 0.95rem;
	padding-bottom: 0.15em;

	&:hover {
		border-bottom-color: var(--color-accent);
	}
}

/* The preview scrolls sideways like the real planner — headers mirrored by the
   scroll controller, day numbers pinned to the left — but nothing sticks to the
   page and nothing reacts to being clicked. */
.planner-stack--demo {
	/* And it keeps the narrower measure: it sits in a 64rem column and scrolls
	   inside itself, so the extra width the real planner gets on a large screen
	   would only buy it a scrollbar. */
	--planner-max-width: var(--planner-min-width);

	.planner-headers {
		position: static;
	}

	.day--item,
	.day--item-container {
		cursor: default;

		&:hover {
			box-shadow: 0 1px 2px rgba(42, 39, 48, 0.08);
			transform: none;
		}
	}
}

/* Which household you are looking at -------------------------------------- */

/* The preview is a different family on every visit, so it says which one you
   have been dealt — two of them, six of them, the four the story describes.
   A caption rather than a heading: it is a note about the picture below it. */
.public-demo-caption {
	color: var(--color-text-subtle);
	font-size: 0.9rem;
	margin: 0 0 var(--space-sm);
}

/* Waiting list ------------------------------------------------------------ */

/* The card, the pitch and the note it all sits in are shared with the sign-in
   pages and the launch-email one; they live beside .entry-form in forms.css.
   What is left here belongs to the waiting list alone. */

.interest-error {
	color: var(--color-destroy);
	font-size: 0.85rem;
	margin: 0;
	width: 100%;
}

/* Off-screen rather than display: none — some bots skip what is hidden. */
.interest-honeypot {
	height: 0;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.public-testers {
	color: var(--color-text-subtle);
	font-size: 0.85rem;
	margin: 0;
}

/* One thing to do ---------------------------------------------------------- */

/* Signing in, entering a code, setting up from the launch email: the same page
   furniture as the front door, with nothing to sell. No preview, no story, one
   card. One column at every width, centred in the viewport both ways — on a
   phone that is the whole screen, and on a desktop there is nothing to put
   beside it. */
.public-page--entry {
	align-content: center;
	gap: var(--space-xl);
	grid-template-areas:
		"header"
		"story";
	/* Said again here because the front page's wide layout turns .public-page
	   into two tracks and hands the story a 28rem one, with the preview taking
	   the rest. There is no preview on this page, so that would only push the
	   column off to the left of an empty screen. */
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	max-width: 34rem;
	min-height: 100dvh;
	padding-block: var(--space-xl);

	/* The same wide layout frees these to fill their tracks. Here there is one
	   track and they are the page, so they take it back. */
	.public-header,
	.public-story {
		margin-inline: auto;
		max-width: 100%;
		width: 100%;
	}

	/* Nothing sits opposite the wordmark — no sign-in link, since whoever is
	   here has nothing to sign in to yet. */
	.public-header {
		justify-content: center;
	}

	.public-story {
		align-items: center;
	}

	/* The card holds its own left-aligned labels: a centred field label is
	   harder to scan down. Everything around it is centred. */
	.public-lede,
	.entry-note {
		text-align: center;
	}

	.entry-card {
		width: 100%;
	}
}