/*
 * Roots 'n' Fruits — /about page styles.
 *
 * Enqueued only on the rnf_about route (see functions.php). Full-bleed Scotland
 * photo with a strong, even dark scrim and light body copy, on the shared design
 * tokens (assets/css/tokens.css). Header/footer/shell come from offer.css, which
 * loads site-wide. The scrim is a ::before layer over the photo and under the
 * text — the photo file is untouched. The filename case 'Scottland.JPG' is
 * intentional and exact: the live host is case-sensitive.
 */

.rnf-aboutpage {
	position: relative;
	isolation: isolate; /* own stacking context so the scrim sits under the text */
	background-image: url('../images/Scottland.JPG');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--paper); /* light base */
	padding-block: clamp(80px, 12vw, 140px); /* generous top/bottom */
	padding-inline: 24px; /* comfortable side margins, esp. on mobile */
}

/* Strong, even scrim so white text stays readable across the ENTIRE section,
   including over the bright sky — this is long body copy, so contrast first. */
.rnf-aboutpage::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.58), rgba(0, 0, 0, 0.64));
	pointer-events: none;
}

.rnf-aboutpage__inner {
	position: relative;
	z-index: 1; /* text above the scrim */
	max-width: 680px; /* readable measure (~640–720px), centered column */
	margin-inline: auto;
}

/* "About Us" header — light serif, matching the site's hero-title treatment so
   it reads clearly on the darkened photo. Left-aligned in the column. */
.rnf-aboutpage__title {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--paper2);
	font-size: clamp(32px, 5vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 24px; /* even gap before the first paragraph */
}

.rnf-aboutpage__p {
	color: var(--paper2); /* light body text, strong contrast on the scrim */
	font-size: 17px;
	line-height: 1.75; /* generous paragraph spacing */
	margin: 0 0 22px;
}

.rnf-aboutpage__p:last-child {
	margin-bottom: 0;
}