@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap");

/*
	Cohesive polish layer for the Twenty template.
	Loaded after main.css so it overrides without modifying the vendor stylesheet.

	Palette rationale: the stock template mixed three unrelated hues (mauve-brown
	banner #645862, navy panel #070068, teal links #3fb1a3). Everything below is
	unified into one deep slate-teal family built around the existing teal accent.
	Contrast ratios are noted where they matter for WCAG AA (4.5:1 body text).
*/

:root {
	--ink: #16232e;          /* headings              15.98:1 on white */
	--body: #4b5a66;         /* body copy              7.11:1 on white */
	--muted: #6b7a86;        /* de-emphasised text     4.62:1 on white */
	--accent: #227d70;       /* links on light         4.96:1 on white */
	--accent-hover: #16544a;
	--accent-bright: #3fb1a3;/* links on deep          4.92:1 on --deep */
	--deep: #123642;         /* dark surfaces */
	--deep-2: #0d2731;
	--on-deep: #d4e2e6;      /* body copy on deep      9.69:1 */
	--page: #f3f6fa;
	--rule: rgba(22, 35, 46, 0.12);
	--rule-deep: rgba(255, 255, 255, 0.18);
}

/* ---------------------------------------------------------------- Typography */

body, input, select, textarea {
	color: var(--body);
	font-size: 12.5pt;
	letter-spacing: 0;
	line-height: 1.7;
}

/*
	The template justified every paragraph, which produced severe rivers in the
	narrow three-column rows. Ragged-right throughout.
*/
article#main p,
.profile-copy p,
p {
	text-align: left;
	hyphens: none;
}

/* Page intros stay centred under their centred heading */
article#main header.special p,
header.special p,
header.special.container p,
#banner .inner p,
#cta p {
	text-align: center;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ink);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
}

h2 { font-size: 1.45em; letter-spacing: 0.06em; }
h3 { font-size: 1.1em; }

/* Sub-headings inside body copy read as labels, not shouting */
.wrapper.style4 .content h4 {
	color: var(--ink);
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.12em;
	margin-bottom: 0.9em;
}

/*
	In multi-column rows a heading that wraps to two lines pushed its column's
	body copy out of step with its neighbours. Reserving two lines keeps the
	paragraph tops aligned across the row.
*/
.wrapper.style4 .content .row h4 { min-height: 2.6em; }

@media screen and (max-width: 736px) {
	.wrapper.style4 .content .row h4 { min-height: 0; }
}

strong, b { font-weight: 700; color: var(--ink); }

a {
	color: var(--accent);
	border-bottom-color: rgba(34, 125, 112, 0.4);
}

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

/* Keyboard focus was invisible in the stock template */
a:focus-visible,
.button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* -------------------------------------------------------------- Line length */

/*
	The stock container is 1400px, which at this type size ran well past a
	comfortable measure. Narrowing the document pages keeps the card and its
	prose in proportion instead of stranding a wide empty gutter.
*/
article#main > header.special.container,
.wrapper.style4.container {
	width: 980px;
	max-width: 100%;
}

/*
	Prose capped for readability; .row descendants are excluded so multi-column
	blocks keep filling their columns.
*/
.wrapper.style4 .content > section > p,
.wrapper.style4 .content > section > ul,
.wrapper.style4 .content > section > ol {
	max-width: 80ch;
}

/* --------------------------------------------------------------------- Lists */

article#main ul,
article#main ol {
	margin-bottom: 1.75em;
}

article#main .content li {
	margin-bottom: 0.7em;
	padding-left: 0.2em;
}

article#main .content li:last-child { margin-bottom: 0; }

/* Leading year/label in an entry gets weight without a colour shift */
article#main .content li > strong:first-child { color: var(--ink); }

/* ------------------------------------------------------------------ Sections */

.wrapper { margin-bottom: 3.5em; }

.wrapper.style4 { padding: 3.5em 4em; }

.wrapper.style4 .content > section {
	padding-top: 2.25em;
	margin-top: 2.25em;
	border-top: solid 1px var(--rule);
}

.wrapper.style4 .content > section:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

/* Page intro */
article#main > header.special.container h2 { letter-spacing: 0.06em; }

article#main > header.special.container p {
	color: var(--muted);
	max-width: 62ch;
}

/* ------------------------------------------------- Deep surfaces (recoloured) */

/* Was navy #070068, which clashed with both the banner and the teal accent */
.wrapper.style2 {
	background-color: var(--deep);
	color: var(--on-deep);
}

.wrapper.style2 h1,
.wrapper.style2 h2,
.wrapper.style2 h3,
.wrapper.style2 h4,
.wrapper.style2 strong,
.wrapper.style2 b { color: #fff; }

.wrapper.style2 a { color: var(--accent-bright); border-bottom-color: rgba(63, 177, 163, 0.45); }
.wrapper.style2 a:hover { color: #fff; }

.wrapper.style2 input[type="button"].primary,
.wrapper.style2 input[type="submit"].primary,
.wrapper.style2 input[type="reset"].primary,
.wrapper.style2 button.primary,
.wrapper.style2 .button.primary {
	color: var(--deep) !important;
}

/*
	Banner and CTA share a warm brown photo that fought the cool palette. A tint
	layer is composited over it so the whole surface reads as one family.
	All background layers must be redeclared to insert the gradient first.
*/
#banner, #cta { background-color: var(--deep-2); }

#banner {
	background-image:
		linear-gradient(rgba(13, 39, 49, 0.62), rgba(13, 39, 49, 0.62)),
		url("images/light-bl.svg"),
		url("images/light-br.svg"),
		url("images/overlay.png"),
		url("../../images/banner.jpg");
	background-position: top left, bottom left, bottom right, top left, top center;
	background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat;
	background-size: auto, 25em, 25em, auto, cover;
	background-attachment: scroll, scroll, scroll, scroll, fixed;
}

#cta {
	background-image:
		linear-gradient(rgba(13, 39, 49, 0.68), rgba(13, 39, 49, 0.68)),
		url("images/light-tl.svg"),
		url("images/light-tr.svg"),
		url("images/overlay.png"),
		url("../../images/banner.jpg");
	background-position: top left, top left, top right, top left, bottom center;
	background-repeat: repeat, no-repeat, no-repeat, repeat, no-repeat;
	background-size: auto, 25em, 25em, auto, cover;
	background-attachment: scroll, scroll, scroll, scroll, fixed;
}

#banner .inner { background: rgba(13, 39, 49, 0.55); }

/*
	The global heading colour above would otherwise put dark ink on these dark
	surfaces, so headings on photo/deep backgrounds are restored to white.
*/
#banner h1, #banner h2, #banner h3,
#banner .inner header h2,
#cta h1, #cta h2, #cta h3 {
	color: #fff;
}

#banner .inner p { color: var(--on-deep); }
#banner .inner p b, #banner .inner p strong { color: #fff; }

#banner .inner header { border-color: rgba(255, 255, 255, 0.55); }

#cta { color: var(--on-deep); }

/* --------------------------------------------------------------- Header / nav */

#header {
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(8px);
	-webkit-backdrop-filter: saturate(1.4) blur(8px);
	box-shadow: 0 1px 0 0 var(--rule);
}

#header #logo a { color: var(--ink); }

#nav > ul > li > a { color: var(--muted); letter-spacing: 0.12em; }

#nav > ul > li > a:hover { color: var(--accent); }

#nav > ul > li.current > a {
	color: var(--ink);
	box-shadow: inset 0 -2px 0 0 var(--accent);
}

/* ------------------------------------------------------------------- Footer */

#footer {
	background: #e6ecf2;
	color: var(--muted);
	padding: 4em 5em 5em 5em;
	border-top: solid 1px var(--rule);
}

#footer .copyright { color: var(--muted); }
#footer .copyright a { color: var(--accent); }

/* ------------------------------------------------------------------ Portrait */

.image.portrait.float-left { margin: 0.35em 2em 1.25em 0; }

.image.portrait img {
	border-radius: 6px;
	box-shadow: 0 6px 24px rgba(13, 39, 49, 0.28);
}

/* ------------------------------------------------------------------ Embeds */

article#main iframe {
	border: solid 1px var(--rule);
	border-radius: 6px;
}

/* -------------------------------------------------------------- Responsive */

@media screen and (max-width: 1280px) {
	body, input, select, textarea { font-size: 12pt; }
	.wrapper.style4 { padding: 3em; }
}

@media screen and (max-width: 980px) {
	.wrapper.style4 { padding: 2.5em; }
}

/*
	Long unbroken URLs are printed as link text on the publications pages and
	pushed the layout wider than the viewport on phones.
*/
article#main a { overflow-wrap: anywhere; }

@media screen and (max-width: 736px) {
	body, input, select, textarea { font-size: 11.5pt; }

	/*
		At phone widths the stock banner heading (2.5em + 0.2em tracking,
		uppercase) stretched into "DR   JACK   F. RADCLIFFE" across two ragged
		lines. Scaled down so it sets on one tidy line.
	*/
	#banner { padding: 4em 1.25em; }

	#banner .inner {
		display: block;
		padding: 2em 1.25em;
	}

	#banner .inner header h2 {
		font-size: 1.5em;
		letter-spacing: 0.1em;
	}

	#banner .inner p { letter-spacing: 0.03em; }

	#cta { padding: 3em 1.5em; }

	.wrapper { margin-bottom: 2.5em; }
	.wrapper.style4 { padding: 2em 1.5em; }

	.wrapper.style4 .content > section {
		padding-top: 1.75em;
		margin-top: 1.75em;
	}

	#footer { padding: 3em 1.5em 4em 1.5em; }

	/* The float made a narrow, awkward text column on phones */
	.image.portrait.float-left { float: none; margin: 0 auto 1.5em; }

	/*
		The template centres column content at this breakpoint, which left the
		bullet lists centred and hard to scan. Ragged-right for list copy.
	*/
	article#main ul,
	article#main ol,
	article#main li,
	.imp-narrower,
	.imp-narrower ul,
	.imp-narrower li {
		text-align: left;
	}
}

@media screen and (max-width: 480px) {
	#banner .inner header h2 {
		font-size: 1.2em;
		letter-spacing: 0.06em;
	}
}

/* ---------------------------------------------------------------- Print */

@media print {
	#header, #nav, #cta, .buttons, article#main iframe { display: none !important; }

	body, .wrapper, .wrapper.style2, .wrapper.style4, #footer {
		background: #fff !important;
		color: #000 !important;
	}

	.wrapper { margin-bottom: 0; padding: 0 0 1.5em 0; }

	.wrapper.style2 h1, .wrapper.style2 h2,
	.wrapper.style2 h3, .wrapper.style2 h4 { color: #000 !important; }

	a { color: #000 !important; border-bottom: 0; }

	/* Surface link targets that would otherwise be lost on paper */
	article#main a[href^="http"]:after {
		content: " (" attr(href) ")";
		font-size: 0.75em;
		word-break: break-all;
	}

	article#main .content > section { break-inside: avoid; }
}