/* Fonts (self-hosted, SIL Open Font License) ------------------------------ */

@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-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+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-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+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: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-ext-400-italic.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hanken-grotesk-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+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/hanken-grotesk-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+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: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hanken-grotesk-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+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/hanken-grotesk-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+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: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hanken-grotesk-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+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/hanken-grotesk-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+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: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-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+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Tokens ------------------------------------------------------------------ */

:root {
	--bg: #F6F5F2;
	--ink: #141414;
	--muted: #66645F;
	--rule-soft: #DDDAD4;

	--serif: 'Instrument Serif', serif;
	--sans: 'Hanken Grotesk', sans-serif;
	--mono: 'IBM Plex Mono', monospace;

	--gutter: clamp(20px, 4vw, 56px);
	--ease: cubic-bezier(.2, .7, .1, 1);
}

/* Base -------------------------------------------------------------------- */

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; cursor: pointer; }
a:hover { opacity: .6; }
p { text-wrap: pretty; }
figure { margin: 0; }
strong { font-weight: 600; }

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
}

.page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.page > main { flex: 1; }

/* Page transitions -------------------------------------------------------- */

/* Native cross-document view transitions. Browsers without support simply
   navigate as usual, so this needs no fallback and no JavaScript library. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}

::view-transition { background: var(--bg); }

/* The page itself: the old one leaves quickly, the new one settles in */
@keyframes vt-page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-page-in { from { opacity: 0; transform: translateY(20px); } }

::view-transition-old(root) { animation: vt-page-out .28s ease both; }
::view-transition-new(root) { animation: vt-page-in .6s var(--ease) .12s both; }

/* The header stays in place */
.site-header { view-transition-name: site-header; }

::view-transition-group(site-header) { animation: none; }
::view-transition-old(site-header) { display: none; }
::view-transition-new(site-header) { animation: none; }

/* Titles and images found on both pages glide from one position to the other */
.wg-title,
.door-title,
.project-title,
.project-card-title,
.project-next-title { view-transition-class: vt-morph; }

.vt-media { view-transition-class: vt-morph vt-media; }

.door-title,
.project-title,
.project-card-title,
.project-next-title { width: fit-content; }

::view-transition-group(.vt-morph) {
	animation-duration: .75s;
	animation-timing-function: var(--ease);
}

::view-transition-old(.vt-morph),
::view-transition-new(.vt-morph) { animation-duration: .45s; }

/* Elements found on only one of the two pages simply leave and arrive with the page */
::view-transition-old(.vt-morph):only-child { animation: vt-page-out .28s ease both; }
::view-transition-new(.vt-morph):only-child { animation: vt-page-in .6s var(--ease) .12s both; }

/* Set by site.js on the rows of the home page that are not being opened */
.vt-static :is(.wg-title, .wg-thumb) { view-transition-name: none !important; }

/* Keep the crop instead of stretching images between different aspect ratios */
::view-transition-old(.vt-media),
::view-transition-new(.vt-media) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shared text styles ------------------------------------------------------ */

.eyebrow {
	font: 500 13px var(--sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.eyebrow-row {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font: 500 13px var(--sans);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.eyebrow-row--rule {
	flex-wrap: nowrap;
	border-bottom: 1px solid var(--ink);
	padding-bottom: 12px;
}

.page-title {
	margin: 0;
	font: 400 clamp(56px, 9vw, 148px)/.92 var(--serif);
	letter-spacing: -.02em;
}

/* Header & footer --------------------------------------------------------- */

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	padding: 24px var(--gutter);
}

.site-logo { font: 400 30px/1 var(--serif); }

.site-nav {
	display: flex;
	gap: 32px;
	font: 500 14px/1 var(--sans);
}

.site-footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding: 24px var(--gutter) 96px;
	font: 500 13px/1 var(--sans);
}

.site-footer-name { font: 400 20px var(--serif); }
.site-footer-nav { display: flex; gap: 24px; }

/* Home -------------------------------------------------------------------- */

.home {
	padding: clamp(40px, 8vw, 120px) var(--gutter) 80px;
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 6vw, 80px);
}

.home-intro {
	margin: 0;
	max-width: 24ch;
	font: 400 clamp(26px, 2.6vw, 36px)/1.2 var(--serif);
	color: var(--muted);
}

.wg-list { display: flex; flex-direction: column; }

.wg-row {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(12px, 3vw, 40px);
	padding: clamp(12px, 1.6vw, 20px) 0;
	transition: opacity .4s ease, padding .6s var(--ease);
}

.wg-row:hover { opacity: 1; }

.wg-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--ink);
	transform-origin: left;
}

.wg-no {
	font: 500 13px var(--sans);
	align-self: start;
	padding-top: 14px;
}

/* Clips the title for the run-in animation, vertically only: the serifs of A or Ä
   overhang to the left. Descenders (y, g) and umlauts on capitals reach beyond the
   tight line height, so the clip gets extra room above and below. The negative
   margins keep that room out of the row height. */
.wg-title-clip {
	display: block;
	overflow: hidden;
	overflow: visible clip;
	font-size: clamp(48px, 8.5vw, 136px);
	padding-block: .18em;
	margin-block: -.18em;
}

.wg-title {
	display: block;
	width: fit-content;
	font: 400 1em/.95 var(--serif);
	letter-spacing: -.02em;
}

.wg-thumb {
	width: clamp(96px, 14vw, 220px);
	aspect-ratio: 3/2;
	object-fit: cover;
	transition: width .6s var(--ease);
}

/* Phones: number and thumbnail give way, and the type shrinks just enough for titles
   to fit on one line. Words too long even then wrap instead of running into the image. */
.wg-title { overflow-wrap: anywhere; hyphens: auto; }

@media (max-width: 480px) {
	.wg-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
	.wg-thumb { width: 72px; }
	.wg-title-clip { font-size: clamp(30px, calc(21vw - 34px), 48px); }
}

/* Animation "Einlauf": rows run in one after the other on page load */

/* 135% moves even a capital with umlaut fully below the enlarged clip */
@keyframes wg-rise { from { transform: translateY(135%); } to { transform: translateY(0); } }
@keyframes wg-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wg-fade { from { opacity: 0; } to { opacity: 1; } }

[data-load="einlauf"] .wg-row { --delay: calc(.2s + var(--i) * .13s); }
[data-load="einlauf"] .home-intro { animation: wg-fade .8s var(--ease) both; }
[data-load="einlauf"] .wg-title { animation: wg-rise 1s var(--ease) var(--delay) both; }
[data-load="einlauf"] .wg-line { animation: wg-draw 1.2s var(--ease) var(--delay) both; }
[data-load="einlauf"] .wg-no,
[data-load="einlauf"] .wg-thumb { animation: wg-fade .8s var(--ease) calc(var(--delay) + .35s) both; }

/* The run-in greets visitors on arrival. Coming back through a page transition, the
   list is simply there, otherwise the morphing title would land on a hidden row. */
.vt-arrival [data-load="einlauf"] :is(.home-intro, .wg-title, .wg-line, .wg-no, .wg-thumb) { animation: none; }

@media (hover: hover) {
	/* Hover effect "Öffnen": the hovered row unfolds, the others recede */
	[data-hover="oeffnen"] .wg-list:hover .wg-row:not(:hover) { opacity: .45; }
	[data-hover="oeffnen"] .wg-row:hover { padding: clamp(20px, 2.6vw, 36px) 0; }
	[data-hover="oeffnen"] .wg-row:hover .wg-thumb { width: clamp(200px, 30vw, 520px); }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* Hover effects "Cursor" and "Bildspur": no thumbnails, images appear at the cursor instead.
	   The hidden thumbnail hands its transition name over to the image at the cursor (site.js). */
	[data-hover="cursor"] .wg-thumb,
	[data-hover="trail"] .wg-thumb { width: 0; view-transition-name: none !important; }

	[data-hover="cursor"] .wg-list:hover .wg-row:not(:hover),
	[data-hover="trail"] .wg-list:hover .wg-row:not(:hover) { opacity: .22; }
}

/* Behind all page content, so titles stay readable on top of the images */
.wg-trail {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.wg-trail img {
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(170px, 20vw, 340px);
	height: auto;
	will-change: transform, opacity;
}

.wg-float {
	position: fixed;
	left: 0;
	top: 0;
	width: clamp(220px, 26vw, 420px);
	aspect-ratio: 3/2;
	pointer-events: none;
	z-index: 5;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.wg-float img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .35s ease;
}

.wg-float img.is-active { opacity: 1; }

@media (hover: none) {
	.wg-float, .wg-trail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.home *, .home { animation: none !important; transition: none !important; }
	.wg-float, .wg-trail { display: none; }
}

/* Werkgruppe (door page) -------------------------------------------------- */

.door {
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 120px);
	padding-bottom: 80px;
}

.door-head {
	padding: clamp(40px, 6vw, 96px) var(--gutter) 0;
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 48px);
}

.door-title {
	margin: 0;
	font: 400 clamp(64px, 12vw, 200px)/.88 var(--serif);
	letter-spacing: -.03em;
}

.door-intro {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
	border-top: 1px solid var(--ink);
	padding-top: 20px;
}

.door-intro-text {
	flex: 2 1 420px;
	margin: 0;
	max-width: 34ch;
	font: 400 clamp(24px, 2.4vw, 34px)/1.25 var(--serif);
}

.door-details {
	flex: 1 1 220px;
	font: 400 14px/1.6 var(--sans);
	color: var(--muted);
}

.door-cover {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.door-cover img {
	width: 100%;
	aspect-ratio: 21/9;
	object-fit: cover;
}

.door-cover figcaption {
	font: 400 13px var(--sans);
	color: var(--muted);
}

.door-projects {
	padding: 0 var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: 72px 40px;
}

.project-card {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.project-card img,
.project-card-placeholder {
	width: 100%;
	aspect-ratio: 5/4;
	object-fit: cover;
}

.project-card-placeholder {
	background: repeating-linear-gradient(135deg, #E7E5E0 0 8px, #EEECE8 8px 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 12px var(--mono);
	color: var(--muted);
}

.project-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.project-card-title { font: 400 34px/1.05 var(--serif); }

.project-card-no {
	font: 500 13px var(--sans);
	color: var(--muted);
}

/* Project ----------------------------------------------------------------- */

.project {
	padding: clamp(32px, 5vw, 72px) var(--gutter) 80px;
	display: flex;
	flex-direction: column;
	gap: clamp(96px, 12vw, 180px);
}

.project-intro {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 3vw, 40px);
}

.project-chapter {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.project-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 40px;
}

.project-head-title {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.project-title {
	margin: 0;
	font: 400 clamp(56px, 8vw, 128px)/.92 var(--serif);
	letter-spacing: -.03em;
}

.project-details {
	font: 400 14px/1.6 var(--sans);
	color: var(--muted);
}

.project-next {
	border-top: 1px solid var(--ink);
	padding-top: 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.project-next-title { font: 400 clamp(44px, 6vw, 96px)/1 var(--serif); }

/* Layout rows: columns wrap once their minimum widths no longer fit */

.row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 40px;
}

.row--end { align-items: flex-end; }

.row:not(.row--end) { align-items: flex-start; }

.col {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.col > * { width: 100%; }
.col img { width: 100%; }

.col-12 { flex: 1 1 100%; }
.col-8 { flex: 2 1 560px; }
.col-6 { flex: 1 1 400px; }
.col-4 { flex: 1 1 260px; gap: 16px; }

/* Blocks */

.chapter {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.chapter-eyebrow {
	font: 500 12px var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}

.chapter-title {
	margin: 0;
	font: 400 clamp(40px, 4.6vw, 72px)/1 var(--serif);
	letter-spacing: -.02em;
}

.figure {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.figure-caption {
	font: 400 13px/1.6 var(--sans);
	color: var(--muted);
}

.gallery {
	display: grid;
	grid-template-columns: repeat(var(--gallery-columns, 3), minmax(0, 1fr));
	gap: 8px;
}

.has-rule {
	border-top: 1px solid var(--ink);
	padding-top: 16px;
}

.text-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 16px;
	line-height: 1.6;
}

.text-body p,
.text-body ul,
.text-body ol,
.text-lead p { margin: 0; }

.text-body ul,
.text-body ol { padding-left: 1.2em; }

.text-body a,
.text-lead a,
.text-caption a,
.split-prose a { text-decoration: underline; text-underline-offset: .15em; }

.text-lead { font: 400 clamp(20px, 1.7vw, 24px)/1.35 var(--serif); }

.text-caption {
	font: 400 13px/1.6 var(--sans);
	color: var(--muted);
}

.text-caption.has-rule { padding-top: 14px; }

.video--narrow { width: 72%; min-width: 260px; }

.video-facade {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: var(--video-ratio, 16/9);
	padding: 0;
	border: 0;
	background: var(--ink);
	color: var(--bg);
	font: 500 13px var(--sans);
	overflow: hidden;
}

button.video-facade { cursor: pointer; }
button.video-facade:hover .video-play { background: var(--bg); color: var(--ink); }

.video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.video-play {
	width: 44px;
	height: 44px;
	border: 1px solid var(--bg);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.video iframe,
.video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--video-ratio, 16/9);
	border: 0;
}

/* CV ---------------------------------------------------------------------- */

.cv,
.text-page {
	padding: clamp(40px, 7vw, 112px) var(--gutter) 80px;
	display: flex;
	flex-direction: column;
	gap: clamp(40px, 6vw, 80px);
}

.cv-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 40px;
}

.cv-lead {
	margin: 0;
	max-width: 30ch;
	font: 400 clamp(22px, 2vw, 28px)/1.3 var(--serif);
}

.split-sections {
	display: flex;
	flex-direction: column;
	max-width: 1080px;
}

.split-section {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 12px 40px;
	border-top: 1px solid var(--ink);
	padding: 20px 0 40px;
}

.split-section--cv { padding-bottom: 48px; }

.split-heading {
	margin: 0;
	font: 400 26px/1.15 var(--serif);
}

.split-content {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* A span of 2 would add a phantom column once the grid collapses to one track
   (container < 560px, which means a viewport below ~608px) */
@media (max-width: 608px) {
	.split-content { grid-column: auto; }
}

.split-prose {
	gap: 8px;
	font-size: 16px;
	line-height: 1.65;
}

.split-prose p,
.split-prose ul,
.split-prose ol { margin: 0; }

.split-prose ul,
.split-prose ol { padding-left: 1.2em; }

.cv-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: 16px;
	line-height: 1.5;
}

.cv-year {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.cv-place { color: var(--muted); }

.cv-groups { display: flex; flex-direction: column; }

.cv-group {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: clamp(12px, 3vw, 40px);
	border-top: 1px solid var(--ink);
	padding: 20px 0 56px;
}

.cv-group-no {
	font: 500 13px var(--sans);
	padding-top: 12px;
}

.cv-group-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

.cv-group-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 24px;
}

.cv-group-name {
	font: 400 clamp(40px, 5vw, 80px)/1 var(--serif);
	letter-spacing: -.02em;
}

.cv-group-items { display: flex; flex-direction: column; }

.cv-group-item {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) minmax(0, 180px);
	gap: 16px;
	padding: 10px 0;
	border-top: 1px solid var(--rule-soft);
	font-size: 16px;
	line-height: 1.5;
}

.cv-type {
	font: 400 13px/1.9 var(--sans);
	color: var(--muted);
	text-align: right;
}

/* Three columns don't fit on phones: the type moves below the title */
@media (max-width: 620px) {
	.cv-group-item { grid-template-columns: 56px minmax(0, 1fr); row-gap: 2px; }
	.cv-type { grid-column: 2; text-align: left; line-height: 1.5; }
	.cv-type:empty { display: none; }
}

/* Contact ----------------------------------------------------------------- */

.contact {
	padding: clamp(56px, 10vw, 160px) var(--gutter) 80px;
	display: flex;
	flex-direction: column;
	gap: clamp(56px, 8vw, 120px);
}

.contact-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.contact-email {
	font: 400 clamp(40px, 7vw, 120px)/1 var(--serif);
	letter-spacing: -.02em;
	overflow-wrap: anywhere;
}

.contact-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	border-top: 1px solid var(--ink);
	padding-top: 24px;
	font-size: 17px;
	line-height: 1.55;
}

.contact-column,
.contact-column-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-column-heading { font-weight: 600; }
.contact-column-text p { margin: 0; }