/* ChugCheck Pages 1.0.0
 *
 * Colours from the dark plugin, which this page has just asked to be switched
 * on. The fallbacks carry the page if it is ever off: light ink on a white
 * theme does not look wrong, it disappears.
 */

.ccp {
	--ccp-ink: var(--cc-ink, #F2EDE4);
	--ccp-dim: var(--cc-dim, #9A9183);
	--ccp-accent: var(--cc-accent, #C9A96A);
	--ccp-line: rgba(233, 231, 227, .13);

	/* The measure is the whole job.
	 *
	 * Turning the palette on and stopping there gives light text on a dark
	 * ground at the theme's width -- a hundred and twenty characters to the
	 * line, which nobody can read and nobody can name. Prose wants about
	 * sixty-five, and that number is the reason this file exists as much as
	 * the colours are. */
	max-width: 44rem;
	margin: 0 auto;
	padding: 56px 22px 90px;
	color: var(--ccp-ink);
	font-size: 17px;
	line-height: 1.7;
}

.ccp *, .ccp *::before, .ccp *::after { box-sizing: border-box; }

.ccp__head { margin: 0 0 32px; }

.ccp__title {
	margin: 0;
	font-size: clamp(32px, 5.2vw, 50px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.04;
	color: var(--ccp-ink);
}

/* The element as well as the class, all the way down this file. A theme rule
   as ordinary as `.entry-content h2 { color: … }` is one class and one
   element, which beats one class of ours -- and the way that loses on a
   written page is ink the theme chose for white paper. */
.ccp .ccp__body p {
	margin: 0 0 1.15em;
	color: color-mix(in srgb, var(--ccp-ink) 88%, transparent);
}
.ccp .ccp__body p:last-child { margin-bottom: 0; }

/* The first paragraph carries the page, so it is given a little more room to
   do it in. */
.ccp .ccp__body > p:first-child {
	font-size: 19px;
	line-height: 1.62;
	color: var(--ccp-ink);
}

.ccp .ccp__body h2 {
	margin: 2.1em 0 .7em;
	padding: 0 0 .45em;
	border-bottom: 1px solid var(--ccp-line);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -.012em;
	line-height: 1.25;
	color: var(--ccp-ink);
}

.ccp .ccp__body h3 {
	margin: 1.8em 0 .5em;
	font-size: 17.5px;
	font-weight: 700;
	color: var(--ccp-ink);
}

.ccp .ccp__body a {
	color: var(--ccp-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.ccp .ccp__body a:hover { text-decoration-thickness: 2px; }

.ccp .ccp__body strong { color: var(--ccp-ink); font-weight: 700; }

.ccp .ccp__body ul,
.ccp .ccp__body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.ccp .ccp__body li {
	margin: 0 0 .4em;
	color: color-mix(in srgb, var(--ccp-ink) 88%, transparent);
}

.ccp .ccp__body blockquote {
	margin: 1.5em 0;
	padding: 2px 0 2px 20px;
	border-left: 2px solid var(--ccp-accent);
	color: var(--ccp-dim);
}

.ccp .ccp__body hr {
	margin: 2.4em 0;
	border: 0;
	border-top: 1px solid var(--ccp-line);
}

.ccp .ccp__body img { max-width: 100%; height: auto; border-radius: 12px; }

.ccp .ccp__body code {
	padding: 2px 6px;
	border-radius: 5px;
	background: color-mix(in srgb, var(--ccp-ink) 9%, transparent);
	font-size: .9em;
}

/* The theme's own page header, if it has drawn one above ours. The template
   prints the title itself precisely so this can go: the theme's version comes
   with a byline and a date, which on this site meant an email address on a
   public page. */
body.chugcheck-page .entry-header,
body.chugcheck-page .page-header,
body.chugcheck-page .ast-single-post-order { display: none; }

@media (max-width: 700px) {
	.ccp { padding: 36px 20px 64px; font-size: 16.5px; }
	.ccp__head { margin-bottom: 24px; }
	.ccp .ccp__body > p:first-child { font-size: 18px; }
	.ccp .ccp__body h2 { font-size: 20px; margin-top: 1.9em; }
}