/* RISE - interim site
Palette and type follow the RISE CI Manual v1.2:
navy #001730, magenta #f92d84, purple #751094 (gradient only), pink #ffe1ee.
Headings are set in Circular, the CI typeface; body text is still Figtree.
assets/fonts/README.md says why, and what has to arrive to finish it. */
/* ---------- Circular, self-hosted ----------
Legal Disclaimer for Web licence
Licence to use self-hosted webfonts for displaying dynamic text on
specified website domains. Our package includes WOFF and WOFF2 font
formats.
Should the license page views limit be exceeded the license holder will be
required to contact Lineto.com for an upgrade.
It is strictly prohibited to rename the font and to download or use these
fonts in any other media.
These Web fonts are licensed exclusively for the use on the following
domain(s) and their subdomains:
www.riseregenerate.com (monthly pageviews: <50K)
(Lineto supplies that notice with the package and asks for it to be copied
into the stylesheet. The domain it names is not the one this site is served
from yet: see assets/fonts/README.md.)
The family name is Lineto's own file name, because the licence forbids
renaming the font. One face only, Medium 500 upright, so Circular is used
for headings and labels and `font-synthesis: none` keeps the browser from
inventing a bold or an italic from it. */
@font-face {
font-family: "CircularXXWeb-Medium";
src: url("../fonts/CircularXXWeb-Medium.woff2") format("woff2"),
url("../fonts/CircularXXWeb-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
/* ---------- Figtree, self-hosted ----------
Served from this site rather than from Google Fonts. A Google Fonts
stylesheet makes every visitor's browser contact Google and discloses
their IP address, which is the most common GDPR complaint against small
European sites; self-hosting removes the transfer and one DNS round trip.
Figtree is licensed under the SIL Open Font License 1.1 - see
assets/fonts/LICENSE.txt. Only the five styles the site actually uses are
included. If you start using another weight, add its files from the
@fontsource/figtree package and a block here, or it will fall back to the
system sans-serif. */
@font-face {
font-family: "Figtree";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/figtree-latin-ext-400-normal.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: "Figtree";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/figtree-latin-400-normal.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: "Figtree";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/figtree-latin-ext-500-normal.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: "Figtree";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/figtree-latin-500-normal.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: "Figtree";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/figtree-latin-ext-600-normal.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: "Figtree";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/figtree-latin-600-normal.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: "Figtree";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/figtree-latin-ext-700-normal.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: "Figtree";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("../fonts/figtree-latin-700-normal.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: "Figtree";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/figtree-latin-ext-500-italic.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: "Figtree";
font-style: italic;
font-weight: 500;
font-display: swap;
src: url("../fonts/figtree-latin-500-italic.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;
}
/* The hidden attribute is only `display: none` in the browser's own
stylesheet, so any author rule that sets `display` beats it. Several lists
here set `display: flex` or `grid` on their items, and the scripts hide
items with `el.hidden = true` - the text filters and the "show all"
collapse both do. Without this they stay on screen while believing
themselves hidden. `!important` because the whole point is to outrank
whatever a component set. */
[hidden] { display: none !important; }
/* ---------- colour tokens ----------
Two layers, deliberately:
1. BRAND CONSTANTS - the CI colours themselves. These never change,
in any theme. Anything that must be the RISE magenta or the RISE
navy whatever the page is doing uses these.
2. SEMANTIC TOKENS - what a colour is *for*: page background, body
text, the accent, a rule. These are the ones the theme swaps.
A light theme therefore redefines eight values and nothing else. The
next stage of CI work can repoint the semantic layer at a new palette
without touching a single rule in this file.
Contrast was checked, not eyeballed. Every text pairing below meets
WCAG AA (4.5:1 for body text):
dark white on navy 18.0 magenta on navy 4.9 muted on navy 8.8
light navy on white 18.0 accent on white 5.6 muted on white 6.3
accent on blush 4.6 muted on blush 5.2
*/
:root {
/* 1. brand constants, per the RISE CI Manual v1.2 */
--navy: #001730;
--magenta: #f92d84;
/* The lighter magenta the dark theme uses for links and for button hover.
Named here, as a constant, because Q1.5 needs it in a third place: the
hero, which is on a dark photograph in both themes. */
--magenta-light: #ff6ba6;
--purple: #751094; /* gradient only, per the manual */
--blush: #ffe1ee;
/* The CI gradient, navy through purple to magenta. One band uses it as a
surface; it is the same in both themes, because it is artwork rather
than a theme colour. */
--gradient: linear-gradient(120deg, #001730, #751094, #f92d84);
/* The same gradient with a navy scrim over it, for the one band that
carries text on the gradient. White on the bare magenta end is 3.66:1,
which fails AA; a quarter-opacity navy over the whole ramp brings the
worst point to 5.76:1 and leaves the navy end untouched at 18:1. The
gradient still reads as the gradient: it is darkened, not greyed. */
--gradient-text-bed:
linear-gradient(rgba(0, 23, 48, .25), rgba(0, 23, 48, .25)),
linear-gradient(120deg, #001730, #751094, #f92d84);
/* 2. semantic tokens - dark theme, which is the default again (Martin,
31 Oct 2026, replacing R1's light default). :root carries the dark values
and [data-theme="light"] below overrides them, so the default needs no
selector of its own.
`color-scheme` is what makes the browser's own furniture follow: the sort
select on /publications/, text inputs, scrollbars, the focus ring. Set on
the tokens rather than on `html` so it moves with the theme. */
color-scheme: dark;
--bg: #001730; /* = navy */
--surface: #16325a; /* alternate band, cards. R2 raised this from
#0a2347, which was 1.15:1 off the navy page,
so a band on it did not read as a band. */
--tint: #2a1745; /* small highlights only, never a whole band */
--ink: #ffffff;
--ink-soft: #a9b6c6;
/* A lighter magenta than the CI's #f92d84, and deliberately so. R2 raises
the dark alternate band to #16325a, and #f92d84 on #16325a is 3.50:1,
which fails AA for text; every link in an alternate band would be below
the line. #ff6ba6 measures 4.83:1 there and 6.78:1 on the navy page, so
one value passes on both beds, which is worth more than carrying the
exact brand hex into link text. The CI magenta is untouched where it is a
fill rather than text: the gradient, the hero, and the buttons below. */
--accent: var(--magenta-light);
--accent-hover:#ffa3c7;
--rule: rgba(255, 255, 255, 0.13);
--surface-2: rgba(255, 255, 255, 0.03); /* row hover, code */
--field-bg: #16325a; /* text inputs; see the light theme for why */
--tile-edge: transparent; /* white logo tiles need no edge on navy */
/* buttons: white on magenta is only 3.7:1, which fails AA, so the
dark theme sets navy on magenta (4.9:1) instead */
--btn-bg: var(--magenta);
--btn-ink: var(--navy);
--btn-bg-hover:var(--magenta-light);
/* Corner radius, two values and no more. Before this the stylesheet used
1px, 2px, 3px and 4px in different places, which is not a choice anyone
made - it reads as sharp corners that are slightly inconsistent rather
than as a deliberate edge.
--radius-img is the larger one, for anything showing a picture:
portraits, project cards, publication thumbnails, figures, logo tiles.
Pictures carry their own detail, so a visible curve reads as intentional
on them where it would look fussy on a 20px button.
--radius-ui is for controls, cards and panels. */
--radius-img: 8px;
--radius-ui: 4px;
--measure: 40rem;
--wide: 64rem;
/* Two stacks. `--font` is the body text; `--font-display` is headings and
labels, where Circular is licensed and complete enough to use. Circular
falls back to Figtree, so a heading never lands on a system font. */
--font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
Roboto, sans-serif;
--font-display: "CircularXXWeb-Medium", "Figtree", ui-sans-serif, system-ui,
-apple-system, "Segoe UI", Roboto, sans-serif;
}
/* Light theme. Only the semantic layer moves.
The accent is the CI magenta shifted along the magenta-to-purple axis
until it is legible as text on white (#f92d84 manages only 3.7:1).
It is a blend of two CI colours, so it stays in the family rather than
introducing a sixth colour from nowhere. The pure magenta is still used
for fills and rules, where contrast rules for text do not apply.
Blush finally earns its place here as the raised-panel colour - the CI
manual reserves it for light use. */
:root[data-theme="light"] {
color-scheme: light;
--bg: #ffffff;
/* R2: blush is no longer a band colour. It was both the alternate band and
the card surface, so two blush bands in a row merged into one long pink
stretch and the bands stopped reading as bands. The alternate band is now
a light grey, and blush survives as --tint for small highlights. */
--surface: #f1f3f6;
--tint: #ffe1ee; /* = blush; a tag, a banner, nothing larger */
--ink: #001730; /* = navy */
--ink-soft: #52616f;
--accent: #be208b; /* magenta 55% / purple 45% */
--accent-hover:#9d198f;
--rule: rgba(0, 23, 48, 0.14);
--surface-2: rgba(0, 23, 48, 0.04);
/* R2: navy on white, not magenta on white. Magenta is an accent in the CI,
and a page of magenta buttons spends it. */
--btn-bg: #001730;
--btn-ink: #ffffff; /* 17.2:1 */
--btn-bg-hover:#16325a;
/* A blush-filled input reads as highlighted or errored rather than empty,
so fields stay white and are defined by their border instead. */
--field-bg: #ffffff;
/* Logo tiles and figures are white by design - they are the paper the
artwork sits on. On a white page they need an edge or they dissolve. */
--tile-edge: rgba(0, 23, 48, 0.12);
}
/* The toggle only ever sets data-theme explicitly, so there is no stored
preference to apply before first paint and no flash of the wrong theme. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font);
font-size: 17px;
font-weight: 400;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: var(--measure); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--bg); padding: .5rem .75rem; z-index: 20; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---------- header ---------- */
.site-header { padding: 1.6rem 0; }
.bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.brand img { display: block; height: 30px; width: auto; }
/* Navigation.
The same markup serves two layouts. Wide: groups sit in the bar, their
panels drop beneath. Narrow: the whole list lives behind the menu button,
which is what stopped eight links wrapping onto a second line on a phone. */
.site-nav > ul {
list-style: none; display: flex; align-items: center;
gap: 1.5rem; margin: 0; padding: 0;
}
.site-nav li { margin: 0; }
.site-nav a,
.sub-toggle {
font-size: .95rem; font-weight: 500; font-family: inherit;
color: var(--ink-soft); text-decoration: none;
padding-bottom: 2px; border: 0; border-bottom: 2px solid transparent;
background: none; cursor: pointer; line-height: 1.4;
}
.site-nav a:hover,
.sub-toggle:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.sub-toggle::after {
content: "";
display: inline-block;
width: .36em; height: .36em;
margin-left: .42em;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-.15em) rotate(45deg);
}
.sub-toggle[aria-expanded="true"] { color: var(--ink); }
.sub-toggle[aria-expanded="true"]::after { transform: translateY(.1em) rotate(-135deg); }
.has-sub { position: relative; }
.site-nav .sub {
list-style: none; margin: 0; padding: .5rem 0;
position: absolute; top: calc(100% + .7rem); left: -.9rem;
min-width: 11rem;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-ui);
box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
z-index: 40;
display: none;
}
:root[data-theme="light"] .site-nav .sub { box-shadow: 0 8px 28px rgba(0, 23, 48, .13); }
.sub-toggle[aria-expanded="true"] + .sub { display: block; }
.site-nav .sub li { display: block; }
.site-nav .sub a {
display: block; padding: .4rem .9rem;
border-bottom: 0;
}
.site-nav .sub a[aria-current="page"] { border-bottom: 0; color: var(--accent); }
/* the menu button - the burger is three rules that become a cross when open */
.nav-toggle {
display: none; align-items: center; gap: .5rem;
font: inherit; font-size: .9rem; font-weight: 500;
color: var(--ink); background: none; border: 0;
padding: .35rem 0; cursor: pointer;
}
.burger { position: relative; display: block; width: 18px; height: 12px; }
.burger::before, .burger::after {
content: ""; position: absolute; left: 0; right: 0; height: 2px;
background: currentColor; border-radius: var(--radius-ui);
transition: transform .18s ease, top .18s ease;
}
.burger::before { top: 0; box-shadow: 0 5px 0 currentColor; }
.burger::after { top: 10px; }
.nav-toggle[aria-expanded="true"] .burger::before { top: 5px; box-shadow: none; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { top: 5px; transform: rotate(-45deg); }
@media (max-width: 52rem) {
.nav-toggle { display: inline-flex; }
.site-nav {
display: none;
position: absolute; top: 100%; right: 0; left: 0;
background: var(--surface);
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
padding: .9rem 1.2rem 1.3rem;
z-index: 40;
}
.site-nav.open { display: block; }
.site-nav > ul { display: block; }
.site-nav > ul > li { padding: .45rem 0; }
/* on a phone the groups are always open - a second tap to reach Approach
is one tap too many when the whole menu is already a deliberate act. The
group name stays, as a label rather than a control. */
.sub-toggle {
pointer-events: none;
font-size: .75rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-soft); padding: 0 0 .25rem;
}
.sub-toggle::after { display: none; }
.site-nav .sub {
display: block; position: static;
border: 0; box-shadow: none; background: none;
padding: 0; min-width: 0;
}
.site-nav .sub a { padding: .4rem 0; }
.site-header .bar { position: relative; }
}
/* ---------- hero ---------- */
/* full-bleed image bed with the headline over it */
.hero-full {
position: relative;
isolation: isolate;
display: flex;
align-items: flex-end;
padding: 6rem 0 3.2rem;
overflow: hidden;
/* The band is shaped to the hero photograph rather than to a fixed height,
so the frame shows close to whole instead of being re-cropped by the
browser. min-height keeps the text room on a narrow screen, where the
ratio alone would give a band far too short; max-height stops the hero
eating a wide screen and pushing everything below the fold. */
/* width must be stated: with aspect-ratio set and min-height winning on a
narrow screen, the box otherwise derives its *width* from that height and
runs 980px wide inside a 390px phone, scrolling the whole page sideways */
width: 100%;
aspect-ratio: 2200 / 982;
min-height: 30rem;
max-height: 78vh;
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: var(--navy); }
.hero-media img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
/* .42 was tuned for photographs. The trajectory chart is fine detail on a
pale slide and disappears at that level, so the bed sits a little
brighter and the gradient below does the work of keeping text legible. */
opacity: .44;
transition: opacity 1.6s ease-in-out;
}
.hero-media img.off { opacity: 0; }
/* R9: the CI gradient over the photograph, in both themes, with a scrim under
it so the text stays legible whatever frame is showing.
Two layers, and both are load-bearing:
- The scrim, listed first so it sits on top. It is strongest at the bottom,
which is where the headline, standfirst and buttons are.
- The CI gradient at 85%, navy through purple to magenta, running left to
right. Navy is on the left, which is the side the text sits on - that is
not a coincidence, because the headline and the links in this hero are
magenta, and magenta type over the magenta end of the gradient would
vanish.
Both measured from the rendered page rather than reasoned about: see the
contrast figures in the R8-R9 pull request. */
/* The default: a navy scrim with one soft magenta glow at the lower left.
Flat shading, no gradient ramp across the frame. */
.hero-full::after {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to top, rgba(0,23,48,.96) 8%, rgba(0,23,48,.55) 48%, rgba(0,23,48,.72) 100%),
radial-gradient(52rem 30rem at 14% 112%, rgba(249,45,132,.34) 0%, rgba(249,45,132,0) 64%);
}
/* `surfaces: gradient` in _config.yml. Navy is on the left, which is the side
the text sits on - not a coincidence: the headline and links in this hero
are magenta, and magenta type over the magenta end of the ramp would
vanish. The scrim above it is strongest at the bottom, where the text is.
Measured from the rendered pixels of all three hero frames, worst case:
headline 3.64:1 (large text, needs 3), standfirst 10.25:1, link 4.63:1. */
body.surfaces-gradient .hero-full::after {
background:
linear-gradient(to top, rgba(0,23,48,.90) 0%, rgba(0,23,48,.58) 46%, rgba(0,23,48,.50) 100%),
linear-gradient(120deg,
rgba(0,23,48,.85) 0%,
rgba(117,16,148,.85) 55%,
rgba(249,45,132,.85) 100%);
}
/* The hero keeps its dark image bed in both themes - a pale wash over the
same photographs would leave dark text fighting the imagery. So its text
is pinned light here rather than inherited from --ink, which flips. */
.hero-inner { width: 100%; color: #ffffff; }
/* The headline is the brand magenta in BOTH themes. The bed behind it stays
navy either way, where #f92d84 reaches 4.9:1 - comfortably past the 3:1
large text needs - so there is no reason for the two themes to differ here,
and the asymmetry only existed because light mode asked for colour first.
The link uses the same brand magenta rather than the pale pink that used to
sit here, which was a tint invented for legibility and belonged to no
palette. It is underlined, so colour is not the only thing marking it. */
.hero-full h1 { color: var(--magenta); }
.hero-full a { color: var(--magenta); }
.hero-full a:hover { color: #ffffff; }
/* Same reasoning for the pull-quote: it is large text, so the brand magenta
clears the 3:1 bar on white, and it gives the light pages a colour moment
mid-scroll instead of a long run of navy on white. */
:root[data-theme="light"] .claim { color: var(--magenta); }
.hero-full h1 {
font-size: clamp(1.9rem, 5.6vw, 3.3rem);
/* 500, not 600: Circular has one cut here and `font-synthesis: none` is
set, so a 600 would quietly render as 500 anyway. Saying 500 means the
stylesheet describes what actually happens. */
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1.08;
margin: 0 0 1.2rem;
/* the headline carries its own line break; this only stops a long
replacement headline from running the full width of the page */
max-width: 26ch;
text-wrap: pretty;
}
.hero-full .standfirst {
font-size: clamp(1.05rem, 2vw, 1.22rem);
color: #cdd8e4; /* fixed: the hero bed is dark in both themes */
max-width: 54ch;
margin: 0;
}
.hero-cta { margin: 1.4rem 0 0; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
.hero-media img { transition: none; }
}
/* ---------- sections ---------- */
main { padding-bottom: 1rem; }
/* R3: band padding 4rem on a phone, 6rem from 48rem up. R2: no rule between
bands. The border was there because neighbouring bands often shared a
background and nothing else separated them; now that no two adjacent bands
share one, the colour change is the separation and a line on top of it
reads as a seam. */
.band { padding: 4rem 0; }
@media (min-width: 48rem) {
.band { padding: 6rem 0; }
}
/* Only the vertical padding. The shorthand used to set left and right to 0,
which overrode .wrap's own 1.5rem gutter on the same element, so on a phone
every inner page's title and lede sat hard against the screen edge while the
body text below them did not. */
.page-head { padding-top: 2.5rem; padding-bottom: 1rem; }
/* R3: headings are set in Circular and sized on the CI's scale. The CI steps
H1 24 / H2 18 / body 10 pt, a ratio of 1.8 between H2 and body; this site
had 1.2 (h2 at 20.8px on a 17px body), which is why section heads barely
registered. Weight 500 because that is the CI's heading weight and the only
Circular cut licensed here; `font-synthesis: none` stops a browser faking a
heavier one. */
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 500;
font-synthesis: none;
letter-spacing: -0.022em;
}
h1 { font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.08; }
.page-head h1 {
font-size: clamp(2.25rem, 5vw, 3rem);
margin: 0 0 .8rem;
}
h2 { font-size: clamp(1.75rem, 3vw, 2.125rem); line-height: 1.1; margin: 0 0 1rem; }
h3 { font-size: 1.15rem; margin: 2rem 0 .5rem; }
p, li { margin: 0 0 1.05rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .5rem; }
strong { font-weight: 600; }
.lede {
font-size: 1.18rem;
line-height: 1.5;
font-weight: 500;
letter-spacing: -0.012em;
/* The page head spans the full 64rem on an Article page (R4), so the title
lines up with the text column below it instead of being indented 192px
past it. The lede is prose, though, and has no business being 1,024px
wide, so it keeps the reading measure while its container does not. */
max-width: var(--measure);
}
.muted { color: var(--ink-soft); }
.small { font-size: .86rem; }
.eyebrow {
color: var(--accent);
font-weight: 600;
font-size: .88rem;
margin: 0 0 .6rem;
}
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
/* pull-quote used once per page at most */
.claim {
font-size: clamp(1.25rem, 2.6vw, 1.6rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.32;
max-width: 28ch;
margin: 0;
padding-left: 1.1rem;
border-left: 3px solid var(--accent);
}
/* ---------- three-column grid (the scaling logic, footer) ---------- */
.cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.2rem;
}
@media (max-width: 48rem) { .cols { grid-template-columns: 1fr; gap: 1.8rem; } }
.cols h3 { margin-top: 0; }
.cols .num {
display: block;
color: var(--accent);
font-weight: 600;
font-size: .88rem;
margin-bottom: .35rem;
}
/* ---------- entry lists (projects, publications, news) ---------- */
.entrylist ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.entrylist li {
padding: .9rem 0;
border-top: 1px solid var(--rule);
font-size: .95rem;
line-height: 1.5;
margin: 0;
}
.entrylist li a { overflow-wrap: anywhere; }
.entrylist h2 { margin: 2.6rem 0 .4rem; }
.entrylist .self,
.entrylist .org {
text-decoration: underline;
text-decoration-color: var(--accent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* ---------- news ---------- */
.posts { list-style: none; padding: 0; margin: 0; }
.posts li {
padding: 1.1rem 0;
border-top: 1px solid var(--rule);
margin: 0;
}
/* year dividers on the archive */
.posts li.year-break {
border-top: 0;
padding: 2rem 0 .2rem;
}
.posts li.year-break:first-child { padding-top: 0; }
.posts li.year-break span {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--ink-soft);
}
.posts .meta {
display: flex;
align-items: center;
gap: .7rem;
flex-wrap: wrap;
margin: 0 0 .3rem;
font-size: .82rem;
font-weight: 500;
}
/* what kind of update this is */
.posts .type {
color: var(--accent);
text-transform: lowercase;
}
.posts .date { color: var(--ink-soft); }
.posts .pin {
color: var(--ink-soft);
border: 1px solid var(--rule);
border-radius: var(--radius-ui);
padding: .05rem .4rem;
font-size: .74rem;
}
.posts h3 { margin: 0 0 .3rem; font-size: 1.08rem; }
.posts h3 a { color: var(--ink); text-decoration: none; }
.posts h3 a:hover { color: var(--accent); }
.posts .sum { margin: 0; color: var(--ink-soft); font-size: .95rem; }
/* ---------- the Article template (R4) ----------
An inner page used to be a single 40rem column centred in a 64rem wrap, so
on a 1,280px screen it was a narrow ribbon with 320px of nothing either
side, next to a home page that used the full width. The text column stays
at the reading measure, because that is a reading decision and has not
changed; what changes is that the facts move out of the flow and into a
column beside it, which uses the space instead of leaving it empty.
The sidebar comes AFTER the main column in the markup, and sits to its
right. Both of those are deliberate:
- After, because the facts are reference material and the text is what the
reader came for. That was settled when the facts box was moved below the
project text, and it still holds for anyone reading in source order: a
screen reader, a phone, a printout.
- Right, so that visual order and DOM order agree. A sidebar placed left
while coming second in the markup reads in one order and tabs in
another, which is the kind of mismatch that only ever bites the people
least able to work around it.
Below 64rem the grid collapses to one column and the facts fall below the
text, which is where they already were. */
.article { display: grid; gap: 2.2rem; }
.article-main { min-width: 0; }
@media (min-width: 64rem) {
.article {
grid-template-columns: minmax(0, var(--measure)) 18rem;
gap: 4rem;
align-items: start;
}
/* `top` clears the sticky header; `max-height` plus its own scrollbar stops
a long facts list from being cut off on a short window. */
.article-side {
position: sticky; top: 6rem;
max-height: calc(100vh - 8rem);
overflow-y: auto;
}
}
/* In the sidebar the facts are the column, not a box inside it: the border
and padding that set them apart mid-text would just draw a box around a
box. A single rule down the left edge ties them to the text they belong
to. */
@media (min-width: 64rem) {
.article-side .facts {
margin: 0;
border: 0; border-left: 2px solid var(--rule);
border-radius: 0;
padding: .2rem 0 .2rem 1.1rem;
background: none;
/* One column, label above value. The two-column form needs 8rem for the
label before the value even starts, which leaves about 170px in an
18rem sidebar: "Analysis of Life Cycle Greenhouse Gas Emissions and
Removals of EU Buildings" came out six lines tall. Stacked, every
value gets the full width of the column. */
display: block;
font-size: .88rem;
}
.article-side .facts dt {
font-size: .75rem; font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
margin-top: .95rem;
}
.article-side .facts dt:first-child { margin-top: 0; }
.article-side .facts dd { margin: .12rem 0 0; line-height: 1.45; }
}
.post-body { max-width: var(--measure); }
/* One rule for every heading in a body, so a section that follows a list, a
figure or a facts box is never flush against it. "Collaborators" and
"Client" used to sit directly under the block above. */
.post-body h2 { margin-top: 2.5rem; }
.post-body > :first-child { margin-top: 0; }
.post-date { color: var(--ink-soft); font-size: .9rem; font-weight: 500; }
.post-type { color: var(--accent); font-weight: 600; font-size: .9rem; }
/* ---------- project list and project pages ---------- */
.projects,
.openings { list-style: none; padding: 0; margin: 0 0 1rem; }
.projects li,
.openings li {
padding: 1.15rem 0;
border-top: 1px solid var(--rule);
margin: 0;
}
.projects .meta,
.openings .meta {
display: flex; gap: .7rem; flex-wrap: wrap;
margin: 0 0 .3rem; font-size: .82rem; font-weight: 500;
}
.projects .date,
.openings .date { color: var(--accent); }
.projects .funder,
.openings .funder { color: var(--ink-soft); }
.projects h3,
.openings h2 { margin: 0 0 .3rem; font-size: 1.08rem; }
.projects h3 a,
.openings h2 a { color: var(--ink); text-decoration: none; }
.projects h3 a:hover,
.openings h2 a:hover { color: var(--accent); }
.projects .sum,
.openings .sum { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.projects .role { margin: .3rem 0 0; font-size: .88rem; color: var(--ink-soft); }
/* key facts on a project page */
.facts {
display: grid;
grid-template-columns: 8rem 1fr;
gap: .1rem 1.2rem;
margin: 0 0 2rem;
padding: 1.1rem 0;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
font-size: .93rem;
}
.facts dt { color: var(--ink-soft); font-weight: 500; }
.facts dd { margin: 0; }
.facts dd a { overflow-wrap: anywhere; }
/* The facts box now sits below the project text rather than above it, so it
needs air at the top and reads as a summary of what was just described. */
.facts-after { margin: 2.6rem 0 2rem; }
/* An opening states its terms before the prose, because the pay line is
required by law and should not be something a reader has to hunt for. */
.opening-facts { margin: 0 0 2rem; }
/* The "Show all" control on a collapsed list. A button, not a link, because
it changes what is on the page rather than going anywhere. */
.more-btn {
display: inline-block; margin: .6rem 0 0;
padding: .35rem 0; border: 0; background: none;
font: inherit; font-size: .88rem; font-weight: 500;
color: var(--accent); cursor: pointer;
}
.more-btn:hover { text-decoration: underline; }
/* Footer navigation (L17). The nav column holds the groups side by side on a
wide screen and wraps on a narrow one.
The flex row that used to be here is gone: R5 makes `.foot-nav` a
`display: contents` wrapper so its groups become columns of the footer
grid itself, which is declared further down with the rest of the grid. */
.foot-navhead {
margin: 0 0 .5rem; font-size: .8rem; font-weight: 600;
letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft);
}
/* every list in the footer: the nav groups and the Follow column alike, so
the one outside .foot-nav does not sprout bullets */
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 .35rem; }
.site-footer .foot-navhead + ul a,
.foot-nav a, .site-footer .foot-navhead + p a { font-size: .92rem; }
.opening-facts dd strong { color: var(--ink); }
/* The citation lives as the last row of the facts box. It is smaller than the
rows above because it is reference material rather than a fact to scan, and
the copy button the script adds sits under it on its own line. */
.facts-cite { font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.facts-cite .citeas-copy { display: block; margin-top: .55rem; }
/* ---------------------------------------------------- project page header */
/* The project image sits behind the title. It reuses the home hero's frame
and gradient, but shorter, because a project head carries a title, a lede
and a row of tags rather than a full standfirst and a call to action. */
.proj-hero {
aspect-ratio: auto;
min-height: 22rem;
max-height: 34rem;
padding: 5rem 0 2.4rem;
}
/* White, not the magenta the home hero uses: a project title is long and sits
over a busier frame, where magenta on photograph loses too much contrast. */
.proj-hero h1 { color: #ffffff; font-size: clamp(1.75rem, 1.1rem + 2.1vw, 2.9rem); }
.proj-hero .lede { color: rgba(255,255,255,.92); max-width: 44rem; }
.proj-hero .post-date { margin-bottom: .6rem; }
.proj-hero .tags { margin-top: 1rem; }
/* Brighter than the home hero's .44: there the image is a bed behind a short
headline, here it is the project's own picture and should read as one. */
.proj-hero .hero-media img { opacity: .58; object-position: top left; }
/* The caption belongs to the image but cannot sit on top of it, so it goes
directly underneath, where an attribution line is still clearly attached. */
.hero-cap {
margin: .75rem auto 0;
font-size: .82rem; line-height: 1.5;
color: var(--ink-soft);
}
@media (max-width: 34rem) {
.facts { grid-template-columns: 1fr; gap: 0; }
.facts dt { margin-top: .7rem; }
}
/* ---------- tags, jump links ---------- */
.tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.tag {
font-size: .78rem; font-weight: 500;
color: var(--ink-soft);
border: 1px solid var(--rule);
border-radius: var(--radius-ui);
padding: .12rem .5rem;
}
.jump {
font-size: .88rem; font-weight: 500;
margin: 0 0 1.4rem;
}
/* ---------- embedded documents ---------- */
.doc { margin: 1.8rem 0 2.4rem; }
.doc-bar {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
padding: .85rem 1rem;
background: var(--surface);
border: 1px solid var(--rule);
border-bottom: 0;
border-radius: var(--radius-ui) var(--radius-ui) 0 0;
}
.doc-title { margin: 0; font-weight: 600; font-size: .98rem; }
.doc-note { margin: .1rem 0 0; font-size: .84rem; color: var(--ink-soft); }
.doc-dl {
flex: 0 0 auto;
padding: .45rem .9rem;
background: var(--btn-bg);
color: var(--btn-ink);
font-size: .86rem; font-weight: 600;
text-decoration: none;
border-radius: var(--radius-ui);
}
.doc-dl:hover { background: var(--btn-bg-hover); color: var(--btn-ink); }
.doc-view {
border: 1px solid var(--rule);
border-radius: 0 0 var(--radius-ui) var(--radius-ui);
background: #fff;
overflow: hidden;
}
.doc-view object { width: 100%; height: 100%; display: block; border: 0; }
.doc-fallback {
padding: 2.5rem 1.5rem;
text-align: center;
color: var(--ink-soft);
background: var(--surface);
}
/* phones rarely render an inline PDF - show the bar, hide the dead frame */
@media (max-width: 40rem) {
.doc-view { display: none; }
.doc-bar { border-bottom: 1px solid var(--rule); border-radius: var(--radius-ui); }
}
.doc-line {
padding: .7rem 0;
border-top: 1px solid var(--rule);
margin: 0;
font-size: .95rem;
}
/* ---------- figures ---------- */
.fig { margin: 2rem 0; }
.fig-link { display: block; }
.fig img {
display: block; width: 100%; height: auto;
background: #fff;
border: 1px solid var(--rule);
border-radius: var(--radius-ui);
}
.fig figcaption {
margin-top: .6rem;
font-size: .86rem;
line-height: 1.45;
color: var(--ink-soft);
}
.fig-num { font-weight: 600; color: var(--ink); margin-right: .35rem; }
.fig-src { display: block; margin-top: .15rem; font-size: .8rem; }
.fig-dl { margin-left: .5rem; font-size: .8rem; font-weight: 500; }
/* ---------- people ---------- */
/* One size of card, whatever is in it. `grid-auto-rows: 1fr` makes every row
the height of the tallest card in the grid, and the flex column inside each
card then lets the portrait-and-text block take the slack, so the links row
sits on the same line across the whole grid. Without both halves the cards
step up and down as the roles wrap to one, two or three lines. */
.people {
list-style: none; padding: 0;
display: grid;
/* 21rem, not 15. At 15rem the text beside the portrait is about 150px
wide, which breaks a role like "Head of Office, Stakeholder and
Communications Manager" over three lines and makes the whole grid as tall
as its longest job title. 21rem gives two columns in a 64rem band, and a
text column wide enough for those roles to run to one or two lines. */
grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
grid-auto-rows: 1fr;
gap: .8rem;
margin: 1.2rem 0 0;
}
.people li { margin: 0; } /* padding and border are set with the card, below */
/* One column, so there is nothing beside a card for it to line up with, and
the equal row height only adds dead space under the shortest card. */
@media (max-width: 40rem) {
.people { grid-auto-rows: auto; }
}
/* Top-aligned, not centred. The cards are all one height now, so centring
would put each name at a different point down its card depending on how
many lines the role runs to, and a row of names at five different heights
reads as five misaligned cards. Aligned to the top, the portraits and the
names line up across the row and the slack falls at the bottom. */
.people a {
display: flex; align-items: flex-start; gap: .85rem;
padding: .7rem .85rem;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-ui);
text-decoration: none;
color: var(--ink);
}
.people a:hover { border-color: var(--accent); }
/* Person cards. A square portrait, not a circle: a 1:1 crop of a headshot
survives squaring, and a circle eats the shoulders. */
.people .pc-face {
width: 4.5rem; height: 4.5rem; flex: 0 0 auto;
border-radius: var(--radius-ui); object-fit: cover; object-position: top center;
background: var(--surface);
overflow: hidden;
}
/* The portrait is wrapped (see `.pc-shot` below), so the fills the
wrapper and the wrapper carries the size and the corners. */
.people .pc-shot img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top center;
}
/* Shown instead of a portrait while a person has no photograph. Never a
stock face: see docs/06. */
.people .pc-initials {
display: flex; align-items: center; justify-content: center;
font-size: 1.25rem; font-weight: 600; letter-spacing: .03em;
color: var(--ink-soft); border: 1px solid var(--rule);
}
/* The links row sits outside the card's own link, so it is its own set of tab
stops rather than a link inside a link. It therefore has to opt out of the
card styling that `.people a` applies: those rules make a bordered block,
which is right for the card and wrong for a row of small links. */
.pc-links {
display: flex; flex-wrap: wrap; justify-content: flex-start;
gap: .85rem; margin: .45rem 0 0; padding: 0 .85rem;
}
.people .pc-links a {
display: inline; padding: 0; gap: 0;
/* and not the `flex: 1 1 auto` the card's own link carries, which would
make each of these grow to fill the row and strand them a card's width
apart instead of sitting together on the left */
flex: 0 0 auto;
background: none; border: 0; border-radius: 0;
font-size: .8rem; color: var(--accent); text-decoration: none;
}
.people .pc-links a:hover { text-decoration: underline; }
/* The card and its links read as one block. */
.people li {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-ui);
padding-bottom: .55rem;
}
.people li:hover { border-color: var(--accent); }
.people a { background: none; border: 0; border-radius: 0; flex: 1 1 auto; }
.people a:hover { border-color: transparent; }
.person-txt { min-width: 0; }
.people .who { display: block; font-weight: 600; font-size: .95rem; }
.people .what { display: block; color: var(--ink-soft); font-size: .85rem; }
/* a person's own page */
.person-head { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; }
.person-head > div { flex: 1 1 18rem; min-width: 0; }
.person-head .portrait {
width: 8.5rem; height: 8.5rem; flex: 0 0 auto;
border-radius: var(--radius-ui); object-fit: cover; object-position: top center;
background: var(--surface);
display: block; overflow: hidden;
}
.person-head .portrait img {
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: top center;
}
/* Portraits in black and white, from `portraits: bw` in _config.yml by way of
a class on . It is done here rather than in the image files so the
originals stay in colour: a portrait gets reused in a slide, a press note or
a partner's page, and a greyscale JPEG cannot be un-greyed.
`grayscale(1)` and not `saturate(0)`: grayscale weights the channels by
luminance, so skin tones keep their tonal separation instead of flattening.
Only portraits. Project and publication imagery is untouched. */
body.portraits-bw .people .pc-face,
body.portraits-bw .people .pc-shot img,
body.portraits-bw .person-head .portrait,
body.portraits-bw .person-head .portrait img {
filter: grayscale(1);
}
.person-links { margin: .9rem 0 0; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 1rem; }
/* the lessons list, ported from the personal site */
.lessons { margin: 1.5rem 0 0; }
.lessons dt { font-weight: 600; font-size: 1rem; margin-top: 1.7rem; }
.lessons dt:first-child { margin-top: 0; }
.lessons dd {
margin: .3rem 0 0;
padding-left: .95rem;
border-left: 2px solid var(--rule);
color: var(--ink-soft);
}
/* ---------- partners ---------- */
.partners {
list-style: none; padding: 0;
display: flex; flex-wrap: wrap; gap: .6rem;
margin: 1.1rem 0 0;
}
.partners li { margin: 0; }
.partners a, .partners .unknown {
display: flex; flex-direction: column;
width: 11.5rem;
background: #fff;
border-radius: var(--radius-ui);
text-decoration: none;
color: var(--navy);
overflow: hidden;
}
.partners a:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
/* On a phone the tiles are a fixed 11.5rem, and two of them plus the gap are
wider than the content column, so the flex row above collapsed to a single
tall column of logos (Martin, 31 Oct 2026). Below 34rem the list becomes a
two-column grid and the tiles give up their fixed width to fit it. */
@media (max-width: 34rem) {
.partners { display: grid; grid-template-columns: repeat(2, 1fr); }
/* `height: 100%` as well as `width: auto`: the grid stretches the