/*
 * IAG Executives.
 *
 * Restraint is the design. No icons (one exception: the password eye on the
 * gate), no cards, no shadows, no gradients, no images, no animation beyond
 * a fade.
 *
 * Gold is a background colour, not a text colour. Against white it measures
 * roughly 1.9:1 and is unreadable at body size. Gold-filled buttons take
 * ink-coloured text.
 */

/* -------------------------------------------------------------------------
 * Fonts. Self-hosted. Bitter stands in for Chaparral Pro, Barlow for DIN.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: 'Bitter';
	src: url( 'fonts/bitter-400.woff2' ) format( 'woff2' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Bitter';
	src: url( 'fonts/bitter-600.woff2' ) format( 'woff2' );
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url( 'fonts/barlow-400.woff2' ) format( 'woff2' );
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Barlow';
	src: url( 'fonts/barlow-700.woff2' ) format( 'woff2' );
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* -------------------------------------------------------------------------
 * Tokens
 * ---------------------------------------------------------------------- */

:root {
	--iagx-gold: #d5b973;
	--iagx-ink: #111111;
	--iagx-paper: #ffffff;
	--iagx-muted: #666666;

	--iagx-font-head: 'Bitter', Georgia, 'Times New Roman', serif;
	--iagx-font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif;

	/*
	 * The gate is wide enough to set each line of the standfirst without
	 * wrapping; the form inside it stays on the narrow measure.
	 */
	--iagx-measure: 34rem;
	--iagx-measure-form: 22rem;
	--iagx-measure-wide: 34rem;

	/* The single vertical rhythm the gate is set on. */
	--iagx-gap: 2rem;
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

/* Column layout so the footer sits at the bottom on short pages. */
body.iagx-gate,
body.iagx-members {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var( --iagx-paper );
	color: var( --iagx-ink );
	font-family: var( --iagx-font-body );
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.iagx-shell {
	flex: 1;
	width: 100%;
	max-width: var( --iagx-measure );
	margin: 0 auto;
	padding: 5rem 1.5rem 3rem;
	box-sizing: border-box;
}

.iagx-shell--wide {
	max-width: var( --iagx-measure-wide );
	padding-top: 2.5rem;
}

/* Footer: full-bleed gold band, ink text. */
.iagx-footer {
	padding: 1.25rem 1.5rem;
	background: var( --iagx-gold );
	color: var( --iagx-ink );
	font-size: 0.8125rem;
	text-align: center;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}

.iagx-muted {
	color: var( --iagx-muted );
	font-size: 0.875rem;
}

/* -------------------------------------------------------------------------
 * Logo
 * ---------------------------------------------------------------------- */

/* The gate sets on one even rhythm throughout: every gap is --iagx-gap. */
.iagx-logo {
	margin-bottom: var( --iagx-gap );
	color: var( --iagx-ink );
	text-align: center;
}

/* Matches the 200px lockup on the wp-login.php screens. */
.iagx-logo svg {
	width: 200px;
	max-width: 100%;
	height: auto;
}

.iagx-logo--small {
	margin-bottom: 0;
	text-align: left;
}

.iagx-logo--small svg {
	width: 120px;
}

/* Placeholder until the source SVG is uploaded. */
.iagx-wordmark {
	font-family: var( --iagx-font-head );
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

/* -------------------------------------------------------------------------
 * Gate
 * ---------------------------------------------------------------------- */

.iagx-gate .iagx-shell {
	text-align: center;
}

/*
 * The gate sets on one rhythm: the gap below the title and the gap between
 * the two standfirst lines are the same measure. Change --iagx-gap and the
 * whole stack stays even.
 */
.iagx-title {
	margin: 0 0 var( --iagx-gap );
	font-family: var( --iagx-font-head );
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.iagx-standfirst {
	margin: 0 0 var( --iagx-gap );
	color: var( --iagx-muted );
	font-size: 0.9375rem;
	line-height: 1.7;
}

/*
 * Two consecutive lines of one paragraph — no space between them, just the
 * line height. The spans do the job of a <br> while also allowing each
 * sentence to be held on a single line; a bare <br> gives no element to hang
 * white-space on. Below the breakpoint there is not room to set them unbroken,
 * so they are allowed to wrap rather than overflow the viewport.
 */
.iagx-standfirst span {
	display: block;
	white-space: nowrap;
}

@media ( max-width: 34rem ) {
	.iagx-standfirst span {
		white-space: normal;
	}
}

.iagx-form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: var( --iagx-measure-form );
	margin: 0 auto;
	text-align: left;
}

.iagx-form input[type="email"],
.iagx-form input[type="password"],
.iagx-form input[type="text"] {
	width: 100%;
	padding: 0.75rem 0.875rem;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	background: var( --iagx-paper );
	color: var( --iagx-ink );
	font-family: var( --iagx-font-body );
	font-size: 1rem;
	box-sizing: border-box;
}

.iagx-form input::placeholder {
	color: var( --iagx-muted );
}

.iagx-form input:focus {
	border-color: var( --iagx-gold );
	outline: 2px solid var( --iagx-gold );
	outline-offset: -2px;
}

/*
 * Show/hide password. The one icon on the site: a quiet stroke eye inside
 * the field, muted at rest, ink on hover. The slash appears while the
 * password is visible. The button must restate background and border in
 * every state — GeneratePress paints bare `button` elements grey.
 */
.iagx-password {
	position: relative;
}

.iagx-form .iagx-password input[type="password"],
.iagx-form .iagx-password input[type="text"] {
	padding-right: 2.75rem;
}

.iagx-password__toggle,
.iagx-password__toggle:hover,
.iagx-password__toggle:focus,
.iagx-password__toggle:active {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 0.75rem;
	border: 0;
	background: transparent;
	color: var( --iagx-muted );
	cursor: pointer;
}

.iagx-password__toggle:hover {
	color: var( --iagx-ink );
}

.iagx-password__toggle:focus-visible {
	outline: 2px solid var( --iagx-gold );
	outline-offset: -2px;
}

.iagx-password__toggle svg {
	display: block;
}

.iagx-password__slash {
	display: none;
}

.iagx-password__toggle.is-visible .iagx-password__slash {
	display: block;
}

.iagx-button {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.8125rem 1rem;
	border: 1px solid var( --iagx-gold );
	border-radius: 0;
	background: var( --iagx-gold );
	color: var( --iagx-ink );
	font-family: var( --iagx-font-body );
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: filter 160ms ease;
}

/*
 * The fill is pinned across every state.
 *
 * GeneratePress styles the bare element — `button, input[type="submit"] {
 * background-color: #55555e }` — and a type selector plus a pseudo-class
 * (button:hover, specificity 0-1-1) outranks a lone class (.iagx-button,
 * 0-1-0). Declare background only on the base rule and the button turns grey
 * the moment it is hovered, focused or pressed. Restating it here settles it.
 */
.iagx-button:hover,
.iagx-button:focus,
.iagx-button:focus-visible,
.iagx-button:active {
	border-color: var( --iagx-gold );
	background-color: var( --iagx-gold );
	color: var( --iagx-ink );
	outline: none;
}

/* Hover deepens the gold rather than changing it: same hue, more saturation. */
.iagx-button:hover,
.iagx-button:focus-visible {
	filter: saturate( 1.15 );
}

.iagx-error {
	margin: 0 0 0.5rem;
	color: var( --iagx-ink );
	font-size: 0.875rem;
}

/* Confirmation after a reset request. Quiet, gold rule, no icon. */
.iagx-notice {
	margin: 0 0 0.5rem;
	padding: 0.75rem 0.875rem;
	border-left: 2px solid var( --iagx-gold );
	background: #faf6ec;
	color: var( --iagx-ink );
	font-size: 0.875rem;
	text-align: left;
}

.iagx-reset {
	margin: 1.5rem 0 0;
	text-align: center;
}

.iagx-reset a {
	color: var( --iagx-muted );
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.iagx-reset a:hover {
	color: var( --iagx-ink );
}

/* -------------------------------------------------------------------------
 * Members
 * ---------------------------------------------------------------------- */

/* Log out sits on its own line above the masthead, hard right. */
.iagx-utility {
	margin-bottom: 1.5rem;
	text-align: right;
}

/* Masthead: mark on the left, name on the right, on one line. */
.iagx-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 3rem;
}

.iagx-head__title {
	font-family: var( --iagx-font-head );
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.iagx-head__logout {
	color: var( --iagx-muted );
	font-size: 0.75rem;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.iagx-head__logout:hover {
	color: var( --iagx-ink );
}

/* Half again the body size, in the heading face. */
.iagx-greeting {
	margin: 0 0 3rem;
	font-family: var( --iagx-font-head );
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-align: center;
}

.iagx-note {
	margin-bottom: 3rem;
	font-size: 1rem;
	line-height: 1.7;
}

.iagx-note p:first-child {
	margin-top: 0;
}

.iagx-members h2 {
	margin: 0 0 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var( --iagx-gold );
	font-family: var( --iagx-font-head );
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.iagx-documents {
	margin-bottom: 3rem;
}

/* Two across on desktop, one on a phone. */
.iagx-documents__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1.25rem;
}

@media ( max-width: 34rem ) {
	.iagx-documents__grid {
		grid-template-columns: 1fr;
	}
}

.iagx-document {
	display: block;
	text-decoration: none;
	color: var( --iagx-ink );
}

/* First page of the PDF. A4 is 1:1.414, so the box holds that ratio. */
.iagx-document__thumb {
	display: block;
	aspect-ratio: 1 / 1.414;
	overflow: hidden;
	border: 1px solid #e3e3e3;
	background: var( --iagx-paper );
}

.iagx-document__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.iagx-document__title {
	display: block;
	padding: 0.75rem 0.875rem;
	background: var( --iagx-gold );
	color: var( --iagx-ink );
	font-family: var( --iagx-font-body );
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-align: center;
	text-transform: uppercase;
	transition: filter 160ms ease;
}

.iagx-document:hover .iagx-document__title,
.iagx-document:focus-visible .iagx-document__title {
	filter: saturate( 1.15 );
}

.iagx-document:focus-visible {
	outline: 2px solid var( --iagx-gold );
	outline-offset: 2px;
}

.iagx-details dl {
	margin: 0;
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.375rem 1rem;
	font-size: 0.9375rem;
}

.iagx-details dt {
	color: var( --iagx-muted );
}

.iagx-details dd {
	margin: 0;
}

.iagx-details .iagx-muted {
	margin-top: 1.5rem;
}

@media ( max-width: 30rem ) {
	.iagx-shell {
		padding-top: 3rem;
	}

	.iagx-details dl {
		grid-template-columns: 1fr;
		gap: 0 0;
	}

	.iagx-details dd {
		margin-bottom: 0.75rem;
	}
}