/**
 * The one public page.
 *
 * Values read off Main.dc.html and MainMobile.dc.html rather than chosen.
 * Loaded only on this page: a visitor who never signs in gets the base
 * stylesheet and this, and nothing else.
 */

.pf-public {
	/* The field and body greys are particular to this page, so they are
	   declared here rather than added to the site palette. */
	--pub-field: #0E2A1D;
	--pub-field-edge: #2E4738;
	--pub-card-edge: #27402F;
	--pub-label: #B8C4BB;
	--pub-lead: #D3DBD4;
	--pub-sub: #9FAEA3;
	--pub-fine: #8B9A90;

	display: grid;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--forest-deep, #0B1D15);
	color: var(--paper, #F7F3EA);
}

.pf-public__shot {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pf-public__scrim {
	grid-area: 1 / 1;
	background: rgba(0, 0, 0, 0.34);
}

/* With no photograph the scrim over a flat background would only mute the
   brand green, so it is dropped rather than left doing nothing. */
.pf-public--noshot .pf-public__scrim { background: none; }

.pf-public__inner {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	padding: 56px 64px;
}

/* Sign in ---------------------------------------------------------------- */

.pf-public__top { display: flex; justify-content: flex-end; }

.pf-public__signin {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	border: 1px solid rgba(201, 164, 92, 0.55);
	border-radius: 3px;
	color: var(--gold, #C9A45C);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-decoration: none;
}
.pf-public__signin:hover { border-color: var(--gold, #C9A45C); }

/* The two columns -------------------------------------------------------- */

.pf-public__body {
	display: flex;
	flex-wrap: wrap;
	gap: 72px;
	align-items: center;
	flex-grow: 1;
}

/* 999 against 1: the words take every spare pixel until the card is at its
   own 400px, which is what keeps the headline from going narrow first. */
.pf-public__say {
	flex: 999 1 520px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
}

.pf-public__logo {
	display: block;
	height: 150px;
	width: auto;
	flex: none;
	margin-bottom: 4px;
}

.pf-public__eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--gold, #C9A45C);
}

.pf-public__h1 {
	margin: 0;
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-weight: 300;
	font-size: 72px;
	line-height: 1.04;
	letter-spacing: -0.01em;
}

.pf-public__lead {
	margin: 0;
	max-width: 30em;
	font-size: 19px;
	line-height: 1.6;
	color: var(--pub-lead);
}

.pf-public__sub {
	margin: 0;
	max-width: 34em;
	font-size: 15px;
	line-height: 1.7;
	color: var(--pub-sub);
}

.pf-public__show {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 8px;
}

.pf-public__rule {
	width: 28px;
	height: 1px;
	background: var(--gold, #C9A45C);
	flex: none;
}

.pf-public__showtext {
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--gold, #C9A45C);
}

/* The card --------------------------------------------------------------- */

.pf-public__card {
	flex: 1 1 400px;
	min-width: 0;
	background: rgba(11, 29, 21, 0.92);
	border: 1px solid var(--pub-card-edge);
	border-radius: 4px;
	padding: 36px;
}

.pf-public__form { display: flex; flex-direction: column; gap: 20px; }
.pf-public__head { display: flex; flex-direction: column; gap: 8px; }

.pf-public__h2 {
	margin: 0;
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-weight: 400;
	font-size: 32px;
}

.pf-public__note {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--pub-sub);
}
.pf-public__note--narrow { display: none; }

.pf-public__alert {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid rgba(201, 164, 92, 0.5);
	border-left-width: 3px;
	border-radius: 3px;
	background: rgba(201, 164, 92, 0.08);
	font-size: 13px;
	line-height: 1.5;
	color: var(--paper, #F7F3EA);
}

.pf-public__fields { display: flex; flex-direction: column; gap: 14px; }

.pf-field {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pf-field label {
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pub-label);
}

.pf-field input,
.pf-field textarea {
	background: var(--pub-field);
	border: 1px solid var(--pub-field-edge);
	border-radius: 3px;
	color: var(--paper, #F7F3EA);
	font-family: inherit;
	font-size: 15px;
}

.pf-field input { height: 46px; padding: 0 14px; }
.pf-field textarea { padding: 12px 14px; resize: vertical; }

.pf-field input:focus,
.pf-field textarea:focus {
	outline: 2px solid var(--gold, #C9A45C);
	outline-offset: 1px;
	border-color: var(--gold, #C9A45C);
}

.pf-field input[aria-invalid="true"] { border-color: #C9754C; }

.pf-field__pair { display: flex; flex-wrap: wrap; gap: 14px; }
.pf-field__pair .pf-field { flex: 1 1 150px; min-width: 0; }

/* Hidden from sight, from assistive technology and from the tab order —
   but not with display:none, which some form-fillers skip. */
.pf-public__pot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pf-public__send {
	height: 52px;
	background: var(--gold, #C9A45C);
	border: none;
	border-radius: 3px;
	color: var(--forest-deep, #0B1D15);
	font-family: inherit;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.04em;
	cursor: pointer;
}
.pf-public__send:hover { background: #D8B672; }

.pf-public__fine {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: var(--pub-fine);
}

/* Received --------------------------------------------------------------- */

.pf-public__done {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px 0;
}

.pf-public__donetext {
	margin: 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--pub-label);
}

.pf-public__again {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 22px;
	background: none;
	border: 1px solid var(--gold, #C9A45C);
	border-radius: 3px;
	color: var(--gold, #C9A45C);
	font-size: 14px;
	text-decoration: none;
}

/* Foot ------------------------------------------------------------------- */

.pf-public__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	justify-content: space-between;
	align-items: center;
	padding-top: 20px;
	border-top: 1px solid rgba(247, 243, 234, 0.12);
}

.pf-public__entity { font-size: 12px; color: var(--pub-fine); }
.pf-public__mail { font-size: 12px; letter-spacing: 0.06em; }

/* ------------------------------------------------------------------------
 * Phone — MainMobile.dc.html. Not a reduction of the desktop values here:
 * this page is composed differently at 390px, so the numbers are stated.
 * --------------------------------------------------------------------- */

@media (max-width: 768px) {
	.pf-public { min-height: 0; }
	.pf-public__scrim { background: rgba(0, 0, 0, 0.44); }

	.pf-public__inner {
		justify-content: flex-start;
		gap: 28px;
		padding: 22px 22px 30px;
	}

	.pf-public__signin { padding: 0 18px; }

	.pf-public__body {
		flex-direction: column;
		align-items: stretch;
		gap: 28px;
	}

	.pf-public__say { gap: 20px; }

	.pf-public__logo { height: 116px; margin-bottom: 0; }
	.pf-public__eyebrow { font-size: 10px; }

	.pf-public__h1 { font-size: 44px; line-height: 1.06; }

	.pf-public__lead { font-size: 17px; max-width: none; }
	.pf-public__sub { font-size: 14px; max-width: none; }

	.pf-public__show { align-items: flex-start; gap: 10px; padding-top: 2px; }
	.pf-public__rule { width: 22px; margin-top: 9px; }
	.pf-public__showtext { line-height: 1.5; letter-spacing: 0; }

	.pf-public__card { padding: 24px; }
	.pf-public__form { gap: 18px; }
	.pf-public__h2 { font-size: 28px; }

	.pf-public__note--wide { display: none; }
	.pf-public__note--narrow { display: inline; }

	/* 48px rather than 46: a tap target, not a pointer target. */
	.pf-field input { height: 48px; }

	/* Email and telephone stack — side by side they are 150px each at this
	   width, which is not enough for either. */
	.pf-field__pair { flex-direction: column; gap: 14px; }

	.pf-public__done { gap: 16px; padding: 18px 0; }

	.pf-public__again {
		align-self: stretch;
		justify-content: center;
		height: 46px;
	}

	.pf-public__foot {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding-top: 16px;
	}

	/* The address leads on a phone, where it is the quickest way to ask. */
	.pf-public__mail { order: -1; font-size: 13px; letter-spacing: 0.04em; }
	.pf-public__entity { line-height: 1.6; }
}