/* ===================================================================
   Portfolio theme — adapted from "Björk" by Anders Norén
   =================================================================== */

/* Epilogue — single site-wide font (headings + body). Variable font,
   one file per subset covers the whole 300-700 weight range. */
@font-face {
	font-family: "Epilogue";
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/Epilogue-vietnamese-variable.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Epilogue";
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
	src: url("../assets/fonts/Epilogue-latin-variable.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;
}

:root {
	/* Corner style for the whole site: square. Change here to round everything at once. */
	--radius: 0;
	--color-foreground: #111111;
	--color-background: #FFFFFF;
	--color-primary: #4D4CF2;
	--color-secondary: #5F5E5E;
	--color-tertiary: #E2E2E2;
	--color-quaternary: #F3F2F2;

	--font-body: "Epilogue", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-heading: "Epilogue", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

	--ls-body: -0.01em;
	--ls-heading: -0.02em;
	--ls-gigantic: -0.03em;

	--lh-body: 1.5em;
	--lh-heading-large: 1.15;
	--lh-heading-small: 1.25;

	--gutter: clamp(24px, 5vw, 64px);
	--sidebar-width: 260px;
	--content-max: 1120px;
	--content-narrow: 700px;

	--fs-tiny: clamp(14px, 1.4vw, 16px);
	--fs-small: clamp(16px, 1.6vw, 18px);
	--fs-medium: clamp(17px, 1.8vw, 21px);
	--fs-large: clamp(21px, 2.2vw, 24px);
	--fs-xl: clamp(24px, 2.8vw, 32px);
	--fs-h1: clamp(36px, 6vw, 64px);
	--fs-h2: clamp(33px, 5vw, 56px);
	--fs-h3: clamp(30px, 4.2vw, 48px);
	--fs-h4: clamp(27px, 3.4vw, 40px);
	--fs-h5: clamp(24px, 2.8vw, 32px);
	--fs-h6: clamp(21px, 2.2vw, 27px);
}

:root[data-theme="dark"] {
	--color-foreground: #EDEDED;
	--color-background: #17171B;
	--color-primary: #8382FF;
	--color-secondary: #A0A0A0;
	--color-tertiary: #313136;
	--color-quaternary: #222226;
}

* { box-sizing: border-box; }

body { transition: background-color 0.2s ease, color 0.2s ease; }

html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-medium);
	font-weight: 400;
	letter-spacing: var(--ls-body);
	line-height: var(--lh-body);
	color: var(--color-foreground);
	background: var(--color-background);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-underline-offset: 0.2em; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: var(--ls-gigantic);
	line-height: var(--lh-heading-large);
	margin: 0.75em 0 0.6em;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); line-height: var(--lh-heading-small); }
h6, .h6 { font-size: var(--fs-h6); line-height: var(--lh-heading-small); }

p { margin: 0 0 1em; }

/* Featured work list (portfolio landing page) ---------------------------- */

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

.featured-item {
	display: flex;
	align-items: center;
	gap: 1.5em;
	padding: 1.5em 0;
	border-bottom: 1px solid var(--color-tertiary);
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}

.featured-item:first-child { padding-top: 0; }
.featured-item:hover { opacity: 0.65; }

.featured-number { display: block; margin-bottom: 0.4em; font-size: 13px; font-weight: 400; letter-spacing: 0.04em; color: var(--color-secondary); }

.featured-thumb {
	flex: 0 0 auto;
	width: 168px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius);
	background: var(--color-quaternary);
}

@media (max-width: 600px) {
	.featured-thumb { width: 96px; border-radius: var(--radius); }
	.featured-info .h3 { font-size: 22px; line-height: var(--lh-heading-small); }
}

.featured-info { flex: 1 1 auto; min-width: 0; }
.featured-info .h3 { margin: 0 0 0.25em; }
.featured-tags { color: var(--color-secondary); font-size: var(--fs-small); margin: 0; }
.featured-result { color: var(--color-foreground); font-size: 13px; font-weight: 400; letter-spacing: 0.01em; }
.featured-summary { font-size: 15px; line-height: 1.55; margin: 0.35em 0 0.6em; max-width: 34em; color: var(--color-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* The first three projects get room for the work itself */
.featured-lead { align-items: center; padding: 2.5em 0; }
.featured-lead:first-child { padding-top: 0; }
.featured-lead .featured-info { flex: 1 1 0; }
.featured-lead .featured-thumb { width: 50%; border-radius: var(--radius); }
.featured-info .h3 { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.featured-lead .featured-summary { -webkit-line-clamp: 3; line-clamp: 3; }

@media (max-width: 760px) {
	.featured-lead { flex-wrap: wrap; gap: 1em; }
	.featured-lead .featured-thumb { order: -1; width: 100%; }
	.featured-lead .featured-info { flex-basis: 100%; }
	.featured-summary { display: none; }
	.featured-lead .featured-summary { display: block; }
}
/* Result facts sit at the foot of the card as quiet metadata, on one shared line across cards */
.card-body .card-result {
	margin-top: auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-tertiary);
	font-size: var(--fs-tiny);
	font-weight: 400;
	color: var(--color-secondary);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}
.card-body .card-result + div { margin-top: 0; padding-top: 0; }

.archive-link { text-align: center; margin: 0 0 1em; font-size: var(--fs-tiny); }
.archive-link a { text-decoration: none; color: var(--color-secondary); }
.archive-link a:hover { color: var(--color-foreground); }

/* Selected client work: breadth at a glance (portfolio landing page) ----- */

.client-wall-stats {
	font-size: var(--fs-medium);
	font-weight: 400;
	margin: 0 0 2em;
}

.client-groups {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2em;
}

.client-group-title {
	font-size: var(--fs-tiny);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--color-secondary);
	margin: 0 0 0.75em;
	padding-bottom: 0.75em;
	border-bottom: 1px solid var(--color-foreground);
}

.client-list { list-style: none; margin: 0; padding: 0; }

.client-item {
	display: block;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--color-tertiary);
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s ease;
}

.client-item:hover { opacity: 0.65; }
.client-name { display: block; font-weight: 400; }
.client-work { display: block; font-size: var(--fs-tiny); color: var(--color-secondary); }

@media (max-width: 900px) { .client-groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .client-groups { grid-template-columns: 1fr; gap: 1.5em; } }

/* Next project link at the end of case pages ----------------------------- */

.next-project {
	display: flex;
	align-items: center;
	gap: 1.5em;
	padding: 1.5em 0;
	border-top: 1px solid var(--color-foreground);
	border-bottom: 1px solid var(--color-tertiary);
	text-decoration: none;
	color: inherit;
}

.next-project-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.35em; }
.next-project-text .eyebrow { margin: 0; }
.next-project-title { font-size: var(--fs-h4); font-weight: 400; line-height: var(--lh-heading-small); letter-spacing: var(--ls-heading); }
.next-project-thumb { flex: 0 0 auto; width: 200px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.next-project-arrow { flex: 0 0 auto; font-size: var(--fs-h4); transition: transform 0.2s ease; }
.next-project:hover .next-project-arrow { transform: translateX(6px); }
.next-project:hover .next-project-title { text-decoration: underline; text-underline-offset: 0.15em; }

@media (max-width: 600px) {
	.next-project { gap: 1em; }
	.next-project-title { font-size: 22px; }
	.next-project-thumb { width: 96px; border-radius: var(--radius); }
	.next-project-arrow { display: none; }
}

/* Related project box at the end of a blog post */
.related-project {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: 1.5em;
	align-items: center;
	margin-top: 2.5em;
	padding: 1em;
	background: var(--color-quaternary);
	border-radius: var(--radius);
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.related-project img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.related-project-text { display: flex; flex-direction: column; gap: 0.4em; min-width: 0; }
.related-project-text .eyebrow { margin: 0; }
.related-project-title { font-size: var(--fs-h5, 1.375rem); font-weight: 400; line-height: var(--lh-heading-small); }
.related-project-link { font-weight: 400; font-size: var(--fs-small); }
.related-project:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.related-project:hover .related-project-link { text-decoration: underline; text-underline-offset: 0.15em; }
.related-project:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

@media (max-width: 600px) {
	.related-project { grid-template-columns: 1fr; gap: 1em; }
}

.not-found { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; }
.not-found .hero-buttons { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 0.5em; }

/* Skip link: hidden until focused by keyboard ---------------------------- */

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100;
	padding: 0.6em 1em;
	border-radius: var(--radius);
	background: var(--color-foreground);
	color: var(--color-background);
	font-weight: 400;
	text-decoration: none;
	transform: translateY(-200%);
}

.skip-link:focus { transform: none; outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Floating back-to-top button ------------------------------------------- */

.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 50;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-tertiary);
	border-radius: var(--radius);
	background: var(--color-background);
	color: var(--color-foreground);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.back-to-top:hover { background: var(--color-foreground); color: var(--color-background); }
.back-to-top:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (max-width: 560px) { .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; } }

/* Role / Responsibilities / Team credits (case pages) -------------------- */

/* Credits table: always a clear gap before the case text that follows */
.project-credits {
	margin: 0 0 3em;
	border-top: 1px solid var(--color-foreground);
}

.credit-row {
	display: grid;
	grid-template-columns: 11em 1fr;
	gap: 1em;
	padding: 0.6em 0;
	border-bottom: 1px solid var(--color-tertiary);
}

.project-credits dt {
	font-size: var(--fs-tiny);
	font-weight: 400;
	color: var(--color-secondary);
}

.project-credits dd { margin: 0; font-size: var(--fs-tiny); }

@media (max-width: 560px) { .credit-row { grid-template-columns: 1fr; gap: 0.15em; } }

.eyebrow {
	display: inline-block;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 0.5em;
}

/* Buttons ---------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-size: var(--fs-small);
	font-weight: 400;
	line-height: var(--lh-heading-large);
	padding: 0.75em 1.5em;
	border-radius: var(--radius);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.btn-primary {
	background: var(--color-primary);
	color: #fff;
}

.btn-primary:hover { opacity: 0.85; }

.btn-outline {
	background: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn-outline:hover { background: var(--color-primary); color: #fff; }

.btn-dark {
	background: var(--color-foreground);
	color: var(--color-background);
	font-size: var(--fs-tiny);
}

.btn-dark:hover { opacity: 0.85; }

/* Separator ---------------------------------------------------------- */

.separator {
	height: 10px;
	width: 100%;
	background-color: transparent;
	background-image: linear-gradient(-45deg, currentColor 25%, transparent 25%, transparent 50%, currentColor 50%, currentColor 75%, transparent 75%, transparent);
	background-size: 5px 5px;
	color: var(--color-tertiary);
	border: none;
	margin: 0;
}

.separator-small {
	height: 10px;
	width: 60px;
	margin: 0 auto;
	background-color: transparent;
	background-image: linear-gradient(-45deg, currentColor 25%, transparent 25%, transparent 50%, currentColor 50%, currentColor 75%, transparent 75%, transparent);
	background-size: 5px 5px;
	color: var(--color-secondary);
}

/* Layout: sidebar + content ------------------------------------------ */

.layout {
	display: flex;
	align-items: flex-start;
	max-width: 1680px;
	margin: 0 auto;
	padding: var(--gutter);
	gap: var(--gutter);
}

.sidebar {
	flex: 0 0 var(--sidebar-width);
	position: sticky;
	top: var(--gutter);
	display: flex;
	flex-direction: column;
	gap: 2em;
	min-height: calc(100vh - (var(--gutter) * 2));
}

.sidebar .site-title {
	font-size: var(--fs-h5);
	font-weight: 400;
	text-decoration: none;
	letter-spacing: var(--ls-heading);
}

.sidebar-nav {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	font-size: var(--fs-large);
}

.sidebar-nav a {
	text-decoration: none;
	color: var(--color-foreground);
	padding: 0.15em 0;
}

.sidebar-nav a:hover,
.sidebar-nav a.is-active { text-decoration: underline; }

.sidebar-bottom {
	display: flex;
	flex-direction: column;
	gap: 1em;
	margin-top: auto;
}

.sidebar-social {
	display: flex;
	gap: 1em;
}

.sidebar-social a {
	color: var(--color-foreground);
	display: inline-flex;
}

.sidebar-social svg { width: 20px; height: 20px; }

/* Language toggle ------------------------------------------------------ */

html[data-i18n-loading] body { visibility: hidden; }

.lang-toggle {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--color-tertiary);
	border-radius: var(--radius);
	padding: 3px;
	width: fit-content;
}

.lang-btn {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--color-secondary);
	font-family: inherit;
	font-size: var(--fs-tiny);
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 0.5em 0.85em;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.lang-btn:hover { color: var(--color-foreground); }

.lang-btn.is-active {
	background: var(--color-primary);
	color: #fff;
}

.lang-btn.is-active:hover { color: #fff; }

/* Theme toggle ---------------------------------------------------------- */

.theme-toggle {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border: none;
	border-radius: var(--radius);
	background: var(--color-tertiary);
	color: var(--color-foreground);
	cursor: pointer;
	padding: 0;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover { color: var(--color-primary); }

.theme-toggle .theme-icon { width: 17px; height: 17px; }

.theme-toggle .theme-icon-moon { display: none; }

:root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }

.mobile-header-right {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.content {
	flex: 1 1 0%;
	min-width: 0;
}

/* Mobile header ------------------------------------------------------ */

.mobile-header {
	display: none;
	align-items: center;
	justify-content: space-between;
	padding: var(--gutter) var(--gutter) 0;
}

.mobile-header .site-title {
	font-size: var(--fs-h6);
	font-weight: 400;
	text-decoration: none;
}

.menu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5em;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.menu-toggle span {
	display: block;
	width: 26px;
	height: 2px;
	background: var(--color-foreground);
}

.mobile-nav {
	display: none;
	flex-direction: column;
	gap: 0.25em;
	padding: 1.5em var(--gutter) 0;
	font-size: var(--fs-large);
}

.mobile-nav a {
	text-decoration: none;
	color: var(--color-foreground);
	padding: 0.35em 0;
	border-bottom: 1px solid var(--color-tertiary);
}

.mobile-nav.is-open { display: flex; }

@media (max-width: 900px) {
	.layout { flex-direction: column; padding-top: 0; }
	.sidebar { display: none; }
	.content { width: 100%; }

	/* Sticky header: hides while scrolling down, slides back on scroll up */
	.mobile-header {
		display: flex;
		position: sticky;
		top: 0;
		z-index: 40;
		padding: 14px var(--gutter);
		background: var(--color-background);
		border-bottom: 1px solid transparent;
		transition: transform 0.25s ease, border-color 0.2s ease;
	}
	.mobile-header.is-scrolled { border-bottom-color: var(--color-tertiary); }
	.mobile-header.is-hidden { transform: translateY(-100%); }

	/* Open menu: full-screen panel under the header */
	.mobile-nav.is-open {
		position: fixed;
		top: var(--mobile-header-h, 64px);
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 39;
		overflow-y: auto;
		padding: 1em var(--gutter) 2em;
		background: var(--color-background);
	}
	.mobile-nav a { padding: 0.6em 0; }
	.mobile-nav a.is-active { color: var(--color-primary); font-weight: 400; }
	body.menu-open { overflow: hidden; }
	body.menu-open .back-to-top { display: none; }

	/* Burger turns into a close icon while the menu is open */
	.menu-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; }
	.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* In-page sticky bars sit below the header while it is visible */
	.toc-bar, .detail-back { top: var(--header-offset, 0px); transition: top 0.25s ease; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	.mobile-header, .toc-bar, .detail-back { transition: none; }
}

/* Hero ---------------------------------------------------------------- */

.hero {
	background: var(--color-quaternary);
	border-radius: var(--radius);
	padding: clamp(40px, 10vh, 96px) clamp(24px, 6vw, 64px);
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.5rem;
}

.hero h1 { margin-top: 0; }

/* Home: compact hero, selected work, notes ------------------------------- */

/* Home: editorial grid ---------------------------------------------------- */

.text-link { display: inline-block; align-self: flex-start; font-size: 14px; font-weight: 400; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.text-link:hover { opacity: 0.7; }

/* Small stacked words beside an image */
.hs-stack { margin: 0; font-size: 10px; font-weight: 400; letter-spacing: 0.16em; line-height: 1.55; text-transform: uppercase; white-space: pre-line; color: var(--color-secondary); }
.hs-stack::after { content: ""; display: block; width: 24px; height: 1px; margin-top: 1.1em; background: currentColor; }
.hs-stack-light { color: #fff; }

/* Hero */
/* Hero as a newspaper front: masthead, headline across, deck in columns */
.hx { padding: clamp(4px, 1.5vh, 16px) 0 clamp(32px, 6vh, 56px); }
.hx-masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-top: 3px solid var(--color-foreground); border-bottom: 1px solid var(--color-foreground); }
.hx-kicker, .hx-edition { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; }
.hx-edition { color: var(--color-secondary); }
.hx-title { margin: clamp(20px, 3.5vh, 36px) 0 clamp(20px, 3.5vh, 32px); font-size: clamp(40px, 6.6vw, 96px); line-height: 0.98; letter-spacing: -0.035em; font-weight: 400; }
.hx-deck { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-top: 1.5rem; border-top: 1px solid var(--color-tertiary); }
.hx-desc { margin: 0; font-size: 17px; line-height: 1.7; color: var(--color-foreground); column-count: 2; column-gap: 2rem; }
.hx-desc::first-letter { float: left; font-size: 3.4em; line-height: 0.85; padding: 0.06em 0.1em 0 0; font-weight: 400; }
.hx-side { display: flex; flex-direction: column; gap: 1.25rem; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--color-tertiary); }
.hx-facts { margin: 0; display: flex; flex-direction: column; }
.hx-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-tertiary); font-size: 14px; }
.hx-facts dt { color: var(--color-secondary); }
.hx-facts dd { margin: 0; text-align: right; }
@media (max-width: 1100px) { .hx-desc { column-count: 1; } }
@media (max-width: 760px) {
	.hx-deck { grid-template-columns: 1fr; }
	.hx-side { padding-left: 0; border-left: 0; }
	.hx-desc { font-size: 16px; }
	.hx-edition { display: none; }
}
.hx-buttons { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.25rem; }
.hx-btn { display: inline-flex; align-items: center; gap: 1.6em; padding: 0.85em 1.3em; border: 1px solid var(--color-primary); border-radius: var(--radius); font-size: 14px; font-weight: 400; text-decoration: none; transition: background 0.2s ease, color 0.2s ease; }
.hx-btn::after { content: "→"; }
.hx-btn-dl::after { content: "↓"; }
.hx-btn-primary { background: var(--color-primary); color: #fff; }
.hx-btn-primary:hover { background: transparent; color: var(--color-primary); }
.hx-btn-outline { color: var(--color-primary); }
.hx-btn-outline:hover { background: var(--color-primary); color: #fff; }

/* Numbered sections: label column, then the content */
.hs { display: grid; grid-template-columns: 190px minmax(0, 1fr); border-top: 1px solid var(--color-tertiary); padding: 1.5rem 0 2.75rem; }
.hs-label { display: flex; flex-direction: column; gap: 0.9rem; padding-right: 1.75rem; border-right: 1px solid var(--color-tertiary); }
.hs-num { font-size: 11px; color: var(--color-secondary); letter-spacing: 0.08em; }
.hs-title { margin: 0.6rem 0 0; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.05; font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em; }
.hs-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-secondary); }
.hs-label .text-link { margin-top: 0.5rem; }
.hs-body { position: relative; min-width: 0; padding-left: 1.75rem; padding-top: 2.25rem; }
.hs-corner { position: absolute; top: 0; right: 0; margin: 0; font-size: 10px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-secondary); }
.hs-corner-link { position: absolute; top: 0; right: 0; }

/* 01 Selected work */
.hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hw-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: inherit; }
.hw-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: opacity 0.2s ease; }
.hw-card:hover img { opacity: 0.88; }
.hw-meta { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); }
.hw-meta > div { display: flex; flex-direction: column; gap: 0.35rem; padding-left: 0.9rem; border-left: 1px solid var(--color-tertiary); }
.hw-num { font-size: 11px; color: var(--color-secondary); padding-top: 0.3rem; }
.hw-title { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.3; }
.hw-title span { display: inline-block; margin-left: 0.4em; font-weight: 400; transition: transform 0.2s ease; }
.hw-card:hover .hw-title span { transform: translateX(4px); }
.hw-line { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-secondary); }
.hw-result { margin: 0.35rem 0 0; font-size: 12px; font-weight: 400; }

/* 02 Worked with */
.hb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.hb-grid a { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.5em; background: var(--color-quaternary); font-size: 13px; text-align: center; text-decoration: none; color: inherit; transition: background 0.2s ease; }
.hb-grid a:hover { background: var(--color-tertiary); }

/* 03 About */
.ha { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; padding-top: 0; }
.ha-text { display: flex; flex-direction: column; gap: 1rem; }
.ha-text p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--color-secondary); }
.ha-visual { position: relative; }
.ha-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.ha-visual .hs-stack { position: absolute; top: 1.5rem; right: 1.5rem; }

/* 04 Notes on the craft */
.hn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hn-card { display: flex; flex-direction: column; gap: 0.75rem; padding: 0 1.25rem; border-left: 1px solid var(--color-tertiary); text-decoration: none; color: inherit; }
.hn-card:first-child { padding-left: 0; border-left: 0; }
.hn-card:last-child { padding-right: 0; }
.hn-card img { width: 100%; height: auto; aspect-ratio: 4 / 1.1; object-fit: cover; }
.hn-card img[src*="2bf1f94c6e235f7e"] { object-position: 85% 45%; }
.hn-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.hn-title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.hn-project { flex: 0 0 auto; font-size: 11px; color: var(--color-secondary); }
.hn-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-secondary); }
.hn-arrow { margin-top: auto; padding-top: 0.5rem; transition: transform 0.2s ease; }
.hn-card:hover .hn-arrow { transform: translateX(4px); }

/* 05 Outside of work */
.ho { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: start; padding-top: 0; }
.ho-image img { display: block; width: 100%; height: auto; aspect-ratio: 3.2 / 1; object-fit: cover; }

/* Footer with a small nav */
.hf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--color-tertiary); padding-top: 1.25rem; font-size: 12px; }
.hf-nav { display: flex; gap: 1.5rem; }
.hf-nav a { color: var(--color-secondary); text-decoration: none; }
.hf-nav a:hover { color: var(--color-foreground); }

@media (max-width: 1100px) {
	.hn-grid { grid-template-columns: 1fr; gap: 1.75rem; }
	.hn-card, .hn-card:first-child { padding: 0; border-left: 0; }
}
@media (max-width: 900px) {
	.hx { grid-template-columns: 1fr; }
	.hx-visual img { max-height: 320px; aspect-ratio: 16 / 10; }
	.hs { grid-template-columns: 1fr; gap: 1.25rem; }
	.hs-label { padding-right: 0; border-right: 0; }
	.hs-body { padding-left: 0; padding-top: 0; }
	.hs-corner, .hs-corner-link { position: static; display: inline-block; margin-bottom: 1rem; }
	.hw-grid { grid-template-columns: 1fr 1fr; }
	.ha { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.hw-grid { grid-template-columns: 1fr; }
	.hx-visual .hs-stack, .ho > .hs-stack { display: none; }
	.ho { grid-template-columns: 1fr; }
	.ho-image img { aspect-ratio: 16 / 9; }
	.hf-nav { gap: 1rem; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .hw-title span, .hn-arrow { transition: none; } }

.hero .hero-kicker { color: var(--color-secondary); font-size: var(--fs-medium); margin: 0; }
.hero .hero-buttons { display: flex; gap: 1em; flex-wrap: wrap; margin-top: 0.5em; }

/* Section spacing ------------------------------------------------------ */

.section {
	padding: clamp(32px, 7vh, 80px) 0;
}

.section-tight { padding: clamp(20px, 4vh, 48px) 0; }

.two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
}

@media (max-width: 700px) {
	.two-col { grid-template-columns: 1fr; }
}

/* Card grid (portfolio / feature cards) -------------------------------- */

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Hub pages: sub-cases as quiet image-led tiles. Thumbnails already carry
   a lot of type, so the tile adds only a small tag line and the title. */
.hub-cases .eyebrow { margin-bottom: 1.25rem; }

.hub-case-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2.5rem 2rem;
}

.hub-case {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	text-decoration: none;
	color: inherit;
}

.hub-case img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid var(--color-tertiary);
	margin-bottom: 0.6em;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hub-case-tags { font-size: var(--fs-tiny); color: var(--color-secondary); }
.hub-case-title { font-size: var(--fs-medium); font-weight: 400; line-height: var(--lh-heading-small); }
.hub-case:hover img { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.hub-case:hover .hub-case-title { text-decoration: underline; text-underline-offset: 0.15em; }
.hub-case:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius); }

@media (prefers-reduced-motion: reduce) { .hub-case img { transition: none; } .hub-case:hover img { transform: none; } }
@media (max-width: 600px) { .hub-case-grid { grid-template-columns: 1fr; gap: 2rem; } }

@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

.card {
	position: relative;
	background: var(--color-quaternary);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }

/* The card's button link stretches over the whole card, so image, title
   and text are all clickable while keyboard focus stays on one link. */
.card .btn::after { content: ""; position: absolute; inset: 0; }
.card:has(.btn):hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }
.card:has(.btn):hover img { transform: scale(1.03); }
.card:has(.btn:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.card, .card img { transition: none; }
	.card:has(.btn):hover, .card:has(.btn):hover img { transform: none; }
}

.card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.card-body h6, .card-body .h6 {
	margin: 0;
	line-height: 1.25;
	font-size: var(--fs-h6);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.card-body p {
	font-size: var(--fs-small);
	margin: 0;
	color: var(--color-foreground);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.card-body > div:last-child { margin-top: auto; padding-top: 0.25rem; }

.card-tags { display: flex; gap: 0.5em; flex-wrap: wrap; }

.tag {
	font-size: var(--fs-tiny);
	font-weight: 400;
	padding: 0.25em 0.75em;
	border-radius: var(--radius);
	background: var(--color-tertiary);
}

a.tag { color: inherit; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
a.tag:hover { background: var(--color-foreground); color: var(--color-background); }

#clients { scroll-margin-top: 24px; }

/* Blog list ------------------------------------------------------------ */

.post-card { display: flex; flex-direction: column; gap: 0.25em; }
.post-card > .tag { align-self: flex-start; }
.post-card img { border-radius: var(--radius); margin-bottom: 1em; aspect-ratio: 4/3; object-fit: cover; }
.post-date { color: var(--color-primary); font-weight: 400; font-size: var(--fs-small); }
.post-title { font-size: var(--fs-h6); margin: 0.15em 0; }
.post-title a { text-decoration: none; }
.post-title a:hover { text-decoration: underline; }
.post-excerpt { font-size: var(--fs-small); color: var(--color-secondary); }

/* Table of contents (in-page scroll nav) -------------------------------- */

.toc-bar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	padding: 1em 0;
	margin-bottom: 1em;
	background: var(--color-background);
	border-bottom: 1px solid var(--color-tertiary);
}

.toc-link {
	font-size: var(--fs-tiny);
	font-weight: 400;
	text-decoration: none;
	color: var(--color-secondary);
	padding: 0.35em 0.9em;
	border-radius: var(--radius);
	background: var(--color-tertiary);
	transition: background 0.15s ease, color 0.15s ease;
}

.toc-link:hover { color: var(--color-foreground); }

.toc-link.is-active {
	background: var(--color-primary);
	color: #fff;
}

/* Testimonial ------------------------------------------------------------ */

.testimonial {
	background: var(--color-foreground);
	color: var(--color-background);
	border-radius: var(--radius);
	padding: 2.5em 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	text-align: center;
}

.testimonial img { width: 72px; height: 72px; border-radius: var(--radius); object-fit: cover; }

/* CTA box ------------------------------------------------------------ */

.cta-box {
	background: linear-gradient(rgba(20, 20, 30, 0.55), rgba(20, 20, 30, 0.55)), var(--color-primary) url("/assets/images/cta-bg.webp") center / cover no-repeat;
	color: #fff;
	border-radius: var(--radius);
	padding: clamp(32px, 6vh, 64px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}

.cta-box h3, .cta-box .h3 { margin: 0; color: #fff; }

.cta-box .separator { color: rgba(255,255,255,0.5); width: 60px; margin: 0 auto; }

.cta-box .btn-outline { border-color: #fff; color: #fff; }
.cta-box .btn-outline:hover { background: #fff; color: var(--color-primary); }

/* Forms ---------------------------------------------------------------- */

label { font-size: var(--fs-small); font-weight: 400; display: block; margin-bottom: 0.4em; }

input, textarea, select {
	background: var(--color-background);
	border: 1px solid var(--color-tertiary);
	border-radius: var(--radius);
	box-sizing: border-box;
	color: var(--color-foreground);
	font-family: inherit;
	font-size: inherit;
	max-width: 100%;
	width: 100%;
	padding: 0.75em 1em;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-primary);
}

.form-row { margin-bottom: 1.25em; }

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.contact-info-item h6, .contact-info-item .h6 { margin: 0 0 0.25em; }
.contact-info-item a { text-decoration: none; color: var(--color-primary); font-weight: 400; }

/* Footer ---------------------------------------------------------------- */

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1em;
	padding-top: clamp(48px, 9vw, 64px);
	font-size: var(--fs-small);
	color: var(--color-secondary);
}

.site-footer strong { color: var(--color-foreground); }

/* Utility -------------------------------------------------------------- */

.text-secondary { color: var(--color-secondary); }
.mb-0 { margin-bottom: 0; }

/* Admin (CMS) ------------------------------------------------------------ */

.admin-shell {
	max-width: 960px;
	margin: 0 auto;
	padding: var(--gutter);
}

.admin-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1em;
	margin-bottom: 2em;
}

.admin-topbar .site-title { font-size: var(--fs-h6); font-weight: 400; text-decoration: none; }

.admin-topbar-actions { display: flex; align-items: center; gap: 0.75em; flex-wrap: wrap; }

.admin-topbar-actions form { display: inline; }

.admin-auth {
	width: 100%;
	max-width: 460px;
	margin: 12vh auto;
	padding: 0 16px;
}

.admin-auth .card-panel {
	background: var(--color-quaternary);
	border-radius: var(--radius);
	padding: 2.5rem;
}
.admin-auth .eyebrow { margin-bottom: 1rem; }
.admin-auth h3 { font-size: clamp(24px, 2vw, 28px); font-weight: 500; line-height: 1.25; }
.admin-auth .card-panel > .text-secondary { margin: 0.5rem 0 2rem; font-size: var(--t-body-sm); line-height: 1.6; }
.admin-auth input { width: 100%; }
.admin-auth .btn { width: 100%; justify-content: center; margin-top: 0.5rem; font-family: inherit; }
.admin-auth .card-panel > h3 { margin-top: 0; }
.admin-auth > .text-secondary { font-size: var(--t-meta); }
.admin-auth > .text-secondary a { color: inherit; }
@media (max-width: 480px) { .admin-auth .card-panel { padding: 1.75rem 1.25rem; } }

.admin-error {
	background: #fdeceb;
	color: #b3261e;
	border-radius: var(--radius);
	padding: 0.75em 1em;
	font-size: var(--fs-small);
	margin-bottom: 1.25em;
}

.admin-success {
	background: #eaf7ee;
	color: #1e6b34;
	border-radius: var(--radius);
	padding: 0.75em 1em;
	font-size: var(--fs-small);
	margin-bottom: 1.25em;
}

:root[data-theme="dark"] .admin-error { background: #3a2220; color: #f2a29c; }
:root[data-theme="dark"] .admin-success { background: #1c3524; color: #8fd6a6; }

/* Modal (e.g. CV email gate) -------------------------------------------- */

.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.modal-card {
	background: var(--color-background);
	border-radius: var(--radius);
	padding: 2rem;
	max-width: 420px;
	width: 100%;
	position: relative;
	transform: scale(0.95) translateY(8px);
	transition: transform 0.2s ease;
}

.modal-overlay.is-open .modal-card {
	transform: scale(1) translateY(0);
}

.btn-block { width: 100%; justify-content: center; }

.modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 28px;
	height: 28px;
	padding: 0;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--color-secondary);
	cursor: pointer;
}

.modal-close:hover { color: var(--color-foreground); }

.admin-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fs-small);
}

.admin-table th, .admin-table td {
	text-align: left;
	padding: 0.75em;
	border-bottom: 1px solid var(--color-tertiary);
	vertical-align: middle;
}

.admin-table img { width: 64px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

.admin-table-actions { display: flex; gap: 0.5em; flex-wrap: wrap; }

.badge-toggle {
	appearance: none;
	border: 1px solid var(--color-tertiary);
	background: var(--color-quaternary);
	color: var(--color-secondary);
	font-family: inherit;
	font-size: var(--fs-tiny);
	font-weight: 400;
	padding: 0.35em 0.9em;
	border-radius: var(--radius);
	cursor: pointer;
	white-space: nowrap;
}

.badge-toggle.is-featured {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}

.btn-small { padding: 0.4em 1em; font-size: var(--fs-tiny); }

.btn-danger { background: #b3261e; color: #fff; }
.btn-danger:hover { opacity: 0.85; }

.admin-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1.5em;
}

@media (max-width: 640px) { .admin-form-grid { grid-template-columns: 1fr; } }

.admin-form-grid .form-row-full { grid-column: 1 / -1; }

.current-image { margin-bottom: 0.75em; }
.current-image img { width: 120px; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius); }

.field-hint { font-size: var(--fs-tiny); color: var(--color-secondary); margin: -0.75em 0 1.25em; }

/* Portfolio detail page ------------------------------------------------- */

.detail-back {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-size: var(--fs-small);
	font-weight: 400;
	text-decoration: none;
	color: var(--color-secondary);
	background: var(--color-background);
	padding: 1em 0;
}

.detail-back:hover { color: var(--color-foreground); }

.detail-image {
	width: 100%;
	max-height: 560px;
	object-fit: cover;
	border-radius: var(--radius);
	margin: 1em 0 1.5em;
}

/* One-line summary under a case title: problem → decision → result */
.detail-lede { font-size: 18px; line-height: 1.55; margin: 0.25em 0 0; color: var(--color-secondary); }
.detail-text h1 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.12; margin-bottom: 0.3em; }

/* Narrower reading column for the title/text/blocks of a project or blog
   post — keeps line length comfortable on wide screens. The cover image
   deliberately stays outside this and spans the full content width. */
.detail-text { max-width: var(--content-narrow); margin-left: auto; margin-right: auto; }

.detail-content { white-space: pre-line; margin-bottom: 1.75em; }

.detail-actions { margin-top: 2em; display: flex; gap: 1em; flex-wrap: wrap; }

.detail-figure { margin: 0 0 1.75em; }

/* Wide comparison figure: breaks out of the reading column to the full content width */
.content { container-type: inline-size; }
.detail-figure-wide { width: min(100cqw, var(--content-max)); margin-left: calc((100% - min(100cqw, var(--content-max))) / 2); }

/* Folded full-page capture */
.detail-full { margin: 0 0 1em; border: 1px solid var(--color-tertiary); border-radius: var(--radius); }
.detail-full summary { display: flex; gap: 0.75em; align-items: baseline; flex-wrap: wrap; padding: 0.9em 1.1em; cursor: pointer; font-weight: 400; font-size: var(--fs-small); list-style: none; }
.detail-full summary::-webkit-details-marker { display: none; }
.detail-full summary::before { content: "+"; font-weight: 400; width: 1em; }
.detail-full[open] summary::before { content: "−"; }
.detail-full-cap { font-weight: 400; color: var(--color-secondary); }
.detail-full summary:hover > span:first-child { text-decoration: underline; text-underline-offset: 0.15em; }
.detail-full img { display: block; width: 100%; border-top: 1px solid var(--color-tertiary); border-radius: var(--radius); }
.detail-full + :not(.detail-full) { margin-top: 1.75em; }

.detail-block-image {
	width: 100%;
	border-radius: var(--radius);
	display: block;
}

.detail-block-video {
	width: 100%;
	border-radius: var(--radius);
	display: block;
	background: #000;
}

.detail-video-wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

.detail-video-wrapper iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.detail-caption {
	font-size: var(--fs-tiny);
	color: var(--color-secondary);
	margin-top: 0.6em;
	text-align: center;
}

/* Admin: content block manager ------------------------------------------ */

.block-list {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
	margin: 1.5em 0 2.5em;
}

.block-item {
	display: flex;
	align-items: center;
	gap: 1em;
	background: var(--color-quaternary);
	border-radius: var(--radius);
	padding: 0.75em 1em;
}

.block-item-type {
	font-size: var(--fs-tiny);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-secondary);
	flex: 0 0 auto;
	width: 60px;
}

.block-item-preview {
	flex: 1 1 auto;
	min-width: 0;
	font-size: var(--fs-small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.block-item-preview img { height: 32px; width: 32px; object-fit: cover; border-radius: var(--radius); vertical-align: middle; margin-right: 0.5em; }

.block-item-actions { display: flex; gap: 0.4em; flex: 0 0 auto; }
.block-item-actions form { display: inline; }
.block-item-actions button, .block-item-actions a { padding: 0.35em 0.7em; font-size: var(--fs-tiny); }

.add-block-panel {
	background: var(--color-quaternary);
	border-radius: var(--radius);
	padding: 1.5em;
}

.block-type-fields { display: none; }
.block-type-fields.is-visible { display: block; }

.story-practice { max-width: var(--content-narrow); margin-bottom: 2rem; }
.story-practice p:first-child { font-size: var(--fs-medium); }

/* Emphasis inside light body text */
strong, b { font-weight: 500; }

/* Portfolio list ---------------------------------------------------------- */

.pf-head { display: grid; grid-template-columns: auto 64px minmax(0, 1fr); align-items: end; gap: 1.5rem; padding: clamp(8px, 2vh, 24px) 0 2rem; }
.pf-head .eyebrow { margin: 0 0 0.5rem; }
.pf-title { margin: 0; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 500; }
.pf-slash { align-self: stretch; background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--color-tertiary) 50%, transparent calc(50% + 0.5px)); }
.pf-intro { margin: 0; max-width: 30em; font-size: 15px; line-height: 1.6; color: var(--color-secondary); }

.pf-circle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius); font-size: 16px; transition: transform 0.2s ease; }

/* Three lead projects: the image is the card */
.pf-leads { display: flex; flex-direction: column; gap: 1rem; }
.pf-lead { position: relative; display: block; min-height: 300px; border-radius: var(--radius); overflow: hidden; color: #fff; text-decoration: none; background: #111; }
.pf-lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.pf-lead::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 10, 12, 0.92) 0%, rgba(10, 10, 12, 0.75) 40%, rgba(10, 10, 12, 0) 75%); }
.pf-lead-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 0.6rem; max-width: 27rem; padding: clamp(24px, 3vw, 40px); }
.pf-num { font-size: 13px; letter-spacing: 0.06em; opacity: 0.8; }
.pf-lead-title { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.pf-lead .pf-sub { color: rgba(255, 255, 255, 0.85); }
.pf-lead .pf-summary { color: rgba(255, 255, 255, 0.78); }
.pf-lead .pf-tag { border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.9); }
.pf-cta { display: inline-flex; align-items: center; gap: 0.9rem; margin-top: 0.75rem; font-size: 15px; }
.pf-lead .pf-circle { background: #fff; color: #111; }
.pf-lead:hover img { transform: scale(1.03); }
.pf-lead:hover .pf-circle, .pf-row:hover .pf-circle { transform: translateX(4px); }
.pf-lead:focus-visible, .pf-row:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }

.pf-sub { margin: 0; font-size: 16px; line-height: 1.35; }
.pf-summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-secondary); }
.pf-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-tag { display: inline-block; padding: 0.3em 0.75em; border: 1px solid var(--color-tertiary); border-radius: var(--radius); font-size: 12px; line-height: 1.4; color: var(--color-secondary); }

/* The rest: numbered rows */
.pf-rows { margin-top: 1rem; }
.pf-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 220px) 44px; gap: 1.5rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--color-tertiary); text-decoration: none; color: inherit; }
.pf-row-num { font-size: clamp(36px, 3.6vw, 48px); line-height: 1; font-weight: 400; letter-spacing: -0.02em; color: var(--color-secondary); opacity: 0.35; }
.pf-row-text { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.pf-row-title { margin: 0; font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; font-weight: 500; }
.pf-row .pf-sub { color: var(--color-secondary); font-size: 15px; }
.pf-row .pf-summary { font-size: 14px; max-width: 34em; }
.pf-row-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.pf-row .pf-circle { border: 1px solid var(--color-tertiary); }
.pf-row:hover .pf-row-title { text-decoration: underline; text-underline-offset: 0.15em; }

/* Client names as a quiet grid */
.client-wall { padding-top: clamp(40px, 7vh, 72px); }
.cw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; margin-bottom: 1.25rem; }
.cw-head .eyebrow, .cw-head .client-wall-stats { margin: 0; }
.cw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--color-tertiary); border-left: 1px solid var(--color-tertiary); }
.cw-grid li { border-right: 1px solid var(--color-tertiary); border-bottom: 1px solid var(--color-tertiary); }
.cw-grid a { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 0.75rem; font-size: 15px; font-weight: 500; text-align: center; text-decoration: none; color: inherit; transition: background 0.2s ease; }
.cw-grid a:hover { background: var(--color-quaternary); }

@media (max-width: 900px) {
	.pf-head { grid-template-columns: 1fr; gap: 1rem; }
	.pf-slash { display: none; }
	.pf-row { grid-template-columns: 3.5rem minmax(0, 1fr) 140px; }
	.pf-row-arrow { display: none; }
	.cw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.pf-lead { display: flex; flex-direction: column; min-height: 0; }
	.pf-lead img { position: static; height: auto; aspect-ratio: 16 / 10; }
	.pf-lead::before { display: none; }
	.pf-lead-text { max-width: none; padding: 1.25rem 1.25rem 1.5rem; }
	.pf-row { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "num thumb" "text thumb"; gap: 0.35rem 1rem; align-items: start; }
	.pf-row-num { grid-area: num; font-size: 14px; opacity: 1; letter-spacing: 0.04em; }
	.pf-row-text { grid-area: text; }
	.pf-row-thumb { grid-area: thumb; }
	.pf-row .pf-summary { display: none; }
	.cw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cw-grid a { min-height: 48px; padding: 0.4rem; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .pf-lead img, .pf-circle { transition: none; } }

/* Phones: reading text never drops below 15px */
@media (max-width: 760px) {
	.hx-desc, .hs-desc, .hw-line, .hn-desc, .ha-text p, .pf-summary, .pf-intro, .featured-summary, .detail-lede, .project-credits dd { font-size: 15px; line-height: 1.6; }
	.hw-result, .hn-project, .pf-tag, .hs-num, .hw-num, .notes-num, .project-credits dt { font-size: 13px; }
	.hs-stack, .hs-corner, .hx-kicker { font-size: 11px; }
	.hw-title, .hn-title { font-size: 17px; }
}

/* Phones: shorter Home, swipeable rows instead of long stacks */
@media (max-width: 560px) {
	.hw-grid, .hn-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 0.5rem; scrollbar-width: none; }
	.hw-grid::-webkit-scrollbar, .hn-grid::-webkit-scrollbar { display: none; }
	.hw-card { flex: 0 0 82%; scroll-snap-align: start; }
	.hn-card, .hn-card:first-child { flex: 0 0 82%; scroll-snap-align: start; padding: 0; border: 0; }
	.hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
	.hb-grid a { min-height: 44px; font-size: 12.5px; padding: 0.4em; }
	.ha-visual { display: none; }
	.hs { padding: 1.25rem 0 2rem; }
	.hs-title { font-size: 24px; }
	.hx-btn { padding: 0.8em 1.1em; }
}

/* Case pages: gallery view switch (text stays put; only images change) */
.gallery-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 2rem; padding: 0.5rem 0; border-top: 1px solid var(--color-tertiary); border-bottom: 1px solid var(--color-tertiary); }
.gallery-bar-label { font-size: var(--t-eyebrow, 12px); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); }
.gallery-modes { display: flex; gap: 2px; }
.gallery-modes button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 34px; border: 0; border-radius: var(--radius); background: transparent; color: var(--color-secondary); cursor: pointer; }
.gallery-modes button svg { width: 20px; height: 20px; }
.gallery-modes button:hover { color: var(--color-foreground); background: var(--color-quaternary); }
.gallery-modes button[aria-pressed="true"] { color: var(--color-background); background: var(--color-foreground); }
.gallery-modes button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.case-gallery { margin: 0 0 2.5rem; }
.case-gallery .detail-figure { margin: 0; width: auto; }
.case-gallery.mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.case-gallery.mode-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); cursor: zoom-in; }
.case-gallery.mode-masonry { columns: 3 200px; column-gap: 10px; }
.case-gallery.mode-masonry .detail-figure { break-inside: avoid; margin-bottom: 10px; }
.case-gallery.mode-masonry img { width: 100%; height: auto; border-radius: var(--radius); cursor: zoom-in; }
.case-gallery.mode-grid .detail-caption, .case-gallery.mode-masonry .detail-caption { display: none; }
.case-gallery.mode-grid img:hover, .case-gallery.mode-masonry img:hover { opacity: 0.85; }
.case-gallery.mode-slides .detail-figure { display: none; }
.case-gallery.mode-slides .detail-figure.is-current { display: block; }
.case-gallery.mode-slides img { width: 100%; max-height: 72vh; object-fit: contain; background: var(--color-quaternary); border-radius: var(--radius); }
.slides-nav { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1rem; }
.slides-nav button { width: 40px; height: 40px; border: 1px solid var(--color-tertiary); border-radius: var(--radius); background: transparent; color: inherit; font-size: 16px; cursor: pointer; }
.slides-nav button:hover { background: var(--color-quaternary); }
.slides-count { font-size: var(--t-meta, 13px); letter-spacing: 0.06em; color: var(--color-secondary); min-width: 5em; text-align: center; }
@media (max-width: 760px) { .case-gallery.mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .case-gallery.mode-masonry { columns: 2; column-gap: 6px; } }

/* =========================================================================
   Type system: one scale for Home, Portfolio, case pages and the blog.
   Display 400 · H1 400 · H2/H3/H4 500 · body 400 · emphasis 600 · meta 13px
   ========================================================================= */
:root {
	--t-display: clamp(40px, 6.4vw, 92px);
	--t-h1: clamp(30px, 3.6vw, 46px);
	--t-h2: clamp(22px, 2.1vw, 30px);
	--t-h3: clamp(19px, 1.6vw, 22px);
	--t-h4: clamp(16px, 1.2vw, 17px);
	--t-body: clamp(16.5px, 1.25vw, 18px);
	--t-body-sm: 15px;
	--t-meta: 13px;
	--t-eyebrow: 12px;
}

strong, b { font-weight: 600; }

/* Eyebrows and small labels: one size everywhere */
.eyebrow, .hx-kicker, .hx-edition, .hs-corner, .client-group-title { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.eyebrow { color: var(--color-secondary); }

/* Display */
.hx-title, .pf-title { font-size: var(--t-display); font-weight: 400; }

/* H1: page and case titles */
.detail-text h1, .about-hero h1 { font-size: var(--t-h1); font-weight: 400; line-height: 1.12; letter-spacing: -0.02em; }

/* H2: section titles and large project names */
.hs-title { font-size: var(--t-h2); font-weight: 500; }
.pf-lead-title { font-size: clamp(26px, 2.8vw, 38px); font-weight: 500; }
#story h2, #skills h2, #experience h2, #education h2, #awards h2, .section > h2:not(.eyebrow) { font-size: var(--t-h2); font-weight: 500; letter-spacing: -0.01em; }

/* H3: sub-headings inside a case, row and card titles */
.detail-h { margin: 2.25em 0 0.6em; font-size: var(--t-h3); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.detail-text > .detail-h:first-child, .detail-text > .eyebrow + .detail-h { margin-top: 0.75em; }
.pf-row-title, .post-title, .card-body .h6, .card-body h6 { font-size: var(--t-h3); font-weight: 500; }

/* H4: small card titles */
.hw-title, .hn-title, .hub-case-title, .next-project-title { font-weight: 500; }
.hw-title, .hn-title { font-size: var(--t-h4); }

/* Reading text: case pages and blog posts */
.detail-content { font-size: var(--t-body); line-height: 1.75; }
.detail-lede { font-size: var(--t-body); }

/* Secondary text: summaries, descriptions */
.hx-desc, .hs-desc, .hw-line, .hn-desc, .ha-text p, .pf-summary, .pf-intro, .post-excerpt, .featured-summary { font-size: var(--t-body-sm); line-height: 1.65; }
.hx-desc { font-size: 17px; line-height: 1.7; }

/* Meta: results, tags, numbers, dates */
.hw-result, .pf-tag, .hn-project, .hs-num, .hw-num, .pf-num, .featured-result, .notes-num, .post-date, .detail-caption { font-size: var(--t-meta); }
.hw-result, .featured-result { font-weight: 500; }
.project-credits dt { font-size: var(--t-meta); font-weight: 500; letter-spacing: 0.02em; }
.project-credits dd { font-size: var(--t-body-sm); line-height: 1.6; }
.tag { font-size: var(--t-meta); font-weight: 500; }

@media (max-width: 760px) {
	.hx-desc { font-size: 16px; }
	.detail-h { margin-top: 1.75em; }
}

/* Hero buttons share the side column width */
.hx-side .hx-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.hx-side .hx-btn { justify-content: space-between; gap: 0.75em; }
@media (max-width: 380px) { .hx-side .hx-buttons { grid-template-columns: 1fr; } }
/* About reads at the same size as case text */
#story p, #experience p, #education p, #awards p, .story-practice p:first-child { font-size: var(--t-body); line-height: 1.7; }

/* Gallery bar and gathered gallery use the full content width */
.gallery-bar, .case-gallery:not([hidden]) { width: min(100cqw, var(--content-max)); margin-left: calc((100% - min(100cqw, var(--content-max))) / 2); }
.case-gallery.mode-slides { max-width: none; }
.case-gallery.mode-slides img { max-height: 78vh; }

/* =========================================================================
   Page header and footer: one pattern on every page (Home masthead included)
   ========================================================================= */
:root { --t-page: clamp(44px, 6vw, 88px); --page-top: clamp(4px, 1.5vh, 16px); }
.ph { padding: var(--page-top) 0 clamp(36px, 6vh, 64px); }
.hx { padding-top: var(--page-top); }
.ph-masthead, .hx-masthead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; border-top: 3px solid var(--color-foreground); border-bottom: 1px solid var(--color-foreground); }
.ph-masthead > *, .hx-masthead > * { margin: 0; font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.ph-masthead .eyebrow { color: var(--color-foreground); }
.ph-meta { color: var(--color-secondary); }
.ph-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; padding-top: clamp(20px, 3.5vh, 36px); }
.ph-title { margin: 0; font-size: var(--t-page); line-height: 1; letter-spacing: -0.03em; font-weight: 400; text-wrap: balance; }
.ph-aside { display: flex; flex-direction: column; gap: 1rem; padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--color-tertiary); }
.ph-intro { margin: 0; font-size: var(--t-body-sm); line-height: 1.65; color: var(--color-secondary); }
.ph-intro + .ph-intro { margin-top: 0.8em; }
.ph-aside .hero-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; }
.ph-note { margin: 0; font-size: var(--t-meta); color: var(--color-secondary); }
.ph + .section, .ph + section { padding-top: 0; }
.detail-back + .ph { margin-top: 1rem; }

.site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: clamp(48px, 8vw, 80px); padding: 1.25rem 0 0; border-top: 1px solid var(--color-tertiary); font-size: var(--t-meta); color: var(--color-secondary); }
.site-footer strong { color: var(--color-foreground); font-weight: 500; }
.hf-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.hf-nav a { color: var(--color-secondary); text-decoration: none; }
.hf-nav a:hover { color: var(--color-foreground); }

@media (max-width: 760px) {
	.ph-body { grid-template-columns: 1fr; gap: 1.25rem; }
	.ph-aside { padding-left: 0; border-left: 0; }
	.ph-meta { display: none; }
	.hf-nav { gap: 1rem; }
}

/* Hub pages: overview of a project with sub-cases ------------------------ */
.hub-head { padding-bottom: clamp(20px, 3vh, 32px); }
.hub-cover { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius); }
.hub-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); padding: clamp(36px, 6vh, 64px) 0; border-bottom: 1px solid var(--color-tertiary); }
.hub-overview .eyebrow { margin: 0 0 1rem; }
.hub-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--color-foreground); }
.hub-stats li { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.25rem 1.25rem 1.5rem 0; border-bottom: 1px solid var(--color-tertiary); }
.hub-stats li:nth-child(odd) { border-right: 1px solid var(--color-tertiary); }
.hub-stats li:nth-child(even) { padding-left: 1.25rem; }
.hub-stat-v { font-size: clamp(36px, 4vw, 56px); line-height: 1; font-weight: 400; letter-spacing: -0.03em; }
.hub-stat-l { font-size: var(--t-body-sm); line-height: 1.5; color: var(--color-secondary); }
.hub-details .project-credits { margin: 0; }

.hub-journey { padding: clamp(36px, 6vh, 64px) 0; border-bottom: 1px solid var(--color-tertiary); }
.hub-journey-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; margin-bottom: 2rem; }
.hub-journey-head .eyebrow { margin: 0 0 0.75rem; }
.hub-h2 { margin: 0; font-size: var(--t-h1); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; }
.hub-journey-intro { margin: 0; font-size: var(--t-body-sm); line-height: 1.65; color: var(--color-secondary); white-space: pre-line; }
.hub-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--color-foreground); }
.hub-steps li { border-right: 1px solid var(--color-tertiary); }
.hub-steps li:last-child { border-right: 0; }
.hub-step { position: relative; display: flex; flex-direction: column; gap: 0.6rem; height: 100%; padding: 1.25rem 1.25rem 1.5rem; text-decoration: none; color: inherit; transition: background 0.2s ease; }
.hub-step:hover { background: var(--color-quaternary); }
.hub-step-num { font-size: var(--t-meta); letter-spacing: 0.06em; color: var(--color-secondary); }
.hub-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.hub-step-tags { font-size: var(--t-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); }
.hub-step-title { font-size: var(--t-h3); font-weight: 500; line-height: 1.25; }
.hub-step-desc { font-size: var(--t-body-sm); line-height: 1.6; color: var(--color-secondary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.hub-step-arrow { margin-top: auto; padding-top: 0.5rem; transition: transform 0.2s ease; }
.hub-step:hover .hub-step-arrow { transform: translateX(4px); }

.hub-more { padding: clamp(36px, 6vh, 64px) 0 0; }
.hub-more > .eyebrow { margin: 0 0 1rem; }
.hub-row { padding: 1.5rem 0; }
.hub-row + .hub-row { border-top: 1px solid var(--color-tertiary); }
.hub-row.has-media:not(.many) { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.hub-row-text { max-width: var(--content-narrow); }
.hub-row-text .detail-h:first-child { margin-top: 0; font-size: var(--t-h1); font-weight: 400; line-height: 1.1; }
.hub-row-media .detail-figure, .hub-row-media .detail-figure-wide { width: auto; margin: 0 0 1rem; }
.hub-row.many .hub-row-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 1.5rem; }
.hub-row.many .hub-row-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hub-row.many .detail-caption { font-size: var(--t-meta); }

@media (max-width: 900px) {
	.hub-overview, .hub-journey-head, .hub-row.has-media:not(.many) { grid-template-columns: 1fr; }
	.hub-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hub-steps li:nth-child(2n) { border-right: 0; }
	.hub-step { padding-inline: 1rem; }
}
@media (max-width: 560px) {
	.hub-cover { aspect-ratio: 16 / 10; }
	.hub-steps { grid-template-columns: 1fr; }
	.hub-steps li { border-right: 0; border-bottom: 1px solid var(--color-tertiary); }
	.hub-row.many .hub-row-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hub-stat-v { font-size: 34px; }
}

.hub-details .credit-row { grid-template-columns: 8.5rem minmax(0, 1fr); }
.hub-stat-v { white-space: nowrap; }
@media (max-width: 560px) { .hub-details .credit-row { grid-template-columns: 1fr; } }

/* Hero: the side column holds only the two actions */
.hx-side { justify-content: flex-end; }
.hx-side .hx-buttons { grid-template-columns: 1fr; max-width: 18rem; }
@media (max-width: 760px) { .hx-edition { display: block; text-align: right; letter-spacing: 0.08em; } .hx-side .hx-buttons { grid-template-columns: 1fr 1fr; max-width: none; } }
.hx-kicker { white-space: nowrap; flex: 0 0 auto; }

/* Hero actions: two compact buttons sitting at the foot of the deck */
.hx-deck { align-items: end; }
.hx-side { padding-left: 0; border-left: 0; align-items: flex-end; }
.hx-side .hx-buttons { display: flex; flex-wrap: nowrap; gap: 0.6rem; max-width: none; }
.hx-side .hx-btn { justify-content: center; gap: 0.6em; padding: 0.8em 1.35em; font-size: 15px; font-weight: 400; white-space: nowrap; }
@media (max-width: 760px) { .hx-side { align-items: stretch; } .hx-side .hx-buttons { display: grid; grid-template-columns: 1fr 1fr; } }

/* Page transitions: native cross-document view transitions, CSS only.
   Browsers without support simply navigate as before. */
@view-transition { navigation: auto; }
.sidebar { view-transition-name: sidebar; }
.mobile-header { view-transition-name: mobile-header; }
.content { view-transition-name: page; }
::view-transition-old(page) { animation: page-out 180ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(page) { animation: page-in 320ms cubic-bezier(0, 0, 0.2, 1) 60ms both; }
::view-transition-old(sidebar), ::view-transition-new(sidebar), ::view-transition-old(mobile-header), ::view-transition-new(mobile-header) { animation: none; }
@keyframes page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Hub cards: share row tracks so tags, titles and descriptions line up across cards */
@supports (grid-template-rows: subgrid) {
	.hub-steps li { display: grid; grid-row: span 6; grid-template-rows: subgrid; }
	.hub-step { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0.6rem; align-content: start; height: auto; }
	.hub-step-arrow { align-self: end; }
}

/* About: numbered sections, story in three columns, timelines --------------- */
.ab { border-top: 1px solid var(--color-tertiary); padding: 2.25rem 0 2.75rem; scroll-margin-top: 5rem; }
.ab-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.75rem; }
.ab-num { display: inline-flex; align-items: center; gap: 1rem; font-size: var(--t-meta); letter-spacing: 0.06em; color: var(--color-secondary); }
.ab-num::after { content: ""; width: 28px; height: 1px; background: var(--color-tertiary); }
.ab-title { margin: 0; font-size: var(--t-h2); font-weight: 400; line-height: 1.2; }
.ab-story { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.ab-story-text { max-width: 62ch; }
.ab-story p { margin: 0 0 1em; font-size: var(--t-body-sm); line-height: 1.7; color: var(--color-secondary); }
.ab-story .text-link { font-size: var(--t-body-sm); }
.ab-story-fig { margin: 0; }
.ab-story-fig img { display: block; width: 100%; aspect-ratio: 6 / 5; object-fit: cover; object-position: 60% 55%; border-radius: var(--radius); }
.ab-story-fig figcaption { margin-top: 0.9rem; }
.ab-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* Same hover as the home brand grid (.hb-grid) */
.ab-tags .tag { background: var(--color-quaternary); transition: background 0.2s ease; }
.ab-tags .tag:hover { background: var(--color-tertiary); }
.ab-tl { list-style: none; margin: 0; padding: 0; }
.ab-tl li { position: relative; display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 3.5rem; padding-bottom: 1.75rem; }
.ab-tl li:last-child { padding-bottom: 0; }
.ab-tl li::before { content: ""; position: absolute; left: calc(10rem + 1.75rem); top: 0; bottom: 0; width: 1px; background: var(--color-tertiary); }
.ab-tl li:first-child::before { top: 0.6em; }
.ab-tl li:last-child::before { bottom: auto; height: 0.6em; }
.ab-tl li:only-child::before { display: none; }
.ab-tl li::after { content: ""; position: absolute; left: calc(10rem + 1.75rem - 3px); top: calc(0.6em - 3px); width: 7px; height: 7px; background: var(--color-secondary); border-radius: var(--radius); }
.ab-tl li:first-child::after { background: var(--color-primary); }
.ab-tl-period { font-size: var(--t-body-sm); line-height: 1.5; color: var(--color-secondary); white-space: nowrap; }
.ab-tl-body h3 { margin: 0 0 0.35em; font-size: var(--t-h4); font-weight: 500; line-height: 1.4; }
.ab-tl-body p { margin: 0; max-width: 68ch; font-size: var(--t-body-sm); line-height: 1.65; color: var(--color-secondary); }
.ab-awards { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.ab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.ab-list li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); column-gap: 3.5rem; font-size: var(--t-body); line-height: 1.5; }
.ab-lang { margin: 0; padding-left: 2.5rem; border-left: 1px solid var(--color-tertiary); font-size: var(--t-body); line-height: 1.6; }
@media (max-width: 1100px) {
	.ab-story { gap: 2.5rem; }
}
@media (max-width: 760px) {
	.ab { padding: 1.75rem 0 2rem; }
	.ab-story, .ab-awards { grid-template-columns: 1fr; gap: 1.5rem; }
	.ab-story-fig { max-width: 420px; }
	.ab-tl li { grid-template-columns: 1fr; row-gap: 0.2rem; padding-left: 1.5rem; }
	.ab-tl li::before { left: 3px; }
	.ab-tl li::after { left: 0; }
	.ab-list li { grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1rem; }
	.ab-lang { padding-left: 0; padding-top: 1.25rem; border-left: 0; border-top: 1px solid var(--color-tertiary); }
}
.toc-bar + .ab { border-top: 0; padding-top: 1.5rem; }

/* Admin hub (/admin) and About editor ---------------------------------- */
.admin-hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.admin-hub-card { display: flex; flex-direction: column; border: 1px solid var(--color-tertiary); background: var(--color-background); transition: border-color 0.2s ease; }
.admin-hub-card:hover { border-color: var(--color-foreground); }
.admin-hub-main { flex: 1; display: block; padding: 1.5rem; color: inherit; text-decoration: none; }
.admin-hub-main h3 { margin: 0 0 0.5rem; }
.admin-hub-main p { margin: 0 0 1.25rem; font-size: var(--t-body-sm); }
.admin-hub-go { font-size: var(--t-body-sm); color: var(--color-primary); }
.admin-hub-view { padding: 0.75rem 1.5rem; border-top: 1px solid var(--color-tertiary); font-size: var(--t-meta); color: var(--color-secondary); text-decoration: none; }
.admin-hub-view:hover { color: var(--color-foreground); }

.about-admin .rep { border: 1px solid var(--color-tertiary); padding: 1.25rem 1.5rem 1.5rem; margin: 0 0 1.5rem; min-width: 0; }
.about-admin legend { padding: 0 0.5rem; font-weight: 500; }
.rep-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--color-tertiary); }
.rep-list:empty + template + [data-rep="add"], .rep-row + template + [data-rep="add"] { margin-top: 1rem; }
.rep-tools { display: flex; flex-direction: column; gap: 0.4rem; }
.rep-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 0.75rem; }
.rep-pair label { display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--t-meta); color: var(--color-secondary); }
.rep-pair input, .rep-pair textarea { width: 100%; font: inherit; font-size: var(--t-body-sm); color: var(--color-foreground); }
.about-admin-save { position: sticky; bottom: 0; display: flex; gap: 0.75rem; padding: 1rem 0; background: var(--color-background); border-top: 1px solid var(--color-tertiary); }
@media (max-width: 760px) {
	.rep-pair { grid-template-columns: 1fr; }
	.rep-row { grid-template-columns: 1fr; }
	.rep-tools { flex-direction: row; }
}

/* Admin UI v2: sidebar + panel, soft corners, light/dark ------------------ */
.adm-body {
	--adm-canvas: #EFEEEB;
	--adm-panel: #FFFFFF;
	--adm-side-hover: rgba(17, 17, 17, 0.05);
	--adm-side-active: rgba(17, 17, 17, 0.08);
	--adm-line: #E6E5E2;
	--adm-field: #FFFFFF;
	--adm-field-line: #DAD9D5;
	--adm-shadow: 0 1px 2px rgba(17, 17, 17, 0.05);
	--adm-r: 10px;
	--adm-r-sm: 8px;
	background: var(--adm-canvas);
	color: var(--color-foreground);
	font-size: 15px;
	margin: 0;
}
:root[data-theme="dark"] .adm-body {
	--adm-canvas: #111113;
	--adm-panel: #1A1A1E;
	--adm-side-hover: rgba(255, 255, 255, 0.05);
	--adm-side-active: rgba(255, 255, 255, 0.09);
	--adm-line: #2A2A30;
	--adm-field: #202026;
	--adm-field-line: #34343B;
	--adm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.adm { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.adm-side { position: sticky; top: 0; height: 100vh; box-sizing: border-box; padding: 1.25rem 0.9rem; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; }
.adm-side-top { display: flex; align-items: center; justify-content: space-between; padding: 0 0.5rem; }
.adm-brand { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-foreground); text-decoration: none; }
.adm-logo { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--color-foreground); color: var(--adm-panel); font-size: 14px; font-weight: 600; }
.adm-nav { display: flex; flex-direction: column; gap: 2px; }
.adm-nav form { margin: 0; }
.adm-nav-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem; border: 0; border-radius: var(--adm-r-sm); background: none; font: inherit; font-size: 14.5px; text-align: left; color: var(--color-secondary); text-decoration: none; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.adm-nav-item:hover { background: var(--adm-side-hover); color: var(--color-foreground); }
.adm-nav-item.is-active { background: var(--adm-side-active); color: var(--color-foreground); font-weight: 500; }
.adm-nav-item svg { flex: none; opacity: 0.85; }
.adm-nav-sep { border: 0; border-top: 1px solid var(--adm-line); margin: 0.75rem 0.5rem; }
.adm-icon-btn { display: none; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--adm-r-sm); background: none; color: var(--color-foreground); cursor: pointer; }

.adm-main { margin: 0.75rem 0.75rem 0.75rem 0; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3.5vw, 3.25rem) 3rem; background: var(--adm-panel); border: 1px solid var(--adm-line); border-radius: 14px; min-width: 0; }
.adm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.5rem; margin-bottom: 0.5rem; border-bottom: 1px dashed var(--adm-line); }
.adm-title { margin: 0; font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.adm-sub { margin: 0.3rem 0 0; font-size: 13.5px; color: var(--color-secondary); }
.adm-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.adm-head-actions form { display: inline; margin: 0; }

/* Controls */
.adm-body .btn { border-radius: var(--adm-r-sm); font-family: inherit; font-size: 14px; padding: 0.55em 1.05em; box-shadow: var(--adm-shadow); }
.adm-body .btn-small { font-size: 13px; padding: 0.42em 0.85em; }
.adm-body .btn-outline { background: var(--adm-field); border: 1px solid var(--adm-field-line); color: var(--color-foreground); }
.adm-body .btn-outline:hover { border-color: var(--color-secondary); background: var(--adm-field); color: var(--color-foreground); }
.adm-body .btn-primary, .adm-body .btn-dark { background: var(--color-foreground); border-color: var(--color-foreground); color: var(--adm-panel); }
.adm-body .btn-primary:hover, .adm-body .btn-dark:hover { opacity: 0.88; background: var(--color-foreground); color: var(--adm-panel); }
.adm-body .btn-danger { background: none; border: 1px solid var(--adm-field-line); color: #c2362c; box-shadow: none; }
.adm-body .btn-danger:hover { background: rgba(194, 54, 44, 0.08); border-color: #c2362c; opacity: 1; }
:root[data-theme="dark"] .adm-body .btn-danger { color: #f0857c; }
.adm-body input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .adm-body textarea, .adm-body select {
	width: 100%; max-width: 560px; box-sizing: border-box; padding: 0.6em 0.8em; border: 1px solid var(--adm-field-line); border-radius: var(--adm-r-sm);
	background: var(--adm-field); color: var(--color-foreground); font: inherit; font-size: 14.5px; box-shadow: var(--adm-shadow);
}
.adm-body textarea { line-height: 1.6; resize: vertical; }
.adm-body input[type="file"] { padding: 0.45em; font-size: 13.5px; }
.adm-body input:focus, .adm-body textarea:focus, .adm-body select:focus { outline: none; border-color: var(--color-foreground); box-shadow: 0 0 0 3px var(--adm-side-active); }

/* Forms: label on the left, field on the right, dashed rules between rows */
.adm-main .admin-form-grid { display: block; }
.adm-main .form-row, .adm-main .current-image { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: 2.5rem; row-gap: 0.4rem; align-items: start; margin: 0; padding: 0.95rem 0; border-bottom: 1px dashed var(--adm-line); }
.adm-main .form-row > label, .adm-main .current-image > label { grid-column: 1; grid-row: 1 / span 3; margin: 0; padding-top: 0.55em; font-size: 14px; font-weight: 500; color: var(--color-foreground); }
.adm-main .form-row > :not(label), .adm-main .current-image > :not(label) { grid-column: 2; }
.adm-main .form-row > label:only-child { grid-column: 1 / -1; grid-row: auto; padding-top: 0; font-weight: 400; display: flex; gap: 0.6rem; align-items: center; }
.adm-main .field-hint { margin: 0; font-size: 13px; color: var(--color-secondary); }
.adm-main .current-image img { width: 160px; border-radius: var(--adm-r-sm); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.adm-main form > .btn-primary[type="submit"] { margin-top: 1.5rem; }
.adm-main h3 { font-size: 17px; font-weight: 500; margin: 0 0 0.4rem; }
.adm-main .separator { border: 0; border-top: 1px dashed var(--adm-line); }

/* Tables and lists */
.adm-main .admin-table { font-size: 14px; border: 1px solid var(--adm-line); border-radius: var(--adm-r); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.adm-main .admin-table th { font-size: 12.5px; font-weight: 500; color: var(--color-secondary); background: var(--adm-canvas); }
.adm-main .admin-table th, .adm-main .admin-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--adm-line); }
.adm-main .admin-table tr:last-child td { border-bottom: 0; }
.adm-main .admin-table tbody tr:hover td { background: var(--adm-side-hover); }
.adm-main .admin-table img { width: 72px; border-radius: 6px; }
.adm-main .badge-toggle { border-radius: 999px; font-size: 12.5px; background: var(--adm-field); border-color: var(--adm-field-line); }
.adm-main .badge-toggle.is-featured { background: var(--color-foreground); border-color: var(--color-foreground); color: var(--adm-panel); }
.adm-main .block-list { border: 1px solid var(--adm-line); border-radius: var(--adm-r); overflow: hidden; margin: 1rem 0 1.5rem; }
.adm-main .block-item { border-bottom: 1px solid var(--adm-line); border-radius: 0; background: none; }
.adm-main .block-item:last-child { border-bottom: 0; }
.adm-main .add-block-panel { border: 1px solid var(--adm-line); border-radius: var(--adm-r); background: var(--adm-canvas); padding: 1.25rem 1.5rem; }
.adm-main .add-block-panel .form-row { border-bottom-color: var(--adm-field-line); }
.adm-body .admin-error, .adm-body .admin-success { border-radius: var(--adm-r-sm); margin: 1rem 0; }

/* Hub cards */
.adm-main .admin-hub { margin-top: 1rem; }
.adm-main .admin-hub-card { border: 1px solid var(--adm-line); border-radius: var(--adm-r); overflow: hidden; box-shadow: var(--adm-shadow); }
.adm-main .admin-hub-card:hover { border-color: var(--adm-field-line); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); }
.adm-main .admin-hub-go { color: var(--color-foreground); font-weight: 500; }
.adm-main .admin-hub-view { border-top-color: var(--adm-line); background: var(--adm-canvas); }

/* About editor */
.adm-main .about-admin .rep { border: 0; border-bottom: 1px dashed var(--adm-line); padding: 1.5rem 0; margin: 0; }
.adm-main .about-admin legend { float: left; width: 100%; padding: 0; margin-bottom: 0.75rem; font-size: 15px; font-weight: 500; }
.adm-main .about-admin .rep > :not(legend) { clear: both; }
.adm-main .rep-row { border: 1px solid var(--adm-line); border-radius: var(--adm-r); padding: 1rem 1rem 0.25rem; margin-bottom: 0.75rem; background: var(--adm-canvas); }
.adm-main .rep-pair label { font-size: 12.5px; }
.adm-main .rep-pair input, .adm-main .rep-pair textarea { max-width: none; }
.adm-main .about-admin-save { margin: 0 -0.5rem; padding: 0.9rem 0.5rem; background: var(--adm-panel); border-top: 1px solid var(--adm-line); z-index: 3; }

/* Login */
.adm-body .admin-auth { margin: 14vh auto; }
.adm-body .admin-auth .card-panel { background: var(--adm-panel); border: 1px solid var(--adm-line); border-radius: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); }
.adm-body .admin-auth .adm-brand { margin-bottom: 1.75rem; }
.adm-body .admin-auth h3 { font-size: 22px; }
.adm-body .admin-auth .form-row label { font-size: 14px; font-weight: 500; }

@media (max-width: 900px) {
	.adm { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.adm-side { z-index: 10; height: auto; padding: 0.75rem 1rem; gap: 0; background: var(--adm-canvas); border-bottom: 1px solid var(--adm-line); }
	.adm-icon-btn { display: grid; }
	.adm-nav { display: none; padding-top: 0.75rem; }
	.adm.is-nav-open .adm-nav { display: flex; }
	.adm-main { margin: 0; border: 0; border-radius: 0; }
	.adm-main .form-row, .adm-main .current-image { grid-template-columns: 1fr; }
	.adm-main .form-row > label, .adm-main .current-image > label { grid-column: 1; grid-row: auto; padding-top: 0; }
	.adm-main .form-row > :not(label), .adm-main .current-image > :not(label) { grid-column: 1; }
}

/* Rich text (editor output) — shared by the public pages and the editor ---- */
.rt { white-space: normal; }
.rt > :first-child { margin-top: 0; }
.rt p { margin: 0 0 1em; }
.rt h3 { font-size: var(--t-h3); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; margin: 2.25em 0 0.6em; }
.rt > h3:first-child { margin-top: 0.75em; }
.hub-row-text .rt > h3:first-child { margin-top: 0; font-size: var(--t-h1); font-weight: 400; line-height: 1.1; }
.rte-area.rt > h3:first-child { margin-top: 0; font-size: var(--t-h3); }
.rt h4 { font-size: var(--t-h4); font-weight: 500; line-height: 1.4; margin: 1.4em 0 0.5em; }
.rt ul, .rt ol { margin: 0 0 1em; padding-left: 1.4em; }
.rt li { margin: 0.25em 0; }
.rt blockquote { margin: 1.25em 0; padding: 0.1em 0 0.1em 1.1em; border-left: 2px solid var(--color-foreground); color: var(--color-secondary); font-style: italic; }
.rt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rt-f-serif { font-family: Georgia, "Times New Roman", serif; }
.rt-f-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.92em; }
.rt-s-sm { font-size: 0.85em; }
.rt-s-lg { font-size: 1.2em; }
.rt-s-xl { font-size: 1.5em; line-height: 1.35; }
.rt-c-muted { color: var(--color-secondary); }
.rt-c-primary { color: var(--color-primary); }
.rt-c-red { color: #c2362c; }
.rt-c-green { color: #2f7d4f; }
.rt-c-orange { color: #c26a12; }
:root[data-theme="dark"] .rt-c-red { color: #f0857c; }
:root[data-theme="dark"] .rt-c-green { color: #7fcf9f; }
:root[data-theme="dark"] .rt-c-orange { color: #f0a85a; }

/* Admin v3: tabs, project tree, editor ------------------------------------ */
.adm-tabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin: 1.25rem 0 0.5rem; }
.adm-tab { padding: 0.5rem 0.85rem; border: 0; border-radius: var(--adm-r-sm); background: none; font: inherit; font-size: 14px; color: var(--color-secondary); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.adm-tab:hover { color: var(--color-foreground); }
.adm-tab.is-active { background: var(--adm-side-active); color: var(--color-foreground); font-weight: 500; }
.adm-main [data-tab-panel][hidden] { display: none; }
.adm-main [data-tab-panel="noi-dung"] { padding-top: 1rem; }
.adm-form-save { position: sticky; bottom: 0; z-index: 3; margin: 0 -0.5rem; padding: 0.9rem 0.5rem; background: var(--adm-panel); border-top: 1px solid var(--adm-line); }
.adm-form-save .btn { margin: 0; }
html[data-adm-tab="noi-dung"] .adm-form-save, html[data-adm-tab="qua-trinh"] .adm-form-save { display: none; }

.adm-tree-title { display: flex; align-items: flex-start; gap: 0.5rem; }
.adm-tree-toggle { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 1px solid var(--adm-field-line); border-radius: 6px; background: var(--adm-field); color: var(--color-secondary); font-size: 11px; line-height: 1; cursor: pointer; transition: transform 0.15s ease; }
.adm-tree-toggle[aria-expanded="false"] { transform: rotate(-90deg); }
.adm-tree-branch { flex: none; width: 24px; text-align: center; color: var(--color-secondary); }
.adm-main .admin-table tr.is-child td { background: var(--adm-canvas); }
.adm-main .admin-table tr.is-child td:nth-child(3) { padding-left: 2.25rem; }
.adm-main .admin-table tr.is-child img { width: 56px; opacity: 0.95; }
.adm-main .admin-table tr.is-parent td { font-weight: 500; }
.adm-main .admin-table tr.is-parent .text-secondary { font-weight: 400; }
.adm-pill { display: inline-block; margin-left: 0.35rem; padding: 0.1em 0.6em; border: 1px solid var(--adm-field-line); border-radius: 999px; font-size: 11.5px; font-weight: 400; color: var(--color-secondary); background: var(--adm-field); vertical-align: 1px; white-space: nowrap; }
.adm-pill-muted { margin: 0; }

.rte { max-width: none; border: 1px solid var(--adm-field-line); border-radius: var(--adm-r-sm); background: var(--adm-field); box-shadow: var(--adm-shadow); overflow: hidden; }
.rte:focus-within { border-color: var(--color-foreground); box-shadow: 0 0 0 3px var(--adm-side-active); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 0.4rem; border-bottom: 1px solid var(--adm-line); background: var(--adm-canvas); }
.adm-body .rte-select { width: auto; max-width: none; padding: 0.3em 0.5em; font-size: 13px; box-shadow: none; }
.rte-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 0.4rem; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 14px; color: var(--color-foreground); cursor: pointer; }
.rte-btn:hover, .rte-btn.is-on { background: var(--adm-side-active); }
.rte-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--adm-field-line); }
.rte-sep { width: 1px; height: 18px; margin: 0 0.3rem; background: var(--adm-field-line); }
.rte-area { min-height: 220px; max-height: 70vh; overflow-y: auto; padding: 0.9rem 1.1rem; font-size: 15px; line-height: 1.7; outline: none; }
.adm-body .rte textarea { display: none; }
.rte.is-source .rte-area { display: none; }
.adm-body .rte.is-source textarea { display: block; max-width: none; min-height: 260px; border: 0; border-radius: 0; box-shadow: none; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
.rte.is-source .rte-bar > :not(:last-child) { opacity: 0.35; pointer-events: none; }

/* Admin: contact messages */
.adm-main .admin-hub-stat { display: block; margin-bottom: 0.4rem; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.adm-msgs { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.adm-msg { border: 1px solid var(--adm-line); border-radius: var(--adm-r); padding: 1rem 1.25rem; background: var(--adm-panel); }
.adm-msg-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 14px; }
.adm-msg-head a { color: var(--color-secondary); margin-left: 0.35rem; }
.adm-msg-meta { font-size: 12.5px; color: var(--color-secondary); }
.adm-msg-subject { margin: 0.6rem 0 0; font-weight: 500; font-size: 14.5px; }
.adm-msg-body { margin: 0.4rem 0 0.9rem; white-space: pre-line; font-size: 14.5px; line-height: 1.65; }
.adm-msg-actions { display: flex; gap: 0.5rem; }
.adm-msg-actions form { margin: 0; }

/* Admin on phones: list rows become cards, tabs scroll sideways */
@media (max-width: 760px) {
	.adm-main .admin-table, .adm-main .admin-table tbody { display: block; }
	.adm-main .admin-table thead { display: none; }
	.adm-main .admin-table tr { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 0.85rem; row-gap: 0.5rem; padding: 0.85rem; border-bottom: 1px solid var(--adm-line); }
	.adm-main .admin-table tr:last-child { border-bottom: 0; }
	.adm-main .admin-table td { display: block; padding: 0; border: 0; grid-column: 2; }
	.adm-main .admin-table td:first-child { grid-column: 1; grid-row: 1 / span 4; }
	.adm-main .admin-table td:nth-child(2) { display: none; }
	.adm-main .admin-table img, .adm-main .admin-table tr.is-child img { width: 64px; }
	.adm-main .admin-table tr.is-child { padding-left: 1.5rem; }
	.adm-main .admin-table tr.is-child td:nth-child(3) { padding-left: 0; }
	.adm-main .admin-table tbody tr:hover td { background: none; }
	.adm-main .admin-table tr.is-child, .adm-main .admin-table tr.is-child td { background: var(--adm-canvas); }
	.adm-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -1.25rem; padding-right: 1.25rem; }
	.adm-tab { flex: none; }
}

/* Admin: VI/EN pairs share one framed group */
.adm-main .lang-box { display: flex; flex-direction: column; border: 1px solid var(--adm-line); border-radius: var(--adm-r); background: var(--adm-canvas); min-width: 0; }
.adm-main .lang-field { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; gap: 0.6rem; margin: 0; padding: 0.6rem 0.75rem; font-weight: 400; }
.adm-main .lang-field + .lang-field { border-top: 1px dashed var(--adm-line); }
.adm-main .lang-tag { display: inline-flex; justify-content: center; margin: 0; padding: 0.3em 0; border-radius: 6px; background: var(--adm-panel); border: 1px solid var(--adm-line); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--color-secondary); line-height: 1.4; margin-top: 0.45em; }
.adm-main .lang-field > :not(.lang-tag) { min-width: 0; max-width: none; width: 100%; margin: 0; }
.adm-main .rep-row .lang-row { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); column-gap: 1.25rem; }
.adm-main .rep-row .lang-row:last-child { border-bottom: 0; }
@media (max-width: 760px) {
	.adm-main .rep-row .lang-row { grid-template-columns: 1fr; }
	.adm-main .lang-field { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.5rem; padding: 0.55rem 0.6rem; }
}
.adm-body .lang-field input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), .adm-body .lang-field textarea { max-width: none; }

/* Admin: analytics */
.an-range { margin-top: 0.25rem; }
.an-range .adm-tab { text-decoration: none; }
.an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0 0.75rem; }
.an-kpi, .an-card { border: 1px solid var(--adm-line); border-radius: var(--adm-r); background: var(--adm-panel); }
.an-kpi { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.15rem; }
.an-kpi-num { font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; }
.an-kpi-label { font-size: 13px; color: var(--color-secondary); }
.an-card { padding: 1.1rem 1.25rem 1.2rem; margin-bottom: 0.75rem; min-width: 0; }
.an-card-title { margin: 0 0 0.9rem; font-size: 15px; font-weight: 500; letter-spacing: 0; }
.an-chart { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--gap, 3px); align-items: end; height: 180px; padding-bottom: 1px; border-bottom: 1px solid var(--adm-line); }
.an-bar { height: 100%; display: flex; align-items: flex-end; }
.an-bar span { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--color-foreground); opacity: 0.8; }
.an-bar:hover span { opacity: 1; }
.an-axis { display: flex; justify-content: space-between; margin-top: 0.4rem; font-size: 12px; color: var(--color-secondary); }
.an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.an-grid .an-card { margin: 0; }
.an-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.an-row { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0.6rem; font-size: 13.5px; border-radius: 6px; isolation: isolate; }
.an-row::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: var(--adm-side-active); z-index: -1; }
.an-row-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row-num { font-variant-numeric: tabular-nums; color: var(--color-secondary); }
.an-path { color: var(--color-secondary); font-size: 12px; margin-left: 0.25rem; }
.an-empty, .an-note { margin: 0.75rem 0 0; font-size: 12.5px; color: var(--color-secondary); line-height: 1.55; }
.an-setup p { font-size: 14px; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
	.an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.an-grid { grid-template-columns: 1fr; }
	.an-chart { height: 140px; gap: 2px; }
}
.an-bar { position: relative; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.an-bar em { font-style: normal; font-size: 12px; color: var(--color-secondary); text-align: center; margin-bottom: 0.3rem; font-variant-numeric: tabular-nums; }
.an-bar.is-current span { opacity: 0.4; }
.an-chart-months { gap: 0.75rem; }
.an-months-axis { height: auto; border: 0; gap: 0.75rem; margin-top: 0.4rem; font-size: 12px; color: var(--color-secondary); text-align: center; }

/* Admin: drag-to-reorder */
.adm-hint { margin: 0 0 0.75rem; font-size: 13px; color: var(--color-secondary); }
.adm-order { display: flex; align-items: center; gap: 0.5rem; }
.adm-drag { display: inline-grid; place-items: center; width: 26px; height: 30px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--color-secondary); font-size: 13px; letter-spacing: -2px; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
.adm-drag:hover { border-color: var(--adm-line); background: var(--adm-panel); color: var(--color-foreground); }
.adm-sorting, .adm-sorting * { cursor: grabbing !important; user-select: none; }
.adm-main .admin-table .is-dragging td, .adm-main .admin-table tr.is-dragging td { background: var(--adm-side-active) !important; }
.adm-main .admin-table tbody:not(:last-child) tr:last-child td { border-bottom: 1px solid var(--adm-line); }
.adm-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 50; transform: translateX(-50%); padding: 0.6rem 1rem; border-radius: 8px; background: var(--color-foreground); color: var(--color-background); font-size: 13.5px; box-shadow: var(--adm-shadow); }
.adm-toast.is-bad { background: #c2362c; color: #fff; }
@media (max-width: 760px) {
	.adm-main .admin-table tr { position: relative; padding-right: 3rem; }
	.adm-main .admin-table td:nth-child(2) { display: block; position: absolute; top: 0.6rem; right: 0.5rem; }
	.adm-main .admin-table td:nth-child(2) [data-order-num], .adm-main .admin-table td:nth-child(2) .adm-pill { display: none; }
	.adm-main .admin-table tbody:not(:last-child) tr:last-child { border-bottom: 1px solid var(--adm-line); }
	.adm-drag { width: 32px; height: 36px; border-color: var(--adm-line); }
}

/* Admin: checkbox rows, publish status */
.adm-main .form-row > label:only-child { justify-content: flex-start; cursor: pointer; }
.adm-main .form-row input[type="checkbox"], .adm-main .form-row input[type="radio"] { width: auto; max-width: none; flex: none; margin: 0; accent-color: var(--color-foreground); }
.adm-choices { display: flex; flex-direction: column; gap: 0.5rem; max-width: 560px; }
.adm-main .adm-choice { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0; padding: 0.7rem 0.85rem; border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); cursor: pointer; font-weight: 400; }
.adm-main .adm-choice input { margin-top: 0.2rem; }
.adm-main .adm-choice:has(input:checked) { border-color: var(--color-foreground); background: var(--adm-side-active); }
.adm-choice span { display: flex; flex-direction: column; gap: 0.15rem; font-size: 14px; }
.adm-choice strong { font-weight: 500; }
.adm-choice small { font-size: 12.5px; color: var(--color-secondary); }
.adm-main .form-row[hidden] { display: none; }
.adm-pill-draft { border-style: dashed; }
.adm-pill-scheduled { color: #b4690e; border-color: rgba(180, 105, 14, 0.4); background: rgba(180, 105, 14, 0.08); }
:root[data-theme="dark"] .adm-pill-scheduled { color: #f0b45c; }

/* Hub cards: fixed column count per hub (set in views.js), wrapping onto new rows */
@media (min-width: 901px) {
	.hub-steps.hub-cols-1 { grid-template-columns: minmax(0, 1fr); }
	.hub-steps.hub-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hub-steps.hub-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hub-steps.hub-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hub-steps li:last-child { border-right: 1px solid var(--color-tertiary); }
	.hub-cols-1 li, .hub-cols-2 li:nth-child(2n), .hub-cols-3 li:nth-child(3n), .hub-cols-4 li:nth-child(4n) { border-right: 0; }
	.hub-cols-2 li:nth-child(n+3), .hub-cols-3 li:nth-child(n+4), .hub-cols-4 li:nth-child(n+5) { border-top: 1px solid var(--color-tertiary); }
}

/* Atelier: personal works. Masonry-style grid keeps each piece at its own proportions. */
.at-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.at-chip { padding: 0.45rem 0.95rem; border: 1px solid var(--color-tertiary); border-radius: 999px; background: none; color: var(--color-secondary); font: inherit; font-size: var(--t-meta); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; }
.at-chip:hover { color: var(--color-foreground); border-color: var(--color-secondary); }
.at-chip.is-active { border-color: var(--color-foreground); background: var(--color-foreground); color: var(--color-background); }
.at-grid { columns: 3 260px; column-gap: clamp(16px, 2vw, 28px); }
.at-item { display: block; break-inside: avoid; margin-bottom: clamp(24px, 3vw, 40px); text-decoration: none; color: inherit; }
.at-item[hidden] { display: none; }
.at-item img, .at-noimg { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--color-quaternary); transition: opacity 0.25s ease; }
.at-noimg { aspect-ratio: 4 / 5; }
.at-item:hover img { opacity: 0.88; }
.at-item-meta { display: block; margin-top: 0.85rem; font-size: var(--t-eyebrow); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); }
.at-item-title { display: block; margin-top: 0.35rem; font-size: var(--t-h3); line-height: 1.3; }
.at-wip { color: #b4690e; }
:root[data-theme="dark"] .at-wip { color: #f0b45c; }

.at-head .eyebrow { margin-bottom: 0.75rem; }
.at-head-meta { margin: 0 0 1.5rem; font-size: var(--t-meta); color: var(--color-secondary); }
.at-final { max-height: 88vh; object-fit: contain; background: none; }
.at-process { max-width: 960px; margin: 0 auto; }
.at-process-title { margin: 0 0 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-foreground); font-size: var(--t-h3); font-weight: 400; }
.at-entry { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 2rem; padding: 0 0 clamp(28px, 4vw, 48px); }
.at-entry > :not(.at-entry-meta) { grid-column: 2; }
.at-entry-meta { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 0.3rem; font-size: var(--t-meta); color: var(--color-secondary); }
.at-kind { color: var(--color-foreground); font-weight: 500; }
.at-entry-img { display: block; max-width: 100%; max-height: 85vh; width: auto; height: auto; border-radius: var(--radius); }
.at-entry-note { margin: 0.9rem 0 0; font-size: var(--t-body-sm); line-height: 1.7; color: var(--color-secondary); white-space: pre-line; }
.at-entry-img + .at-entry-note { margin-top: 0.9rem; }
.at-entry.is-abandoned .at-entry-img { opacity: 0.55; filter: grayscale(0.4); }
.at-process.is-gallery .at-entry { grid-template-columns: minmax(0, 1fr); }
.at-process.is-gallery .at-entry > * { grid-column: 1; }
@media (max-width: 700px) {
	.at-entry { grid-template-columns: minmax(0, 1fr); }
	.at-entry > :not(.at-entry-meta), .at-entry-meta { grid-column: 1; grid-row: auto; }
	.at-entry-meta { flex-direction: row; gap: 0.75rem; margin-bottom: 0.6rem; }
}

/* Atelier admin */
.adm-intro-box { margin-bottom: 1.5rem; padding: 0.9rem 1.1rem; border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); }
.adm-intro-box summary { cursor: pointer; font-weight: 500; }
.adm-intro-box form { margin-top: 1rem; }

/* A short ruled list of links (Home "Outside of work", About story) */
.link-list { display: flex; flex-direction: column; align-self: stretch; margin-top: 0.5rem; border-top: 1px solid var(--color-tertiary); }
.link-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-tertiary); font-size: 14px; line-height: 1.45; color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
.link-list a:hover { opacity: 0.65; }
.link-list a span:last-child { flex: none; transition: transform 0.2s ease; }
.link-list a:hover span:last-child { transform: translateX(3px); }
.ab-story-fig figcaption.link-list { margin-top: 1.25rem; }
.ab-story .link-list a { font-size: var(--t-body-sm); }