/* Global typography & layout utilities.
*
* Loaded last in so it wins against the FTCO theme concat and
* publications.css. Establishes a single font (Inter) plus prose/page
* wrappers that bound and left-align body copy.
*
* Required s in (in this order):
*
*
*
*
*/
:root {
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
"Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--color-text: #1f2328;
--color-text-muted: #555;
--color-link: #0a58ca;
--color-link-hover: #084298;
--prose-max: 760px;
--row-max: 960px;
--page-max: 1200px;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
font-family: var(--font-sans);
color: var(--color-text);
font-size: 1.0625rem; /* 17px */
line-height: 1.6;
}
/* Headings — same family, tighter line-height, modest scale. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-sans);
color: var(--color-text);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
margin-top: 1.4em;
margin-bottom: 0.5em;
}
h1 { font-size: 2rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
p {
margin-top: 0;
margin-bottom: 1em;
}
a {
color: var(--color-link);
text-decoration-skip-ink: auto;
}
a:hover {
color: var(--color-link-hover);
}
strong { font-weight: 600; }
/* ---------- Reading column ----------------------------------------
* Use .prose on the wrapper around long body copy. Paragraphs and
* inline content are left-aligned with a comfortable measure.
* / immediately inside .prose stay centered so page titles
* still sit above the column.
* ------------------------------------------------------------------ */
.prose {
max-width: var(--prose-max);
margin-left: auto;
margin-right: auto;
text-align: left;
}
.prose > h1,
.prose > h2,
.prose > .prose-title {
text-align: center;
}
.prose p,
.prose ul,
.prose ol,
.prose blockquote {
text-align: left;
}
.prose ul,
.prose ol {
padding-left: 1.5em;
}
.prose li + li {
margin-top: 0.25em;
}
/* Wider wrapper for media + text rows (research themes, team cards). */
.page-wide {
max-width: var(--page-max);
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
}
/* ---------- Figure + text rows -----------------------------------
* .container-section is the image-beside-text block used on Research,
* Team, and Recruitment. Constrain to a measure modestly wider than
* the prose column so single- and two-column blocks feel related
* rather than disconnected.
* ------------------------------------------------------------------ */
.container-section {
max-width: var(--row-max);
margin-left: auto;
margin-right: auto;
}
/* ---------- Footer responsive consolidation -----------------------
* Every page used to inline the same @media block. Centralize it.
* ------------------------------------------------------------------ */
@media screen and (max-width: 1440px) {
.ftco-footer .row {
display: flex;
flex-direction: column;
align-items: center;
}
.ftco-footer .col-md-0,
.ftco-footer .col-md-4,
.ftco-footer .col-md-5,
.ftco-footer .col-md-1 {
width: 100%;
text-align: center;
margin-bottom: 20px;
}
}
/* ---------- Footer copyright separator ----------------------------
* Add breathing room between the footer contact info and the
* copyright line at the bottom.
* ------------------------------------------------------------------ */
.copyright {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid rgba(255, 255, 255, 0.15);
}