/* =========================================================
   Khanh Duong — V3 Warm Personal-Academic
   Paste this entire file into:
   WP Admin → Appearance → Customize → Additional CSS
   (or Appearance → Editor → Styles → Additional CSS on block themes)
   ========================================================= */
/* --- 0. Fonts --------------------------------------------------------- */
/* --- 1. Hide theme default header / footer / title -------------------- *
   We render our own header + footer inside the Custom HTML block on every
   page, so we hide whatever the theme injects. Covers both classic and
   block themes (Twenty Twenty-Four, Twenty Twenty-Three, etc.).
   If a single one of these doesn't apply to your theme, no harm done.   */
header.wp-block-template-part,
footer.wp-block-template-part,
.site-header,
.site-footer,
#masthead,
#colophon,
.wp-block-post-title,
.entry-header,
.entry-footer {
	display: none !important;
}

/* Strip default content paddings on TT24 wrappers so our .container takes
 * over. IMPORTANT: do NOT target bare main element — our content uses
 * main.container which must keep its 62rem constraint.                 */
.wp-site-blocks,
.wp-block-group.is-layout-constrained,
.is-layout-constrained,
.is-layout-flow,
.entry-content,
.wp-block-post-content,
main.wp-block-group,
main.is-layout-constrained,
.wp-block-template-part {
	max-width: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Force OUR .container to win over the reset above. */
main.container,
.container {
	max-width: 62rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

main.container-prose,
.container-prose {
	max-width: 38rem !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
}

/* Force our warm-cream background onto theme's body wrappers.           */
html,
body,
.wp-site-blocks,
.wp-block-post-content {
	background: #FDFAF4 !important;
}

/* TT24 injects styles on links inside post content; force our          *
 * card/btn/brand styling to win.                                        */
.wp-block-post-content a.card,
.wp-block-post-content .card,
a.card {
	background: #FFFCF5 !important;
	border: 1px solid #E8DEC7 !important;
	border-left: 3px solid #E8B898 !important;
	border-radius: 8px !important;
	padding: 1.25rem 1.5rem !important;
	text-decoration: none !important;
	color: #2A2418 !important;
	display: block !important;
}

.wp-block-post-content a.card:hover,
a.card:hover {
	border-left-color: #C2562A !important;
	background: #FFFCF5 !important;
}

/* Buttons — primary filled terracotta */
.wp-block-post-content a.btn,
a.btn,
.btn {
	background: #C2562A !important;
	color: #FFFCF5 !important;
	border: 1px solid #C2562A !important;
	border-radius: 6px !important;
	padding: .6rem 1.1rem !important;
	text-decoration: none !important;
	display: inline-block !important;
	font-weight: 500 !important;
}

.wp-block-post-content a.btn:hover,
a.btn:hover,
.btn:hover {
	background: #9B3F1C !important;
	border-color: #9B3F1C !important;
	color: #FFFCF5 !important;
}

/* Ghost button — outlined */
.wp-block-post-content a.btn.ghost,
a.btn.ghost,
.btn.ghost {
	background: transparent !important;
	color: #C2562A !important;
}

.wp-block-post-content a.btn.ghost:hover,
a.btn.ghost:hover,
.btn.ghost:hover {
	background: #C2562A !important;
	color: #FFFCF5 !important;
}

/* Featured button — same as primary but with warm-yellow halo + bigger */
.wp-block-post-content a.btn.featured,
a.btn.featured,
.btn.featured {
	background: #C2562A !important;
	color: #FFFCF5 !important;
	border: 1px solid #C2562A !important;
	padding: .75rem 1.4rem !important;
	font-size: 1.0625rem !important;
	font-weight: 600 !important;
	box-shadow: 0 0 0 4px rgba(245, 230, 168, 0.55) !important;
}

.wp-block-post-content a.btn.featured:hover,
a.btn.featured:hover,
.btn.featured:hover {
	background: #9B3F1C !important;
	border-color: #9B3F1C !important;
	color: #FFFCF5 !important;
	box-shadow: 0 0 0 4px rgba(245, 230, 168, 0.8) !important;
}

.wp-block-post-content a.brand,
a.brand {
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.wp-block-post-content .nav a,
.nav a {
	text-decoration: none !important;
	border-bottom: 0 !important;
}

.wp-block-post-content .tag,
.tag {
	background: #F5EFE2 !important;
	border-radius: 99px !important;
	padding: 2px 10px !important;
	color: #7A6F5C !important;
	font-size: .8rem !important;
}

/* Force fonts onto theme defaults (TT24's theme.json may try to override). */
html body,
html body p,
html body span,
html body a,
html body li,
html body div {
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

html body h1,
html body h2,
html body h3,
html body .brand,
html body .card-title,
html body .pub-title,
html body .article h1,
html body .page-head h1 {
	font-family: "Lora", "Source Serif Pro", Georgia, serif !important;
}

html body .greeting,
html body .script,
html body .label,
html body .heart,
html body .year-head,
html body .chapter-num,
html body .aim-num,
html body .now-box .label,
html body .reach-box h3,
html body .cta-row .hint {
	font-family: "Caveat", "Brush Script MT", cursive !important;
}

/* Remove dotted underline on hero links row — cleaner solid color */
.hero .links a,
.wp-block-post-content .hero .links a {
	border-bottom-style: solid !important;
	border-bottom-width: 1px !important;
	border-bottom-color: #E8B898 !important;
}

/* Or, if you prefer NO underline at all on hero links, swap to:
   border-bottom: 0 !important;
*/
/* ============================================================
   Aggressive size + color overrides — TT24 theme.json otherwise
   overrides our font-size and color on headings/accents.
   ============================================================ */
/* Hero greeting — terracotta script */
html body .greeting,
.wp-block-post-content .greeting {
	font-family: "Caveat", "Brush Script MT", cursive !important;
	font-size: 1.75rem !important;
	color: #C2562A !important;
	display: inline-block !important;
	margin-bottom: .25rem !important;
}

/* Hero h1 — big serif */
html body .hero h1,
.wp-block-post-content .hero h1 {
	font-family: "Lora", Georgia, serif !important;
	font-size: 3.25rem !important;
	font-weight: 600 !important;
	letter-spacing: -.02em !important;
	line-height: 1.1 !important;
	color: #2A2418 !important;
	margin: 0 0 1.25rem !important;
}

/* Hero bio paragraphs — slightly larger soft text */
html body .hero .bio,
.wp-block-post-content .hero .bio {
	font-size: 1.2rem !important;
	line-height: 1.7 !important;
	color: #4A4030 !important;
	margin: 0 0 1.25rem !important;
	max-width: 36rem !important;
}

/* Section h2 (Selected research, Recent writing, etc.) */
html body h2,
.wp-block-post-content h2 {
	font-family: "Lora", Georgia, serif !important;
	font-size: 2rem !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	color: #2A2418 !important;
	margin: 0 0 1.5rem !important;
}

/* Section "more" link (e.g. "All publications →") */
html body .section-head .more,
html body a.more,
.wp-block-post-content .more {
	color: #C2562A !important;
	font-size: .9rem !important;
	border-bottom: 0 !important;
	text-decoration: none !important;
}

html body .section-head .more:hover,
html body a.more:hover,
.wp-block-post-content .more:hover {
	color: #9B3F1C !important;
	background: transparent !important;
}

/* Section head — flex row with right-aligned "more" link */
html body .section-head,
.wp-block-post-content .section-head {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	gap: 1rem !important;
	flex-wrap: wrap !important;
	margin-bottom: 1.5rem !important;
}

html body .section-head h2,
.wp-block-post-content .section-head h2 {
	margin: 0 !important;
}

/* Card title — serif inside card */
html body .card-title,
.wp-block-post-content .card-title {
	font-family: "Lora", Georgia, serif !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	color: #2A2418 !important;
	line-height: 1.3 !important;
	margin-bottom: .4rem !important;
}

/* Card date — uppercase mini */
html body .card .date,
.wp-block-post-content .card .date {
	font-size: .8rem !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: #7A6F5C !important;
	margin-bottom: .5rem !important;
	display: block !important;
	font-family: "Inter", sans-serif !important;
}

/* Card description */
html body .card .desc,
.wp-block-post-content .card .desc {
	font-size: .9rem !important;
	color: #4A4030 !important;
	margin: 0 !important;
	line-height: 1.55 !important;
	font-family: "Inter", sans-serif !important;
}

/* ============================================================
   FINAL FORCE OVERRIDES — cover every visible element so TT24's
   theme.json cannot override font-size / color anywhere.
   ============================================================ */
/* Brand (logo text top-left) */
html body .brand,
.wp-block-post-content .brand {
	font-family: "Lora", Georgia, serif !important;
	font-size: 1.4rem !important;
	font-weight: 600 !important;
	color: #2A2418 !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	letter-spacing: -.01em !important;
}

/* Nav links */
html body .nav,
.wp-block-post-content .nav {
	display: flex !important;
	gap: 1.75rem !important;
	font-size: .9rem !important;
}

html body .nav a,
.wp-block-post-content .nav a {
	color: #4A4030 !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
	font-family: "Inter", sans-serif !important;
	font-weight: 400 !important;
}

html body .nav a.active,
.wp-block-post-content .nav a.active {
	color: #C2562A !important;
}

/* Page-head (Research, Publications, Writing, Dissertation pages) */
html body .page-head .script,
.wp-block-post-content .page-head .script {
	font-family: "Caveat", "Brush Script MT", cursive !important;
	font-size: 1.6rem !important;
	color: #C2562A !important;
	display: block !important;
	margin-bottom: .25rem !important;
}

html body .page-head h1,
.wp-block-post-content .page-head h1 {
	font-family: "Lora", Georgia, serif !important;
	font-size: 2.5rem !important;
	font-weight: 600 !important;
	letter-spacing: -.02em !important;
	line-height: 1.15 !important;
	color: #2A2418 !important;
	margin: 0 0 .75rem !important;
}

html body .page-head .lead,
.wp-block-post-content .page-head .lead,
html body p.lead,
.wp-block-post-content p.lead {
	font-family: "Inter", sans-serif !important;
	font-size: 1.2rem !important;
	color: #4A4030 !important;
	line-height: 1.7 !important;
	font-weight: 400 !important;
	margin: 0 !important;
}

/* Now-box (callout box) */
html body .now-box,
.wp-block-post-content .now-box {
	background: #FFFCF5 !important;
	border: 1px solid #E8DEC7 !important;
	border-radius: 10px !important;
	padding: 1.5rem 1.75rem !important;
}

html body .now-box .label,
.wp-block-post-content .now-box .label {
	font-family: "Caveat", cursive !important;
	font-size: 1.4rem !important;
	color: #C2562A !important;
	display: block !important;
	margin-bottom: .25rem !important;
}

/* Year heading (publications, dissertation) */
html body .year-head,
.wp-block-post-content .year-head {
	font-family: "Caveat", cursive !important;
	font-size: 2.2rem !important;
	color: #C2562A !important;
	margin: 2.5rem 0 .75rem !important;
	line-height: 1 !important;
}

/* Publication entries (publications.html, dissertation related papers) */
html body .pub,
.wp-block-post-content .pub {
	background: #FFFCF5 !important;
	padding: 1.1rem 1.4rem !important;
	border-radius: 8px !important;
	border: 1px solid #E8DEC7 !important;
	border-left: 3px solid #E8B898 !important;
}

html body .pub-venue,
.wp-block-post-content .pub-venue {
	font-family: "Inter", sans-serif !important;
	font-size: .8rem !important;
	text-transform: uppercase !important;
	letter-spacing: .08em !important;
	color: #7A6F5C !important;
	margin-bottom: .4rem !important;
	display: block !important;
}

html body .pub-title,
.wp-block-post-content .pub-title {
	font-family: "Lora", Georgia, serif !important;
	font-size: 1.1rem !important;
	font-weight: 600 !important;
	color: #2A2418 !important;
	line-height: 1.35 !important;
	margin: 0 0 .4rem !important;
}

html body .pub-title a,
.wp-block-post-content .pub-title a {
	color: #2A2418 !important;
	text-decoration: none !important;
	border-bottom: 0 !important;
}

html body .pub-authors,
.wp-block-post-content .pub-authors {
	font-family: "Inter", sans-serif !important;
	font-size: .9rem !important;
	color: #4A4030 !important;
	margin: 0 0 .5rem !important;
	line-height: 1.5 !important;
}

html body .pub-authors strong,
.wp-block-post-content .pub-authors strong {
	color: #C2562A !important;
	font-weight: 600 !important;
}

html body .pub-links,
.wp-block-post-content .pub-links {
	font-family: "Inter", sans-serif !important;
	font-size: .9rem !important;
	color: #7A6F5C !important;
}

html body .pub-links a,
.wp-block-post-content .pub-links a {
	color: #C2562A !important;
}

/* Dissertation aim card */
html body .aim,
.wp-block-post-content .aim {
	background: #FFFCF5 !important;
	border: 1px solid #E8DEC7 !important;
	border-left: 3px solid #E8B898 !important;
	border-radius: 8px !important;
	padding: 1.4rem 1.6rem !important;
	margin-bottom: 1.5rem !important;
}

html body .aim-num,
.wp-block-post-content .aim-num {
	font-family: "Caveat", cursive !important;
	font-size: 1.4rem !important;
	color: #C2562A !important;
	display: block !important;
	margin-bottom: .1rem !important;
}

html body .aim h3,
.wp-block-post-content .aim h3 {
	font-family: "Lora", Georgia, serif !important;
	font-size: 1.2rem !important;
	font-weight: 600 !important;
	color: #2A2418 !important;
	margin: 0 0 .6rem !important;
	line-height: 1.3 !important;
}

html body .aim p,
.wp-block-post-content .aim p {
	font-size: 1.0625rem !important;
	color: #4A4030 !important;
	line-height: 1.6 !important;
	margin: 0 0 .6rem !important;
}

html body .aim .linked-pub,
.wp-block-post-content .aim .linked-pub {
	font-size: .9rem !important;
	color: #7A6F5C !important;
	font-style: italic !important;
	margin-top: .6rem !important;
	padding-top: .6rem !important;
	border-top: 1px dashed #E8DEC7 !important;
}

/* Committee + diss-meta boxes */
html body .committee,
.wp-block-post-content .committee {
	background: #F5EFE2 !important;
	border-radius: 8px !important;
	padding: 1rem 1.25rem !important;
	margin: 1rem 0 2rem !important;
	font-size: .9rem !important;
}

html body .committee strong,
.wp-block-post-content .committee strong {
	display: block !important;
	color: #2A2418 !important;
	font-weight: 600 !important;
	margin-bottom: .25rem !important;
}

html body .diss-meta,
.wp-block-post-content .diss-meta {
	font-size: .9rem !important;
	color: #7A6F5C !important;
}

html body .diss-meta strong,
.wp-block-post-content .diss-meta strong {
	color: #4A4030 !important;
	font-weight: 500 !important;
}

/* Article (single blog post page) */
html body .article h1,
.wp-block-post-content .article h1 {
	font-family: "Lora", Georgia, serif !important;
	font-size: 2.5rem !important;
	font-weight: 600 !important;
	letter-spacing: -.02em !important;
	line-height: 1.15 !important;
	color: #2A2418 !important;
	margin: 0 0 .5rem !important;
}

html body .article .prose,
.wp-block-post-content .article .prose {
	font-family: "Lora", Georgia, serif !important;
	font-size: 1.15rem !important;
	line-height: 1.8 !important;
	color: #2A2418 !important;
}

html body .article .prose p,
.wp-block-post-content .article .prose p {
	font-family: "Lora", Georgia, serif !important;
	margin: 0 0 1.35rem !important;
}

html body .article .prose h2,
.wp-block-post-content .article .prose h2 {
	font-family: "Lora", Georgia, serif !important;
	font-size: 1.5rem !important;
	color: #2A2418 !important;
	margin: 2.5rem 0 1rem !important;
}

html body .article .prose blockquote,
.wp-block-post-content .article .prose blockquote {
	margin: 1.5rem 0 !important;
	padding: .5rem 1.5rem !important;
	border-left: 3px solid #C2562A !important;
	background: #FFFCF5 !important;
	color: #2A2418 !important;
	font-style: italic !important;
	border-radius: 0 6px 6px 0 !important;
}

html body .article .meta-row,
.wp-block-post-content .article .meta-row {
	font-family: "Inter", sans-serif !important;
	font-size: .9rem !important;
	color: #7A6F5C !important;
}

/* Hero portrait (image must keep aspect ratio inside round mask) */
html body .hero .portrait,
.wp-block-post-content .hero .portrait {
	width: 300px !important;
	height: 300px !important;
	border-radius: 50% !important;
	overflow: hidden !important;
	border: 4px solid #FFFCF5 !important;
}

html body .hero .portrait img,
.wp-block-post-content .hero .portrait img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 60% 35% !important;
	border-radius: 0 !important;
	border: 0 !important;
}

/* Footer styling */
html body .kd-footer,
.wp-block-post-content .kd-footer {
	margin-top: 5rem !important;
	padding: 2.5rem 0 2rem !important;
	border-top: 1px dashed #DDD2BB !important;
	font-size: .9rem !important;
	color: #7A6F5C !important;
}

html body .kd-footer a,
.wp-block-post-content .kd-footer a {
	color: #4A4030 !important;
	border-bottom: 0 !important;
	text-decoration: none !important;
}

html body .kd-footer .heart,
.wp-block-post-content .kd-footer .heart {
	font-family: "Caveat", cursive !important;
	color: #C2562A !important;
}

/* --- 2. Design tokens ------------------------------------------------- */
:root {
}

/* --- 3. Body / typography reset -------------------------------------- */
body {
	margin: 0 !important;
	background: var(--bg) !important;
	color: var(--ink) !important;
	font-family: var(--sans) !important;
	font-size: var(--fs-base) !important;
	line-height: 1.7 !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*, ::before, ::after {
	box-sizing: border-box;
}

a {
	color: var(--accent);
	text-decoration: none;
	border-bottom: 1px solid var(--accent-soft);
	transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

a:hover {
	color: var(--accent-2);
	border-bottom-color: var(--accent);
	background: rgba(245, 230, 168, 0.4);
}

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

::selection {
	background: var(--highlight);
	color: var(--ink);
}

.container {
	max-width: var(--w-page);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.container-prose {
	max-width: var(--w-prose);
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* --- 4. Header / nav -------------------------------------------------- */
.kd-header {
	padding: 2rem 0 1.5rem;
	display: block;
}

.kd-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
}

.brand {
	font-family: var(--serif);
	font-size: 1.4rem;
	font-weight: 600;
	color: var(--ink);
	border: 0;
	letter-spacing: -.01em;
}

.brand:hover {
	color: var(--accent);
	background: transparent;
}

.nav {
	display: flex;
	gap: 1.75rem;
	font-size: var(--fs-sm);
}

.nav a {
	color: var(--ink-soft);
	border: 0;
	padding: 4px 0;
	position: relative;
}

.nav a:hover {
	color: var(--accent);
	background: transparent;
}

.nav a.active {
	color: var(--accent);
}

.nav a.active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--accent);
	border-radius: 2px;
}

/* --- 5. Hero ---------------------------------------------------------- */
.hero {
	padding: 2rem 0 4rem;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 3rem;
	align-items: start;
}

.hero .portrait {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: var(--bg-elev);
	border: 4px solid var(--paper);
	box-shadow: 0 2px 0 var(--rule);
	display: grid;
	color: var(--muted);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	overflow: hidden;
}

.hero .portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 35%;
}

.hero .greeting {
	font-family: var(--script);
	font-size: 1.75rem;
	color: var(--accent);
	margin-bottom: .25rem;
}

.hero h1 {
	font-family: var(--serif);
	font-size: var(--fs-3xl);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: 0 0 1.25rem;
	color: var(--ink);
}

.hero .bio {
	font-size: var(--fs-md);
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0 0 1.25rem;
	max-width: 36rem;
}

.hero .bio strong {
	color: var(--ink);
	font-weight: 600;
}

.hero .links {
	margin-top: 1.5rem;
	font-size: var(--fs-sm);
	color: var(--muted);
}

.hero .links a {
	border-bottom-style: dotted;
}

@media (max-width: 720px) {
	.hero {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: left;
	}
	
	.hero .portrait {
		width: 220px;
		height: 220px;
	}
}

/* --- 6. Section heads / cards ---------------------------------------- */
h2 {
	font-family: var(--serif);
	font-size: var(--fs-xl);
	font-weight: 600;
	letter-spacing: -.01em;
	margin: 0 0 1.5rem;
	color: var(--ink);
}

h3 {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	font-weight: 600;
	margin: 0 0 .5rem;
}

p {
	margin: 0 0 1rem;
}

.lead {
	font-size: var(--fs-md);
	color: var(--ink-soft);
}

.section {
	padding: 3rem 0;
	border-top: 1px dashed var(--rule);
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 1.5rem;
	gap: 1rem;
	flex-wrap: wrap;
}

.section-head h2 {
	margin: 0;
}

.section-head .small {
	font-size: var(--fs-sm);
	color: var(--muted);
	font-style: italic;
}

.section-head .more {
	font-size: var(--fs-sm);
	border: 0;
	color: var(--accent);
}

.section-head .more:hover {
	color: var(--accent-2);
	background: transparent;
}

.cards {
	display: grid;
	gap: 1.25rem;
}

.cards.two-col {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	align-items: start;
}

@media (max-width: 720px) {
	.cards.two-col {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-auto-flow: row;
	}
}

.card {
	display: block;
	background: var(--paper);
	padding: 1.25rem 1.5rem;
	border-radius: 8px;
	border: 1px solid var(--rule-soft);
	border-left: 3px solid var(--accent-soft);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 120ms ease, transform 120ms ease;
}

.card:hover {
	border-left-color: var(--accent);
	background: var(--paper);
	transform: translateX(2px);
	color: var(--ink);
}

.card .date {
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: .5rem;
	display: block;
}

.card .card-title {
	font-family: var(--serif);
	font-size: var(--fs-md);
	font-weight: 600;
	color: var(--ink);
	margin-bottom: .4rem;
	line-height: 1.3;
}

.card .desc {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	margin: 0;
	line-height: 1.55;
}

/* --- 7. Tags & buttons ----------------------------------------------- */
.tag {
	display: inline-block;
	font-size: var(--fs-xs);
	padding: 2px 10px;
	background: var(--bg-elev);
	border-radius: 99px;
	color: var(--muted);
	margin-right: 6px;
}

.btn {
	display: inline-block;
	font-size: var(--fs-sm);
	padding: .6rem 1.1rem;
	background: var(--accent);
	color: var(--paper);
	border: 1px solid var(--accent);
	border-radius: 6px;
	font-weight: 500;
}

.btn:hover {
	background: var(--accent-2);
	border-color: var(--accent-2);
	color: var(--paper);
}

.btn.ghost {
	background: transparent;
	color: var(--accent);
}

.btn.ghost:hover {
	background: var(--accent);
	color: var(--paper);
}

.btn.featured {
	padding: .75rem 1.4rem;
	font-size: var(--fs-base);
	font-weight: 600;
	box-shadow: 0 0 0 4px rgba(245, 230, 168, 0.55);
	position: relative;
}

.btn.featured:hover {
	box-shadow: 0 0 0 4px rgba(245, 230, 168, 0.8);
	transform: translateY(-1px);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-top: 1.75rem;
}

.cta-row .hint {
	font-family: var(--script);
	font-size: 1.25rem;
	color: var(--accent);
	margin-left: .4rem;
	white-space: nowrap;
}

/* --- 8. Footer ------------------------------------------------------- */
.kd-footer {
	margin-top: 5rem;
	padding: 2.5rem 0 2rem;
	border-top: 1px dashed var(--rule);
	font-size: var(--fs-sm);
	color: var(--muted);
}

.kd-footer .container {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}

.kd-footer a {
	color: var(--ink-soft);
	border: 0;
}

.kd-footer a:hover {
	color: var(--accent);
	background: transparent;
}

.kd-footer .heart {
	font-family: var(--script);
	color: var(--accent);
	font-size: 1rem;
}

/* --- 9. Page head ---------------------------------------------------- */
.page-head {
	padding: 3rem 0 2rem;
}

.page-head h1 {
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 600;
	letter-spacing: -.02em;
	margin: 0 0 .75rem;
	line-height: 1.15;
	color: var(--ink);
}

.page-head .lead {
	font-size: var(--fs-md);
	color: var(--ink-soft);
	max-width: 38rem;
	margin: 0;
}

.page-head .script {
	font-family: var(--script);
	font-size: 1.6rem;
	color: var(--accent);
	margin-bottom: .25rem;
	display: block;
}

/* --- 10. Article (single blog post) --------------------------------- */
.article {
	padding: 2rem 0 4rem;
}

.article header {
	margin-bottom: 2.5rem;
}

.article .meta-row {
	font-size: var(--fs-sm);
	color: var(--muted);
	margin-bottom: 1rem;
}

.article h1 {
	font-family: var(--serif);
	font-size: var(--fs-2xl);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.15;
	margin: 0 0 .5rem;
}

.article .prose {
	font-family: var(--serif);
	font-size: 1.15rem;
	line-height: 1.8;
	color: var(--ink);
}

.article .prose p {
	margin: 0 0 1.35rem;
}

.article .prose p:first-of-type::first-letter {
	font-family: var(--serif);
	font-size: 3.5em;
	float: left;
	line-height: .85;
	padding-right: 8px;
	padding-top: 6px;
	color: var(--accent);
	font-weight: 600;
}

.article .prose h2 {
	font-family: var(--serif);
	font-size: var(--fs-lg);
	margin: 2.5rem 0 1rem;
	color: var(--ink);
}

.article .prose blockquote {
	margin: 1.5rem 0;
	padding: .5rem 1.5rem;
	border-left: 3px solid var(--accent);
	background: var(--paper);
	color: var(--ink);
	font-style: italic;
	border-radius: 0 6px 6px 0;
}

.article .prose ul {
	padding-left: 1.5rem;
}

.article .prose li {
	margin-bottom: .5rem;
}

.article figure {
	margin: 2.25rem 0;
}

.article figure.featured {
	margin: 0 0 2.5rem;
}

.article figure img,
.article figure .img-placeholder {
	width: 100%;
	display: block;
	border-radius: 8px;
	border: 1px solid var(--rule-soft);
	box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -12px rgba(74, 64, 48, 0.18);
}

.article figure .img-placeholder {
	aspect-ratio: 16 / 9;
	background: repeating-linear-gradient(45deg,
      var(--paper) 0,
      var(--paper) 10px,
      var(--bg-elev) 10px,
      var(--bg-elev) 20px);
	display: grid;
	color: var(--muted);
	font-family: var(--sans);
	font-size: var(--fs-sm);
	font-style: italic;
}

.article figure.portrait .img-placeholder {
	aspect-ratio: 3 / 4;
}

.article figure.square   .img-placeholder {
	aspect-ratio: 1 / 1;
}

.article figcaption {
	font-family: var(--sans);
	font-size: var(--fs-sm);
	color: var(--muted);
	font-style: italic;
	text-align: center;
	margin-top: .75rem;
	line-height: 1.5;
	max-width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.article figcaption strong {
	font-style: normal;
	color: var(--ink-soft);
	font-weight: 500;
}

.article figure.wide {
	margin-left: -2rem;
	margin-right: -2rem;
}

@media (max-width: 720px) {
	.article figure.wide {
		margin-left: 0;
		margin-right: 0;
	}
}

.article figure.duo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
}

.article figure.duo .img-placeholder {
	aspect-ratio: 4 / 5;
}

.article figure.duo figcaption {
	grid-column: 1 / -1;
}

@media (max-width: 560px) {
	.article figure.duo {
		grid-template-columns: 1fr;
	}
}

/* --- 10b. Email display (prominent copyable address) --------------- */
.email-display {
	display: inline-block;
	font-family: var(--serif);
	font-size: 1.3rem;
	color: var(--ink);
	border-bottom: 2px solid var(--accent);
	padding-bottom: 2px;
	background: transparent;
}

.email-display:hover {
	color: var(--accent);
	background: transparent;
	border-bottom-color: var(--accent-2);
}

/* --- 11. Now-box / reach-box ---------------------------------------- */
.now-box {
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-radius: 10px;
	padding: 1.5rem 1.75rem;
	margin: 2rem 0;
}

.now-box .label {
	font-family: var(--script);
	font-size: 1.4rem;
	color: var(--accent);
	margin-bottom: .25rem;
	display: block;
}

/* --- 12. Publication list (publications page) ----------------------- */
.pub-list {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 1rem;
}

.pub {
	display: block;
	background: var(--paper);
	padding: 1.1rem 1.4rem;
	border-radius: 8px;
	border: 1px solid var(--rule-soft);
	border-left: 3px solid var(--accent-soft);
	transition: border-left-color 120ms ease;
}

.pub:hover {
	border-left-color: var(--accent);
}

.pub .pub-venue {
	font-family: var(--sans);
	font-size: var(--fs-xs);
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: .4rem;
	display: block;
}

.pub .pub-venue em {
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	color: var(--ink-soft);
}

.pub .pub-title {
	font-family: var(--serif);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--ink);
	line-height: 1.35;
	margin: 0 0 .4rem;
}

.pub .pub-title a {
	color: var(--ink);
	border: 0;
}

.pub .pub-title a:hover {
	color: var(--accent);
	background: transparent;
}

.pub .pub-authors {
	font-size: var(--fs-sm);
	color: var(--ink-soft);
	margin: 0 0 .5rem;
	line-height: 1.5;
}

.pub .pub-authors strong {
	color: var(--accent);
	font-weight: 600;
}

.pub .pub-authors .corr {
	font-style: italic;
	color: var(--muted);
	font-size: var(--fs-xs);
}

.pub.under-review {
	border-left-style: dashed;
}

.pub.under-review .pub-venue::after {
	content: " · under review";
	color: var(--accent);
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
}

.pub .pub-links {
	font-family: var(--sans);
	font-size: var(--fs-sm);
	color: var(--muted);
}

.pub .pub-links a {
	color: var(--accent);
	border-bottom-color: var(--accent-soft);
}

.pub .pub-links .dot {
	color: var(--rule);
	margin: 0 .3rem;
}

.year-head {
	font-family: var(--script);
	font-size: 2.2rem;
	color: var(--accent);
	margin: 2.5rem 0 .75rem;
	line-height: 1;
}

.year-head:first-of-type {
	margin-top: 1rem;
}

/* --- 13. Collaborate page lists & reach-box ------------------------- */
.marked-list {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.marked-list li {
	padding: .6rem 0 .6rem 2rem;
	position: relative;
	font-size: var(--fs-base);
	color: var(--ink);
	line-height: 1.55;
	border-bottom: 1px dashed var(--rule-soft);
}

.marked-list li:last-child {
	border-bottom: 0;
}

.marked-list.yes li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: .7rem;
	color: var(--accent);
	font-weight: 600;
	font-family: var(--sans);
}

.marked-list.no li::before {
	content: "\2014";
	position: absolute;
	left: 0;
	top: .6rem;
	color: var(--muted);
	font-weight: 400;
}

.marked-list li strong {
	color: var(--ink);
	font-weight: 600;
}

.reach-box {
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-radius: 10px;
	padding: 1.75rem 2rem;
	margin: 2rem 0 0;
}

.reach-box h3 {
	margin-top: 0;
	font-family: var(--script);
	font-size: 1.8rem;
	color: var(--accent);
	font-weight: 600;
}

.reach-box .email {
	font-family: var(--serif);
	font-size: 1.3rem;
	display: inline-block;
	margin: .5rem 0 1rem;
	color: var(--ink);
	border-bottom: 2px solid var(--accent);
}

.reach-box .email:hover {
	color: var(--accent);
	background: transparent;
}

/* --- 14. Dissertation page ----------------------------------------- */
.diss-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.5rem;
	font-size: var(--fs-sm);
	color: var(--muted);
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed var(--rule);
}

.diss-meta strong {
	color: var(--ink-soft);
	font-weight: 500;
}

.committee {
	background: var(--bg-elev);
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin: 1rem 0 2rem;
	font-size: var(--fs-sm);
}

.committee strong {
	display: block;
	color: var(--ink);
	font-weight: 600;
	margin-bottom: .25rem;
}

.committee ul {
	list-style: none;
	padding: 0;
	margin: .25rem 0 0;
	color: var(--ink-soft);
}

.committee ul li {
	padding: .1rem 0;
}

.aim {
	background: var(--paper);
	border: 1px solid var(--rule-soft);
	border-left: 3px solid var(--accent-soft);
	border-radius: 8px;
	padding: 1.4rem 1.6rem;
	margin-bottom: 1.5rem;
}

.aim .aim-num {
	font-family: var(--script);
	font-size: 1.4rem;
	color: var(--accent);
	display: block;
	margin-bottom: .1rem;
}

.aim h3 {
	margin: 0 0 .6rem;
	font-family: var(--serif);
	font-size: 1.2rem;
	line-height: 1.3;
}

.aim p {
	margin: 0 0 .6rem;
	font-size: var(--fs-base);
	color: var(--ink-soft);
	line-height: 1.6;
}

.aim p:last-child {
	margin-bottom: 0;
}

.aim .linked-pub {
	font-size: var(--fs-sm);
	color: var(--muted);
	font-style: italic;
	margin-top: .6rem;
	padding-top: .6rem;
	border-top: 1px dashed var(--rule-soft);
}

.aim .linked-pub a {
	color: var(--accent);
	border-bottom-color: var(--accent-soft);
}

/* --- 15. Responsive type ------------------------------------------- */
@media (max-width: 640px) {
	:root {
	}
}