/* ==========================================================================
   Hand-written rules with no other home.

   The compiled bundle (assets/css/paaaaws.css) is generated from a Tailwind
   source that is not in this repository, so anything that has to be written by
   hand goes here. It loads after the bundle, which is what lets a rule of
   equal specificity win.

   Two things live here: the reading measure for the blog, and the header bar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The header bar.

   Astra paints .main-header-bar white. The header element itself already
   carries the surface colour, so the white reads as a vertical seam against
   the cream on either side of the bar. Transparent lets the header colour
   through and the masthead becomes one flat tone.
   -------------------------------------------------------------------------- */

.site-header .main-header-bar {
	background-color: transparent;
}

/* --------------------------------------------------------------------------
   Blog: index and article typography.

   The five articles are entered as HTML built from a markdown source: h2, p, a,
   strong and ul. There is no prose plugin in this theme and the compiled
   Tailwind bundle has no typography layer, so the reading measure is styled
   here instead of by utility classes on every element.

   Everything is scoped to .pw-prose. The colour values are the same tokens the
   templates use in their classes; they are repeated as literals because the
   compiled stylesheet exposes them as utilities, not as custom properties.
   ========================================================================== */

.pw-prose {
	color: #49483f;
	font-size: 1.0625rem;
	line-height: 1.75;
	max-width: 68ch;
}

/* Paragraphs are spaced by margin rather than by a wrapper, so a heading that
   follows one keeps the gap and the text never depends on a single file
   being opened correctly. */
.pw-prose > p {
	margin: 0 0 1.5rem;
}

.pw-prose > p:last-child {
	margin-bottom: 0;
}

.pw-prose h2 {
	color: #292823;
	font-size: 1.5rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 3rem 0 1rem;
	font-weight: 500;
}

.pw-prose h2:first-child {
	margin-top: 0;
}

.pw-prose h3 {
	color: #292823;
	font-size: 1.1875rem;
	line-height: 1.4;
	margin: 2.25rem 0 0.75rem;
	font-weight: 500;
}

.pw-prose strong {
	color: #292823;
	font-weight: 600;
}

.pw-prose a {
	color: #7a6a4f;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.pw-prose a:hover {
	color: #292823;
}

/* A link inside a heading should not be underlined: the heading already reads
   as the target of attention and the underline crowds the line. */
.pw-prose h2 a,
.pw-prose h3 a {
	text-decoration: none;
}

.pw-prose ul {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.pw-prose li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.75rem;
}

.pw-prose li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 0.5rem;
	height: 1px;
	background: #b6a98c;
}

.pw-prose li > p {
	margin: 0;
}

/* The second photograph sits inside the measure, so it does not break out of
   it: a full-bleed image between two 68ch columns is what makes an article look
   assembled rather than written. */
.pw-prose figure {
	margin: 2.5rem 0;
}

.pw-prose figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.75rem;
}

.pw-prose figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	color: #6f6e63;
}