/* =============================================================================
   base.css: reset, type, links, buttons and layout helpers
   -----------------------------------------------------------------------------
   Everything here is used on every template. Page-specific layout lives in
   home.css and templates.css; reusable pieces in components.css.
   ============================================================================= */

/* ---- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-padding-top: calc(var(--header-h) + 24px); }   /* anchors land clear of the sticky header */
body {
	background: var(--paper);
	color: var(--ink);
	font: 400 var(--step-0)/1.6 var(--text);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ol, ul { padding: 0; list-style: none; }
p { max-width: var(--measure); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Skip link: off screen until focused */
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; padding: 12px 16px; background: var(--red); color: var(--ink); }
.skip:focus { left: 8px; }

/* ---- Type ----------------------------------------------------------------- */
/* Eyebrow: sentence case, says something real (a place, a year, a subject). No caps, no tracking. */
.eyebrow { margin-bottom: var(--s-3); font: 500 var(--eyebrow-size)/1.35 var(--text); color: var(--eyebrow-colour); }
.label { font: 500 var(--step-label)/1.35 var(--text); color: var(--grey); }

.title {
	max-width: 18ch;
	font: 700 var(--step-title)/1 var(--display);
	letter-spacing: -.02em;
	text-wrap: balance;
}
.display {
	font: 700 var(--step-display)/.92 var(--display);
	letter-spacing: -.035em;
}
.lede { max-width: 40ch; font: italic 500 var(--step-lede)/1.3 var(--display); }
.pull { max-width: 32ch; font: italic 500 var(--step-lede)/1.3 var(--display); }   /* pull quote (component 8) */
/* Bodoni at every size: the lowest optical size (thickest hairlines). Declared after the
   font shorthands above, which would otherwise reset it. */
.title, .display, .lede, .pull {
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
}

/* ---- Links and buttons (component 4) -------------------------------------- */
/* Text link: underlined; motion.css turns the underline into a drawn bar */
.link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
/* Primary button: the only red action on the site is Press contact */
.btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 16px 22px;
	background: var(--red);
	color: var(--ink);
	font: 600 1rem/1 var(--text);
	text-decoration: none;
	transition: background-color var(--dur-quick) var(--ease-out);
}
.btn:hover { background: var(--red-press); }

/* ---- Layout helpers -------------------------------------------------------- */
/* The frame: equal outer margins plus the line of descent's room on the left */
.wrap { padding-inline: calc(var(--gutter) + var(--line-gutter)); }

/* Sections: a section gap above each; .band is a seamless ground between paper sections */
.sec { padding-block: var(--s-section) 0; }
.band { margin-top: var(--s-section); padding-block: calc(var(--s-section) * .6); background: var(--seamless); }
.band + .sec { padding-top: calc(var(--s-section) * .8); }
.sec.sub-sec { padding-top: var(--s-6); }   /* a long read's sub-chapter sits closer to the one before */

/* Vertical rhythm inside a column */
.stack > * + * { margin-top: var(--s-4); }
.stack > .title + * { margin-top: var(--s-5); }
.stack h3.sub {
	margin-top: var(--s-6);
	font: 600 var(--step-lede)/1.2 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
}

/* Section head across the frame, body set in below (component 18) */
.sec-head { margin-bottom: var(--s-6); }
.sec-head .title { max-width: none; }

/* The approved asymmetric splits on a 12-column idea: 5 / 7, 7 / 5, 4 / 8 (and 6 / 6 for the firms) */
.split-4-8, .split-5-7, .split-6-6, .split-7-5 { display: grid; gap: var(--s-6); align-items: end; }
.split-4-8.top, .split-5-7.top, .split-7-5.top { align-items: start; }
@media (min-width: 700px) {
	.split-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
	.split-5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	.split-6-6 { grid-template-columns: 1fr 1fr; }
	.split-7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
/* .title-left: a split whose left column is a title stays one column until the title has room */
@media (min-width: 700px) and (max-width: 1023px) {
	:is(.split-4-8, .split-5-7, .split-7-5).title-left { grid-template-columns: 1fr; }
}
/* .media-first: the picture column (.media) is written after the text in the markup but shown
   first at every width (phone-order rule: the image leads; on wide screens it takes the left column) */
.media-first > .media { order: -1; }

/* A row of plain links that leads on (after .stack, whose gap it overrides) */
.next-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }