/*
	Site styles for the "Aubergine & Brass" design system.
	All colors, fonts, sizes, radii and borders come from /design/tokens.css
	(loaded before this file). Usage rules: /design/STYLE_GUIDE.md.
	No shadows, and hover changes color or border only, never position.
*/


/* FOUNDATIONS */

body {
	background: var(--ivory);
	color: var(--ink);
	font: var(--text-body);
	/* Keeps the footer at the bottom of short pages */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	flex-grow: 1;
}

strong {
	font-weight: 700;
}

em {
	font-style: italic;
}

/* Text selection: aubergine on brass (an approved pair) */
::selection {
	background: var(--brass);
	color: var(--aubergine);
}

/* Keep Korean words whole instead of breaking between syllables */
[lang="ko"] {
	word-break: keep-all;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-6);
	padding-right: var(--space-6);
}

@media (min-width: 800px) {
	.container {
		padding-left: var(--space-12);
		padding-right: var(--space-12);
	}
}

.section {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

@media (min-width: 800px) {
	.section {
		padding-top: var(--space-24);
		padding-bottom: var(--space-24);
	}
}

.section--ivory {
	background: var(--ivory);
}

.section--mauve {
	background: var(--mauve-mist);
}

/* The primary band: aubergine with ivory headings (see .on-dark in tokens.css) */
.section--aubergine {
	background: var(--aubergine);
}

.section--aubergine .section-title {
	color: var(--ivory);
}

/* The short brass line that starts a section, above its heading */
.rule {
	margin-bottom: var(--space-6);
}

.section-title, .page-title {
	font: var(--text-h1);
	color: var(--aubergine);
}

.page-title {
	margin-top: var(--space-3);
}

.section-intro {
	font: var(--text-lead);
	color: var(--muted);
	max-width: 60ch;
	margin-top: var(--space-4);
}

@media (max-width: 599px) {
	.section-title, .page-title {
		font-size: 34px;
		line-height: 40px;
	}
}

.card-title {
	font: var(--text-h3);
	color: var(--aubergine);
}

.card-body {
	color: var(--muted);
	margin-top: var(--space-3);
}

.icon {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.link-arrow {
	color: var(--plum);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-top: var(--space-8);
}


/* REVEAL ON SCROLL (see site-footer.php). Only hidden when JS is running. A fade, no movement. */

.js [data-reveal] {
	opacity: 0;
	transition: opacity .8s ease;
}

.js [data-reveal].is-visible {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1;
		transition: none;
	}
}


/* BRAND MARK AND WORDMARK (see brandMark and wordmark in config.php).
   The mark is the one filled badge in the system: brass lines on plum, a plum that glows. */

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-card);
	background: var(--plum);
	color: var(--brass);
}

.brand-mark svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.brand-mark--large {
	width: 72px;
	height: 72px;
	border-radius: 14px;
}

.brand-mark--large svg {
	width: 52px;
	height: 52px;
	stroke-width: 1.8;
}

.brand-dot {
	color: var(--brass);
}


/* SITE HEADER */

.site-header {
	background: var(--aubergine);
	position: sticky;
	top: 0;
	z-index: 10;
}

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	min-height: 76px;
}

.site-logo, .footer-name {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-height: var(--tap-target-min);
	font: 500 24px/1 var(--font-display);
	color: var(--ivory);
	text-decoration: none;
}

.site-logo:hover {
	color: var(--ivory);
}

.site-nav {
	display: flex;
	gap: var(--space-8);
}

.site-nav a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target-min);
	font: 500 15px/1 var(--font-body);
	color: var(--ivory);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 8px;
	transition: text-decoration-color var(--transition);
}

.site-nav a:hover, .site-nav a.is-active {
	color: var(--ivory);
	text-decoration-color: var(--brass);
}

.nav-toggle {
	display: none;
	min-height: var(--tap-target-min);
	padding: 0 var(--space-4);
	font: var(--text-button);
	color: var(--ivory);
	background: transparent;
	border: 1px solid var(--brass);
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: background var(--transition);
}

.nav-toggle:hover {
	background: var(--aubergine-deep);
}

/* Mobile: the nav collapses behind the Menu button */
@media (max-width: 599px) {
	.js .nav-toggle {
		display: inline-flex;
		align-items: center;
	}

	.js .site-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		gap: 0;
		padding-bottom: var(--space-4);
	}

	.js .site-nav.is-open {
		display: flex;
	}

	.js .site-nav a {
		width: fit-content;
	}
}


/* HERO */

.hero {
	background: var(--ivory);
	padding-top: var(--space-12);
	padding-bottom: var(--space-18);
}

@media (min-width: 800px) {
	.hero {
		padding-top: var(--space-18);
		padding-bottom: var(--space-24);
	}
}

.hero-inner {
	display: grid;
	gap: var(--space-8);
}

.hero-photo img {
	width: 112px;
	height: 112px;
	object-fit: cover;
	border: var(--border);
	border-radius: var(--radius-card);
}

@media (min-width: 900px) {
	.hero-inner {
		grid-template-columns: 7fr 4fr;
		align-items: center;
		gap: var(--space-12);
	}

	.hero-photo {
		order: 2;
	}

	.hero-photo img {
		width: 100%;
		height: auto;
	}
}

.hero-title {
	font: var(--text-hero);
	font-size: 72px;
	line-height: 76px;
	letter-spacing: -0.015em;
	color: var(--aubergine);
	max-width: 16ch;
	margin-top: var(--space-6);
}

@media (max-width: 1099px) {
	.hero-title {
		font-size: 58px;
		line-height: 64px;
	}
}

@media (max-width: 799px) {
	.hero-title {
		font-size: 44px;
		line-height: 50px;
	}
}

@media (max-width: 399px) {
	.hero-title {
		font-size: 38px;
		line-height: 44px;
	}
}

.hero-lead {
	font: var(--text-lead);
	color: var(--ink);
	max-width: 52ch;
	margin-top: var(--space-6);
}

/* Language switcher: cycles the words with JS; the plain list is shown
   to screen readers, without JS, and when reduced motion is requested.
   Plum, since brass is never text on a light background. */
.language-cycle {
	display: none;
}

.language-list span, .language-cycle {
	font-weight: 500;
	color: var(--plum);
}

.js .language-cycle {
	display: inline-grid;
	vertical-align: bottom;
}

.js .language-cycle span {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity .5s ease;
}

.js .language-cycle span.is-active {
	opacity: 1;
}

.js .language-list {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.js .language-cycle {
		display: none;
	}

	.js .language-list {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}


/* SERVICES */

.services-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	margin-top: var(--space-12);
}

@media (min-width: 900px) {
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}
}

.service-card {
	display: flex;
	flex-direction: column;
}

.service-card .card-title {
	margin-top: var(--space-6);
}

.service-card .card-body {
	margin-bottom: var(--space-6);
}

.card__price {
	margin-top: auto;
}

/* Service cards on the aubergine band: outlined in plum, brass details, ivory text */
.on-dark .service-card {
	background: transparent;
	border-color: var(--plum);
}

.on-dark .service-card:hover {
	border-color: var(--brass);
}

.on-dark .card-title {
	color: var(--ivory);
}

.on-dark .card-body {
	color: var(--on-dark-muted);
}

.on-dark .icon-ring {
	color: var(--brass);
}

.on-dark .card__price {
	color: var(--brass);
	border-top-color: var(--plum);
}


/* PROJECTS */

.project-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	margin-top: var(--space-12);
}

@media (min-width: 900px) {
	.project-list {
		gap: var(--space-18);
	}
}

/* Phones: one card per project. The title tab sits on top, then the image and the text,
   joined into a single bordered block. */
.project {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

/* Dissolved on phones, so the tab, image and card are ordered directly by the grid */
.project-caption {
	display: contents;
}

.project-tab {
	order: -1;
	justify-self: start;
	max-width: 100%;
	font: 500 20px/28px var(--font-display);
	color: var(--ivory);
	background: var(--aubergine);
	padding: 10px var(--space-4);
	border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.project-media {
	background: var(--mauve-mist);
	border: var(--border);
	border-bottom: 0;
	border-radius: 0 var(--radius-card) 0 0;
	padding: var(--space-3);
}

.project-card {
	background: var(--white);
	border: var(--border);
	border-radius: 0 0 var(--radius-card) var(--radius-card);
	padding: var(--space-6);
}

.project-card p {
	color: var(--ink);
	max-width: 60ch;
}

.project-card .link-arrow {
	display: inline-block;
	margin-top: var(--space-6);
}

/* Desktop: a wide image frame, with the caption (title tab on the card's top-left corner, then
   the paragraph card) overlapping its bottom corner, slightly onto the mockup. Odd projects put
   the caption on the left, even projects on the right. The mockup shifts away from the caption
   so the caption covers mostly empty frame. */
@media (min-width: 900px) {
	.project {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		/* How far the caption rises into the frame: a one-line tab (56px) plus a small overlap,
		   so only a sliver of the white card sits on the image frame */
		--caption-rise: 68px;
	}

	.project-media {
		grid-column: 1 / -1;
		grid-row: 1;
		border: 0;
		border-radius: var(--radius-card);
		padding: var(--space-12) 0;
	}

	.project-media > * {
		width: 72%;
		margin-left: auto;
		margin-right: 4%;
	}

	.project-caption {
		display: block;
		grid-column: 1 / 7;
		grid-row: 2;
		position: relative;
		z-index: 3;
		margin-top: calc(-1 * var(--caption-rise));
		margin-left: var(--space-8);
	}

	.project-tab {
		display: block;
		width: fit-content;
		font-size: 24px;
		line-height: 32px;
		padding: var(--space-3) var(--space-6);
	}

	.project-card {
		border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
		padding: var(--space-7);
	}

	.project:nth-child(even) .project-media > * {
		margin-left: 4%;
		margin-right: auto;
	}

	.project:nth-child(even) .project-caption {
		grid-column: 7 / -1;
		margin-left: 0;
		margin-right: var(--space-8);
	}
}


/* Video inside the laptop mockup: the frame image (see-through screen) sits over the video.
   The screen position matches laptop-frame-*.webp. */
.laptop-video {
	position: relative;
}

.laptop-frame {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
}

.project-video {
	display: block;
	width: 100%;
	height: auto;
	background: var(--white);
}

.laptop-video .project-video {
	position: absolute;
	left: 16.938%;
	top: 10.397%;
	width: 66.188%;
	height: 65.809%;
	object-fit: cover;
}

/* Plain video clips in a case study (framed like the detail screenshots) */
.case-clip {
	position: relative;
}

.video-toggle {
	position: absolute;
	z-index: 2;
	right: var(--space-3);
	bottom: var(--space-3);
	min-height: 36px;
	padding: 0 var(--space-4);
	font: var(--text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ivory);
	background: var(--aubergine);
	border: 1px solid var(--aubergine);
	border-radius: var(--radius-button);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

.video-toggle:hover {
	background: var(--plum);
	border-color: var(--plum);
}

.laptop-video .video-toggle {
	right: calc(100% - 83.126% + var(--space-3));
	bottom: calc(100% - 76.206% + var(--space-3));
}


/* CASE STUDY PAGE */

/* Case study content sits in one centered column (about 12-14 words per line), so every text
   block shares the same left edge. The lead image spans the container; detail shots are a bit
   wider than the column and centered on it. */
.case-study {
	--case-column: 720px;
}

.case-study .container > :not(.case-media):not(.back-button):not(.case-section):not(.case-block),
.case-section > :not(.case-shot):not(.case-clip),
.case-block > .case-text {
	max-width: var(--case-column);
	margin-left: auto;
	margin-right: auto;
}

.case-study .case-shot {
	margin-left: auto;
	margin-right: auto;
}

.case-study .section-intro,
.case-study .case-text,
.case-study .case-list,
.case-study .case-callout p:not(.label) {
	font: var(--text-lead);
}

.case-study .section-intro {
	color: var(--ink);
}

/* The only back link: sticks to the bottom left while reading, then rests at the end of the case study.
   It gets a solid fill so the text it floats over doesn't show through. */
.back-button {
	position: sticky;
	bottom: var(--space-6);
	z-index: 5;
	margin-top: var(--space-12);
	margin-left: var(--space-6);
	background: var(--ivory);
}

.case-media {
	background: var(--mauve-mist);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	margin-top: var(--space-12);
}

@media (min-width: 800px) {
	.case-media {
		padding: var(--space-12);
	}
}

/* Detail screenshots have their own backgrounds, so they get a simple frame instead of a mauve panel */
.case-shot {
	width: 80%;
	margin-top: var(--space-12);
	border: var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

@media (max-width: 599px) {
	.case-shot {
		width: 100%;
	}
}

.case-text {
	font: var(--text-lead);
	color: var(--ink);
	max-width: 60ch;
	margin-top: var(--space-6);
}

/* Project facts: role, stack, timeline */
.case-facts {
	display: grid;
	gap: var(--space-6);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: var(--border);
}

@media (min-width: 800px) {
	.case-facts {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-8);
	}
}

.case-facts dt {
	font: var(--text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brass-text);
}

.case-facts dd {
	color: var(--ink);
	margin-top: var(--space-2);
}

/* Longer case studies are split into sections with their own heading and media */
.case-section {
	margin-top: var(--space-18);
}

.case-heading {
	font: var(--text-h2);
	color: var(--aubergine);
}

.case-section .case-text:first-of-type {
	margin-top: var(--space-4);
}

.case-section .case-text + .case-text {
	margin-top: var(--space-4);
}

.case-callout {
	margin-top: var(--space-6);
	padding: var(--space-6);
	background: var(--mauve-mist);
	border: var(--border);
	border-radius: var(--radius-card);
}

/* Brass Text is too light on Mauve Mist, so this label is plum */
.case-callout .label {
	color: var(--plum);
}

.case-callout p:not(.label) {
	margin-top: var(--space-2);
}

.case-list {
	max-width: 60ch;
	margin-top: var(--space-4);
	padding-left: var(--space-6);
	list-style: disc;
	font: var(--text-lead);
}

.case-list li + li {
	margin-top: var(--space-3);
}

@media (max-width: 599px) {
	.case-heading {
		font-size: 26px;
		line-height: 32px;
	}
}


/* HOW I WORK */

.process-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	margin-top: var(--space-12);
}

@media (min-width: 650px) {
	.process-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1000px) {
	.process-steps {
		grid-template-columns: repeat(4, 1fr);
	}
}

.process-number {
	font: 500 20px/1 var(--font-display);
	color: var(--plum);
	margin-bottom: var(--space-6);
}


/* CONTACT BAND: the closing call to action on every page, an aubergine block with the brass button */

.contact-band {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
	background: var(--aubergine);
	border-radius: var(--radius-card);
	padding: var(--space-8);
}

@media (min-width: 800px) {
	.contact-band {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		padding: var(--space-12) var(--space-18);
	}
}

.contact-band .section-title {
	color: var(--ivory);
	font: var(--text-h2);
	font-size: 38px;
	line-height: 46px;
}

@media (max-width: 599px) {
	.contact-band .section-title {
		font-size: 30px;
		line-height: 38px;
	}
}

.contact-band p {
	font: var(--text-lead);
	color: var(--on-dark-muted);
	margin-top: var(--space-2);
}

.contact-band .btn {
	flex-shrink: 0;
}


/* ABOUT PAGE */

.about-inner, .contact-page-inner {
	display: grid;
	gap: var(--space-12);
}

@media (min-width: 900px) {
	.about-inner {
		grid-template-columns: 4fr 7fr;
		align-items: start;
	}

	.about-photo {
		position: sticky;
		top: 124px;
	}
}

.about-photo img {
	display: block;
	width: 100%;
	max-width: 420px;
	height: auto;
	border: var(--border);
	border-radius: var(--radius-card);
}

.about-text p, .contact-page-text p {
	max-width: 62ch;
}

.about-text p + p {
	margin-top: var(--space-4);
}

.about-heading {
	font: var(--text-h3);
	color: var(--aubergine);
	margin-top: var(--space-12);
	margin-bottom: var(--space-3);
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

/* Thovon numbers on the About page: three figures in a row, divided by thin lines.
   The markup lists the label first (dt) for screen readers; the number is shown on top. */
.stat-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 62ch;
	margin-top: var(--space-8);
	margin-bottom: var(--space-8);
	border-top: var(--border);
	border-bottom: var(--border);
}

.stat-strip div {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
	gap: var(--space-2);
	padding: var(--space-6) var(--space-4);
}

.stat-strip div + div {
	border-left: var(--border);
}

.stat-strip dd {
	font: 500 40px/1 var(--font-display);
	color: var(--aubergine);
}

.stat-strip dt {
	font: var(--text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brass-text);
}

@media (max-width: 599px) {
	.stat-strip div {
		padding: var(--space-4) var(--space-3);
	}

	.stat-strip dd {
		font-size: 30px;
	}
}

/* "Why Glowing Plum?" card on the About page */
.name-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-6);
	max-width: 62ch;
	margin-top: var(--space-12);
}

/* Not a link, so its border stays quiet on hover */
.name-card:hover {
	border-color: var(--line);
}

.name-card .card-body {
	margin-top: var(--space-2);
}

.name-card .card-body + .card-body {
	margin-top: var(--space-3);
}

@media (max-width: 599px) {
	.name-card {
		flex-direction: column;
		gap: var(--space-4);
	}
}


/* CONTACT PAGE */

@media (min-width: 900px) {
	.contact-page-inner {
		grid-template-columns: 5fr 7fr;
		align-items: start;
	}
}

.next-steps {
	list-style: decimal;
	padding-left: var(--space-6);
}

.next-steps li + li {
	margin-top: var(--space-2);
}

.contact-email {
	margin-top: var(--space-8);
}

.contact-form-card {
	/* Clears the sticky header when the page jumps to the form */
	scroll-margin-top: 100px;
	background: var(--white);
	border: var(--border);
	border-radius: var(--radius-card);
	overflow: hidden;
}

.contact-form, .form-success {
	padding: var(--space-7);
}

@media (min-width: 800px) {
	.contact-form, .form-success {
		padding: var(--space-12);
	}
}

.field + .field {
	margin-top: var(--space-6);
}

.field label {
	display: block;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: var(--space-2);
}

.field-optional {
	font-weight: 400;
	color: var(--muted);
}

.field input, .field select, .field textarea {
	display: block;
	width: 100%;
	min-height: var(--tap-target-min);
	padding: var(--space-3) 14px;
	font: var(--text-body);
	color: var(--ink);
	background: var(--ivory);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-input);
	transition: border-color var(--transition);
}

.field input:hover, .field select:hover, .field textarea:hover {
	border-color: var(--aubergine);
}

.field textarea {
	resize: vertical;
	min-height: 150px;
}

.field input::placeholder, .field textarea::placeholder {
	color: var(--muted);
}

/* Errors use text plus a thicker, darker border, not color alone */
.field [aria-invalid="true"] {
	border: 2px solid var(--plum);
}

.field-error, .form-alert {
	font: var(--text-small);
	font-weight: 500;
	color: var(--plum);
	background: var(--mauve-mist);
	border-radius: var(--radius-chip);
	padding: var(--space-2) var(--space-3);
	margin-top: var(--space-2);
}

.form-alert {
	font: var(--text-body);
	font-weight: 500;
	margin: 0 0 var(--space-6);
	padding: var(--space-3) var(--space-4);
}

/* Spam trap: kept out of sight and out of the tab order */
.field-trap {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form .btn {
	margin-top: var(--space-8);
}

.form-note {
	font: var(--text-small);
	color: var(--muted);
	margin-top: var(--space-6);
}

.form-success p {
	margin-top: var(--space-3);
}

.form-success .link-arrow {
	display: inline-block;
	margin-top: var(--space-6);
}


/* LEGAL PAGES */

.legal .container {
	max-width: 760px;
}

.legal-date {
	font: var(--text-small);
	color: var(--muted);
	margin-top: var(--space-2);
}

.legal p, .legal ul {
	max-width: 65ch;
	margin-top: var(--space-4);
}

.legal ul {
	list-style: disc;
	padding-left: var(--space-6);
}

.legal li + li {
	margin-top: var(--space-2);
}

.legal-heading {
	font: var(--text-h3);
	color: var(--aubergine);
	margin-top: var(--space-12);
}


/* FOOTER */

.site-footer {
	background: var(--aubergine-deep);
	color: var(--ivory);
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

.site-footer-inner {
	display: grid;
	gap: var(--space-8);
}

@media (min-width: 800px) {
	.site-footer-inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}

	.footer-copyright {
		grid-column: 1 / -1;
	}
}

.footer-identity {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

/* Fixed size so the lazy-loaded photo's space is reserved and the footer doesn't jump */
.footer-photo {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	flex-shrink: 0;
}

.footer-name {
	font-size: 22px;
	min-height: 0;
}

.footer-role {
	font: var(--text-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--brass);
	margin-top: var(--space-3);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
}

.footer-links a {
	display: flex;
	align-items: center;
	min-height: var(--tap-target-min);
	font-weight: 500;
	color: var(--ivory);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 8px;
	transition: text-decoration-color var(--transition);
}

.footer-links a:hover {
	color: var(--ivory);
	text-decoration-color: var(--brass);
}

.footer-copyright {
	font: var(--text-small);
	color: var(--on-dark-muted);
	padding-top: var(--space-6);
	border-top: 1px solid var(--plum);
}