/*
 * The About page. See lib/about.php and page-about.php.
 *
 * One column, no photograph: title, prose, form. Short on purpose - the
 * galleries are where the photography is, and this is the one page that is only
 * words, so its job is to be read quickly and then written to.
 *
 * Colour, type and spacing come from css/tokens.css, declared as a dependency of
 * this stylesheet in lib/about.php. Nothing here should reintroduce a literal
 * colour: an undefined custom property drops its whole declaration, so a token
 * that has gone missing must fail visibly rather than fall back to a hardcoded
 * value that then drifts from the rest of the site. The two exceptions are the
 * hairline field borders, which are an alpha on white rather than a colour of
 * their own.
 *
 * TWO PLACES HERE FIGHT SOMETHING ELSE AND HAVE TO WIN ON SPECIFICITY:
 *
 *   1. The form fields. Input background, text and focus colour are Kirki
 *      customizer settings - tg_input_bg_color is #c1c1c1, which is the grey the
 *      old page showed - and Kirki emits them inline, after every stylesheet, so
 *      order cannot beat them. Its selectors are bare (`input[type=text]`), so
 *      every rule below names .otr-about__form as well and wins on specificity
 *      instead. THIS IS SCOPED ON PURPOSE: it restyles this page's form, not the
 *      site's inputs. The comment form and the search field are still grey, and
 *      the fix for those is the three customizer values in production, not more
 *      CSS here. See docs/design-system.md.
 *   2. The captcha. screen.css:9772 dresses #captcha-wrap as a 2014 reCAPTCHA -
 *      a #870500 red box, a #ffdc73 yellow field, and images/logos.jpg as a fake
 *      "stop spam, read books" logo. Those are id selectors, so the rules below
 *      are prefixed with .otr-about to outrank them - and one of them needs
 *      !important, which is noted where it happens.
 */

.otr-about {
	box-sizing: border-box;
	width: 100%;
	max-width: 1180px;
	/* The theme floats its content wrappers; this page does not need to, and a
	   float cannot be centred with `margin: auto`. */
	float: none;
	margin: 0 auto;
	padding: 56px 34px 72px;

	/* One height for every field and for the captcha's refresh button, so the two
	   cannot drift apart: 13px of padding top and bottom, a 24px line box, and two
	   1px borders. Declared here rather than in tokens.css because it is this
	   component's metric, not a value the rest of the site shares. */
	--otr-about-field-h: 52px;
}

/* The words on the left, the form on the right, so the page is one screen and the
   thing a visitor came to do is never below the fold. */
.otr-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

/* ------------------------------------------------------------------ headings */

/* ONE CLASS FOR BOTH COLUMN HEADINGS. They are peers, sitting on the same line at
   the top of their columns, so the page title having its own larger style made
   them read as two unrelated things rather than as two halves of one page. Label
   scale rather than title scale, because the prose is what carries this page and
   the site's own navigation already announces where you are. */
.otr-about__heading {
	margin: 0 0 28px;
	font-size: var(--otr-size-label);
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-wide);
	text-transform: uppercase;
	color: var(--otr-text-muted);
}

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

/* The grid column supplies the measure here, so the cap the prose carried when
   this page was a single centred column would only fight it and leave a ragged
   gutter. */
.otr-about__prose {
	max-width: none;
}

.otr-about__prose p {
	margin: 0 0 1.4em;
	font-size: var(--otr-size-body);
	/* Looser than the theme's default. The measure can carry it, and these three
	   paragraphs are the only thing on the site anyone reads at length. */
	line-height: 1.75;
	color: var(--otr-text);
}

.otr-about__prose p:last-child {
	margin-bottom: 0;
}

.otr-about__prose a {
	color: var(--otr-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.otr-about__prose a:hover {
	color: var(--otr-accent-hover);
}

/* ---------------------------------------------------------------------- form */

/* No rule and no top margin: the halves are side by side, so a horizontal divider
   would separate the wrong pair of things. The gutter is the separation. It comes
   back on a phone, where the two halves stack - see the bottom of this file. */
.otr-about__contact {
	margin-top: 0;
}

/* The theme floats .contact_form_wrapper and its children. Undo that here rather
   than leaving a cleared float to reason about. */
.otr-about__form,
.otr-about__form p {
	float: none;
	width: auto;
}

.otr-about__row {
	display: flex;
	gap: 18px;
}

.otr-about__row .otr-about__field {
	flex: 1 1 0;
	min-width: 0;
}

.otr-about__field {
	display: block;
	margin: 0 0 18px;
}

/* Visible labels, not placeholder-only. The old form had its labels collapsed to
   0x0 with the field names living in placeholders, which vanish the moment
   someone starts typing and are never announced as a field's name. */
.otr-about__form label {
	display: block;
	width: auto;
	height: auto;
	margin-bottom: 7px;
	font-size: var(--otr-size-label);
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-caps);
	text-transform: uppercase;
	color: var(--otr-text-muted);
}

.otr-about__form input[type=text],
.otr-about__form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: 13px 15px;
	/* Set rather than derived, so the refresh button below can match it. */
	height: var(--otr-about-field-h);
	background: var(--otr-surface-raised);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	color: var(--otr-text);
	font-family: var(--otr-font);
	font-size: var(--otr-size-body);
	line-height: 1.5;
	box-shadow: none;
	transition: border-color var(--otr-transition), box-shadow var(--otr-transition);
}

/* The only field that is not one line, so it opts out of the shared height. */
.otr-about__form textarea {
	display: block;
	height: auto;
	resize: vertical;
	min-height: 150px;
}

.otr-about__form input[type=text]:focus,
.otr-about__form textarea:focus {
	outline: none;
	background: var(--otr-surface-raised);
	border-color: var(--otr-accent);
	box-shadow: 0 0 0 1px var(--otr-accent);
	color: var(--otr-text);
}

/* --------------------------------------------------------- captcha + consent */

.otr-about__check {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 20px 26px;
	margin-top: 24px;
}

/* Undoing screen.css:9772. Every declaration here has a counterpart there; the
   red box, the yellow field and the fake logo all go. */
.otr-about #captcha-wrap {
	float: none;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
}

.otr-about #captcha-wrap .captcha-box {
	background: none;
	border: 0;
	border-radius: 2px;
	overflow: hidden;
	line-height: 0;
}

/* script-get-captcha.php draws the words as black on white with GD and cannot be
   reached from CSS, so the image is inverted rather than left punching a white
   rectangle through a dark page. */
.otr-about #captcha-wrap #captcha {
	display: block;
	filter: invert(1);
	opacity: 0.85;
}

.otr-about #captcha-wrap .text-box {
	float: none;
	/* 200px, not the vendor's 140: the label wraps to two lines below that and
	   drags the whole row out of alignment. */
	width: 200px;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	text-align: left;
}

.otr-about #captcha-wrap .text-box label {
	width: auto;
	padding: 0;
	margin-bottom: 7px;
	white-space: nowrap;
	font-family: var(--otr-font);
	font-size: var(--otr-size-label);
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-caps);
	text-transform: uppercase;
	color: var(--otr-text-muted);
}

/* THE ONE !important ON THE PAGE. Both screen.css:9806 and Kirki name
   `#captcha-wrap .text-box input`, and Kirki's copy is inline, so specificity
   alone cannot win here - the field stays white without this. */
.otr-about #captcha-wrap .text-box input {
	box-sizing: border-box;
	width: 100%;
	height: var(--otr-about-field-h);
	margin: 0;
	padding: 13px 15px;
	-webkit-appearance: none;
	appearance: none;
	background: var(--otr-surface-raised) !important;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
	color: var(--otr-text) !important;
	font-family: var(--otr-font);
	font-size: var(--otr-size-body);
}

.otr-about #captcha-wrap .text-box input:focus {
	outline: none;
	border-color: var(--otr-accent);
	box-shadow: 0 0 0 1px var(--otr-accent);
}

/* The fake reCAPTCHA logo was a background image on this box, and the refresh
   control inside it is images/refresh.jpg - a JPEG on white, so inverting it
   leaves a pale block. The image is made transparent and the affordance drawn
   here instead; the img itself stays in place and keeps its click handler. */
.otr-about #captcha-wrap .captcha-action {
	position: relative;
	/* Or the 1px border is added outside the 52px and the button comes out 54. */
	box-sizing: border-box;
	float: none;
	/* Square, on the same height as the field beside it: at 34px it read as a
	   stray icon rather than the field's own control. */
	width: var(--otr-about-field-h);
	height: var(--otr-about-field-h);
	margin: 0;
	background: var(--otr-surface-raised);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 2px;
}

.otr-about #captcha-wrap #captcha-refresh {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	opacity: 0;
	filter: none;
	cursor: pointer;
}

/* FontAwesome's own refresh glyph, not U+21BB. The Unicode arrow is not in
   Montserrat, so declaring the page's family on it changed nothing - the browser
   silently substituted a fallback face for that one character, which is why the
   button did not match the rest of the page. FontAwesome 4.7 is enqueued site-wide
   and is already the theme's icon language (fa-share-alt, fa-download,
   fa-circle-o-notch), so this is the family that actually has the glyph. */
.otr-about #captcha-wrap .captcha-action::after {
	content: "\f021";
	font-family: FontAwesome;
	font-weight: normal;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--otr-text-muted);
	pointer-events: none;
}

.otr-about #captcha-wrap .captcha-action:hover::after {
	color: var(--otr-accent);
}

/* No max-width: a 34ch cap broke "You may keep my details to reply to this
   message." across two lines, which reads as two separate statements. It is one
   sentence and one decision, so it gets one line; it is allowed to wrap again on
   a phone, where nothing else would fit. */
.otr-about__consent {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.otr-about__form .gdpr_label {
	white-space: nowrap;
}

.otr-about__consent input[type=checkbox] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	accent-color: var(--otr-accent);
}

/* Sentence case at body-adjacent size: this one is a sentence someone reads and
   agrees to, not a field name, so it does not take the caps treatment. */
.otr-about__form .gdpr_label {
	margin: 0;
	font-size: var(--otr-size-small);
	font-weight: var(--otr-weight-normal);
	letter-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	color: var(--otr-text-muted);
}

/* -------------------------------------------------------------------- submit */

.otr-about__submit {
	margin-top: 28px;
}

.otr-about__form input[type=submit] {
	-webkit-appearance: none;
	appearance: none;
	/* The theme floats the submit right and gives it a right margin, which in a
	   single column puts it under the middle of the message field instead of on
	   the column's left edge with everything else. */
	float: none;
	width: auto;
	margin: 0;
	padding: 15px 34px;
	background: none;
	border: 1px solid var(--otr-text);
	border-radius: 2px;
	color: var(--otr-text);
	font-family: var(--otr-font);
	font-size: var(--otr-size-label);
	font-weight: var(--otr-weight-bold);
	letter-spacing: var(--otr-tracking-caps);
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--otr-transition), color var(--otr-transition), border-color var(--otr-transition);
}

.otr-about__form input[type=submit]:hover,
.otr-about__form input[type=submit]:focus-visible {
	outline: none;
	background: var(--otr-accent);
	border-color: var(--otr-accent);
	color: var(--otr-surface);
}

/* ------------------------------------------------------------------ response */

/* contact.js appends validation errors here as <li>, and the mailer's reply
   replaces the whole block with a <p>. Both need to read as the page's voice. */
.otr-about__response ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.otr-about__response li.error {
	margin-bottom: 8px;
	font-size: var(--otr-size-small);
	color: var(--otr-like);
}

.otr-about__response p {
	margin: 0 0 22px;
	font-size: var(--otr-size-body);
	color: var(--otr-accent);
}

/* ------------------------------------------------------------------- phone */

@media (max-width: 900px) {
	.otr-about {
		padding: 40px 18px 64px;
	}

	/* Stacked, so the rule earns its place back as the line between reading and
	   writing. */
	.otr-about__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.otr-about__contact {
		margin-top: 44px;
		padding-top: 40px;
		border-top: 1px solid rgba(255, 255, 255, 0.11);
	}

	/* Two fields inside 18px gutters leave about 150px each, which is not enough
	   for an email address to be checked by eye. */
	.otr-about__row {
		display: block;
	}

	/* One line does not fit in a phone's width, and a horizontally scrolling
	   consent notice is worse than a wrapped one. */
	.otr-about__form .gdpr_label {
		white-space: normal;
	}

	.otr-about__consent {
		align-items: flex-start;
	}

	.otr-about__check {
		width: 100%;
	}

	.otr-about__form input[type=submit] {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.otr-about__form input[type=text],
	.otr-about__form textarea,
	.otr-about__form input[type=submit] {
		transition: none;
	}
}