/* Baker Group
   A single sheet of correspondence: the wordmark set as an engraved head,
   the statement as the body of the letter, the address at the foot.
   One typeface, no accent colour, no ornament that isn't doing work. */

/* ---------- fonts ---------- */

/* Self-hosted rather than fetched from Google, as on southleigh.co.uk: it
   removes two third-party origins and the CSS round trip before the font
   files can start, lets the critical face be preloaded by exact URL, keeps
   visitor IPs off a third party, and allows a CSP with no external origins.
   Only the latin subsets are ever fetched for English copy; unicode-range
   makes the latin-ext faces free until a character actually needs them.

   Two faces only, because the page uses two: 300 roman for the wordmark,
   statement and running text, 400 italic for the three remit headings. */

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url("fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--paper:  #F5F3EE;
	--ink:    #16283F;  /* wordmark, rules */
	--body:   #3B3A36;  /* running text */
	--muted:  #67625A;  /* subordinate notes */
	--rule:   rgba(22, 40, 63, 0.18);

	--serif: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', Times, serif;

	/* One vertical rhythm, scaled by viewport, used for every gap on the page. */
	--step: clamp(1.75rem, 4vw, 3rem);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	padding-block: clamp(3rem, 12vh, 8rem);
	padding-inline: clamp(1.5rem, 7vw, 5rem);

	display: grid;
	align-content: safe center;

	background-color: var(--paper);
	color: var(--body);
	font-family: var(--serif);
	font-weight: 300;
	font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
	line-height: 1.7;
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: break-word;
}

/* The sheet is centred on the page; its contents are ranged left,
   the way a letterhead sits on paper. */
.sheet {
	width: 100%;
	max-width: 46rem;
	margin-inline: auto;
	animation: settle 900ms cubic-bezier(0.2, 0, 0.2, 1) both;
}

@keyframes settle {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---- The head ------------------------------------------------------- */

.wordmark {
	margin: 0;
	font-size: clamp(2.5rem, 9.5vw, 5.25rem);
	font-weight: 300;
	line-height: 1.04;
	letter-spacing: 0.16em;
	/* Tracking adds space after the final letter; pull it back so the
	   wordmark and the rule below it share the same left and right edge. */
	margin-inline-end: -0.16em;
	text-transform: uppercase;
	color: var(--ink);
	text-wrap: balance;
}

.wordmark::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin-top: clamp(1.25rem, 3vw, 1.75rem);
	background-color: var(--ink);
}

/* ---- The statement -------------------------------------------------- */

.statement {
	margin: var(--step) 0 0;
	max-width: 21em;
	font-size: clamp(1.3125rem, 1rem + 1.55vw, 1.875rem);
	font-weight: 300;
	line-height: 1.5;
	color: var(--ink);
	text-wrap: pretty;
}

/* ---- The remit ------------------------------------------------------ */

/* Three standing responsibilities, not a sequence, so they carry no
   numbering. Three items go either in one column or in three; an
   auto-fit grid would pass through a two-column state that leaves the
   third stranded on a row of its own. */
.remit {
	margin-top: calc(var(--step) * 1.25);
	padding-top: calc(var(--step) * 1.25);
	border-top: 1px solid var(--rule);

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--step) clamp(1.5rem, 4vw, 2.75rem);
}

@media (min-width: 46em) {
	.remit {
		grid-template-columns: repeat(3, 1fr);
	}
}

.remit__title {
	margin: 0 0 0.35em;
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	font-style: italic;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ink);
}

.remit__note {
	margin: 0;
	max-width: 26em;
	font-size: 0.9375em;
	line-height: 1.65;
	color: var(--muted);
	text-wrap: pretty;
}

/* ---- The address ---------------------------------------------------- */

.contact {
	margin: calc(var(--step) * 1.25) 0 0;
	font-size: clamp(1.125rem, 1rem + 0.9vw, 1.5rem);
	line-height: 1.4;
}

.contact a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	text-decoration-color: var(--rule);
	transition: text-decoration-color 200ms ease;
}

.contact a:hover,
.contact a:focus-visible {
	text-decoration-color: currentColor;
}

/* ---- The foot ------------------------------------------------------- */

.colophon {
	margin-top: calc(var(--step) * 1.25);
	padding-top: clamp(1.25rem, 3vw, 1.75rem);
	border-top: 1px solid var(--rule);
	font-size: 0.875rem;
	line-height: 1.5;
	letter-spacing: 0.04em;
	color: var(--muted);
}

.colophon p {
	margin: 0;
}

/* ---- Quality floor -------------------------------------------------- */

:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 4px;
	border-radius: 1px;
}

::selection {
	background-color: rgba(22, 40, 63, 0.14);
	color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.sheet {
		animation: none;
	}

	.contact a {
		transition: none;
	}
}

/* The page is correspondence; it should survive being printed. */
@media print {
	body {
		min-height: 0;
		padding: 0;
		background: #FFFFFF;
		color: #000000;
		display: block;
	}

	.sheet {
		animation: none;
		max-width: none;
	}

	.wordmark,
	.statement,
	.remit__title,
	.contact a {
		color: #000000;
	}

	.contact a {
		text-decoration: none;
	}
}