/*
	The prose pages: about, editorial standards, how we verify, corrections, contact,
	privacy and newsletter. One stylesheet for all seven, because they are the same page
	with different words in it.

	Loaded as pageStyles: [tokens, news, chrome, page], so the .wrap and the focus rule
	arrive from news.css, the masthead, sign-off and lane-chip skeleton from chrome.css,
	and this file styles only what a page of writing adds: the head, the running prose,
	and the sign-up form the newsletter page carries.

	Keyboard hyphen only, sentence-case, no BEM: descriptive names and native nesting.
*/

.page-main {
	padding-block-end: clamp(3rem, 7vw, 5.5rem);
}

/* The reading column, the story page's own. 44rem is the measure every page of writing
   on this site reads at, so a reader moving between a story and a policy keeps their
   line length. */
.page-inner {
	max-width: 44rem;
	margin-inline: auto;
	padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* --------------------------------------------------------------- the head */
/* The tag page's lockup: a small kicker naming what kind of page this is, the title at
   display scale under it, and a hairline closing the block off from the prose. */

.page-head {
	padding-block-end: clamp(1.5rem, 3vw, 2.25rem);
	border-block-end: 1px solid var(--hairline);
	margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
}

.page-kicker {
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted-2);
}

.page-title {
	margin-block-start: 0.4rem;
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 5vw, 3.15rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--text);
	text-wrap: balance;
}

/* -------------------------------------------------------------- the prose */

.page-body {
	font-size: 1.06rem;
	line-height: 1.65;
	color: var(--text);

	p + p {
		margin-block-start: 1.15rem;
	}

	/* A cross-link to another page in the set, inked the way a story's internal links
	   are: the orange that is safe as ink, underlined so it reads as a link in running
	   prose rather than as a coloured word. */
	a {
		color: var(--accent-text);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 2px;

		&:hover {
			text-decoration-thickness: 2px;
		}
	}

	/* A section head in the prose. .post-subheading comes from news.css and carries the
	   type and the rule under it; only the air above it belongs to this flow. */
	.post-subheading {
		margin-block-start: clamp(2rem, 4vw, 2.75rem);
	}

	/* The head above has already set the block's air, so whatever opens the prose opens
	   it flush, section head or paragraph. */
	> :first-child {
		margin-block-start: 0;
	}
}

/* The credit string on the terms page, set apart from running prose the way a value
   meant to be copied verbatim should be. */
.page-code {
	display: block;
	margin-block: 0.85rem;
	padding: 0.65rem 0.9rem;
	background-color: var(--panel);
	border: 1px solid var(--hairline);
	border-inline-start: 3px solid var(--accent);
	font-family: var(--font-mono);
	font-size: 0.92rem;
	color: var(--accent-text);
	overflow-wrap: anywhere;
}

/* The terms page's good/bad attribution examples. Colour is never the only signal: the
   label word and a distinct icon (circle-check vs xmark) carry the meaning, and the
   accent tint on "sufficient" is a reinforcement, not the mechanism. */
.page-example {
	border-inline-start: 3px solid var(--hairline-bright);
	padding-inline-start: 1rem;
	margin-block: 1rem;
}

.page-example-label {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-block-end: 0.35rem;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted-2);

	.icon {
		width: 0.85rem;
		height: 0.85rem;
	}
}

.page-example-label.is-good {
	color: var(--accent-text);
}

.page-example-text {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--text);
}

/* A list in the prose is the story page's fact list with the accent square traded for a
   hairline dash, so a run of points reads quietly on a page of writing instead of
   pulling the eye the way a story's key facts are meant to. */
.page-list {
	display: grid;
	gap: 0.6rem;
	margin-block-start: 1.15rem;

	li {
		position: relative;
		padding-inline-start: 1.3rem;
		font-size: 0.98rem;
		line-height: 1.5;
		color: var(--text);
	}

	li::before {
		content: '';
		position: absolute;
		inset-block-start: 0.85em;
		inset-inline-start: 0;
		width: 0.65rem;
		height: 1px;
		background-color: var(--hairline-bright);
	}
}

/* ------------------------------------------------------- the sign-up form */
/*
	The newsletter form under the `page` prefix. The markup is the one partial every
	form on the site renders (src/_includes/newsletter-form.njk), so home.js drives this
	one exactly as it drives the band and the sign-off, and the validation rules live in
	one place.

	What changes is the ink. The band's form sits on the full-bleed orange plate and is
	drawn in that plate's dark ink; this one sits on carbon inside the reading column, so
	it takes the page's own palette and a panel to stand on.
*/

.page-form {
	margin-block: clamp(2rem, 4vw, 2.75rem);
	padding: clamp(1.25rem, 3vw, 1.85rem);
	background-color: var(--panel);
	border: 1px solid var(--hairline);
	border-inline-start: 3px solid var(--accent);
}

.page-label,
.page-legend {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin-block-end: 0.5rem;
}

.page-entry {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.page-input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--hairline-bright);
	background-color: var(--canvas);
	color: var(--text);
	font-size: 0.95rem;

	&::placeholder {
		color: var(--muted-2);
		opacity: 1;
	}

	/* Refused addresses get an edge as well as the wording in the status line, so the
	   field the reader has to fix is the one wearing the mark. */
	&:user-invalid {
		border-color: var(--accent);
	}
}

.page-submit {
	flex: 0 0 auto;
	padding: 0.8rem 1.35rem;
	border: 1px solid var(--accent);
	background-color: var(--accent);
	color: var(--accent-ink);
	font-size: 0.9rem;
	font-weight: 700;
	cursor: pointer;

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

.page-lanes {
	margin-block-start: 1.35rem;
	border: 0;
	padding: 0;
	margin-inline: 0;
}

/* --------------------------------------------------------- the page's lanes */

/* The chip's shape, its hidden checkbox and its tick all come from chrome.css, which
   every page loads. What belongs here is the ink for this one surface: a chip standing
   on the page's panel takes the accent on its edge and fills with it when picked. */
.lane-chip-page {
	&:hover {
		border-color: var(--accent);
		color: var(--text);
	}

	&:has(input:checked) {
		background-color: var(--accent);
		border-color: var(--accent);
		color: var(--accent-ink);
	}
}

/* ----------------------------------------------------------- the status line */

/* The status line's own ink; its show-and-hide comes from chrome.css. */
.page-status {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text);

	&[data-state] {
		margin-block-start: 1.15rem;
		padding: 0.65rem 0.85rem;
		background-color: var(--canvas);
		border-inline-start: 3px solid var(--accent);
	}

	/* A refusal takes the orange as ink as well as on its edge, so the two states differ
	   by colour, by mark and by wording rather than by any one of the three. */
	&[data-state='error'] {
		color: var(--accent-text);
	}
}

.page-fine {
	margin-block-start: 1.15rem;
	font-size: 0.76rem;
	color: var(--muted-2);
}

/* ------------------------------------------------------------ 404 page */

.not-found {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.85rem;
	padding-block: clamp(3.5rem, 10vw, 6rem);
}

.not-found-code {
	font-family: var(--font-display);
	font-size: clamp(3.5rem, 12vw, 6rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--hairline-bright);
}

.not-found-heading {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2rem);
	font-weight: 400;
	color: var(--text);
}

.not-found-body {
	max-width: 34ch;
	color: var(--muted);
	line-height: 1.55;
}

.not-found-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-block-start: 0.5rem;
}

.not-found-home,
.not-found-about {
	padding: 0.7rem 1.35rem;
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
}

.not-found-home {
	background-color: var(--accent);
	color: var(--accent-ink);

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

.not-found-about {
	background-color: transparent;
	color: var(--text);
	border: 1px solid var(--hairline-bright);

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