/* ==========================================================================
   Custom theme layer for hendrydong.github.io
   Loaded AFTER assets/css/main.css so these rules refine the Prologue template
   without touching its layout engine. All colours are centralised in :root —
   to switch the accent (e.g. back to the original warm rose), change --accent.
   ========================================================================== */

:root {
	/* Neutral ink ramp — higher contrast than the template's flat #888 */
	--ink-900: #1d2127;
	--ink-800: #262b32;
	--ink-700: #333941;
	--ink-600: #454c56;
	--ink-500: #566069;   /* body text */
	--ink-400: #7c848e;   /* muted / meta */

	--line:      #e6e9ee;
	--line-soft: #eef1f5;
	--bg:        #ffffff;
	--bg-soft:   #f7f9fb;
	--bg-tint:   #f2f5f9;

	/* Primary accent — indigo. One variable to rule them all. */
	--accent:      #4f5bd5;
	--accent-600:  #3f49bd;
	--accent-700:  #333da6;
	--accent-tint: #eef0fc;

	/* Award / highlight — kept red so "Best Paper" reads as distinct signal.
	   #c22f26 passes WCAG AA on both white (5.6:1) and --award-bg (4.9:1). */
	--award:     #c22f26;
	--award-bg:  #fdecea;

	/* Sidebar */
	--side-a: #1c2026;
	--side-b: #2a2f39;

	--radius:    14px;
	--radius-sm: 9px;
	--shadow-sm: 0 1px 2px rgba(16, 22, 34, .04), 0 2px 6px rgba(16, 22, 34, .05);
	--shadow-md: 0 6px 18px rgba(16, 22, 34, .08), 0 2px 6px rgba(16, 22, 34, .05);
}

/* --------------------------------------------------------------------------
   Base typography & rhythm
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
	font-family: "Inter", "Segoe UI", "Helvetica Neue", Helvetica, Arial,
		"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans", sans-serif;
	color: var(--ink-500);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: .002em;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink-800); }
strong, b { color: var(--ink-700); font-weight: 600; }

::selection { background: var(--accent-tint); color: var(--accent-700); }

a {
	color: var(--accent-600);
	border-bottom: 1px solid rgba(79, 91, 213, .22);
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a:hover { color: var(--accent-700); border-bottom-color: var(--accent); }

/* Keyboard accessibility */
a:focus-visible,
button:focus-visible,
.show-more:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Section headers get an editorial accent rule */
#main > section > .container > header { position: relative; }
#main > section > .container > header > h2 {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 500;
	color: var(--ink-900);
	letter-spacing: -.01em;
	padding-bottom: .35em;
}
#main > section > .container > header > h2::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 3.2em; height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--accent), #7b86e8);
}

/* Sub-section titles ("Alignment of Foundation Models", "Teaching", ...) */
#research h3, #teaching h3 {
	color: var(--ink-800);
	font-weight: 600;
	font-size: 1.28em;
	letter-spacing: -.005em;
	padding-left: .7em;
	border-left: 4px solid var(--accent);
	line-height: 1.25em;
	margin-top: .4em;
}

/* --------------------------------------------------------------------------
   Sidebar (#header)
   -------------------------------------------------------------------------- */

#header {
	background: linear-gradient(180deg, var(--side-a) 0%, var(--side-b) 100%);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, .04),
		4px 0 24px rgba(10, 14, 20, .12);
}

#logo { margin: 2em 1.5em 1.25em 1.5em; }

/* Circular avatar with a soft ring */
#header .image.avatar48,
#header .image.avatar48 img {
	width: 52px; height: 52px;
}
#header .image.avatar48 {
	background: none;
	border-radius: 50%;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .14), 0 4px 12px rgba(0, 0, 0, .35);
	overflow: hidden;
}
#header .image.avatar48 img { border-radius: 50%; object-fit: cover; }

/* When the sidebar collapses to a narrow rail, the avatar stacks above name */
#logo h1#title {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	font-size: 1.28em;
	letter-spacing: .01em;
	color: #fff;
}

/* Nav items: rounded, with an accent bar on the active/hovered item */
#nav ul li a {
	position: relative;
	margin: 1px .8em;
	border-radius: 8px;
	color: rgba(255, 255, 255, .6);
	transition: background-color .2s ease, color .2s ease;
}
#nav ul li a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
#nav ul li a.active {
	background: rgba(79, 91, 213, .18);
	box-shadow: inset 0 0 0 1px rgba(123, 134, 232, .35);
	color: #fff;
}
#nav ul li a.active span:before,
#nav ul li a:hover span:before { color: #97a2f0; }
#nav ul li a span:before { color: #6b7480; transition: color .2s ease; }

/* Social icons at the bottom of the rail */
#header .icons a {
	color: rgba(255, 255, 255, .55);
	width: 2.4em; height: 2.4em; line-height: 2.4em;
	border-radius: 50%;
	margin: 0 .1em;
	transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
#header .icons a:hover {
	color: #fff;
	background: rgba(79, 91, 213, .55);
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   Hero / cover section
   -------------------------------------------------------------------------- */

#top { position: relative; }
#top::before {
	content: "";
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(18, 22, 30, .28) 0%, rgba(18, 22, 30, .55) 100%),
		radial-gradient(120% 120% at 20% 0%, rgba(79, 91, 213, .35) 0%, rgba(79, 91, 213, 0) 55%);
	pointer-events: none;
}
#top .container { position: relative; z-index: 1; }

#top header { margin-bottom: 0; }
#top h2.alt {
	font-family: "Fraunces", Georgia, serif;
	font-size: 3.4em;
	line-height: 1.05em;
	letter-spacing: -.01em;
	color: #fff !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
	margin-bottom: .25em;
}
#top h2.alt strong { color: #fff; font-weight: 600; }

.hero-sub {
	font-size: 1.15em;
	font-weight: 500;
	color: #fff;
	margin: 0 0 .5em 0 !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.hero-tags {
	font-size: .92em;
	color: rgba(255, 255, 255, .82) !important;
	letter-spacing: .01em;
	margin: 0 !important;
}
.hero-tags .dot { color: rgba(255, 255, 255, .45); padding: 0 .5em; }

/* --------------------------------------------------------------------------
   Section background tints (refined, cohesive)
   -------------------------------------------------------------------------- */

#main > section.two   { background-color: #ffffff; }
#main > section.three { background-color: var(--bg-soft); }
#main > section#teaching { background-color: #ffffff; }
#main > section#contact  { background-color: var(--bg-soft); }
#main > section { box-shadow: inset 0 1px 0 0 var(--line-soft); }

.container { padding-left: 2em; padding-right: 2em; }

/* Intro paragraphs read a touch larger & calmer */
#about > .container > p { color: var(--ink-500); }
#about > .container > p a,
#research .container > p a { font-weight: 500; }

/* --------------------------------------------------------------------------
   News — card + timeline
   -------------------------------------------------------------------------- */

.news-container {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	padding: 1.5em 1.75em;
	color: var(--ink-500);
	line-height: 1.6;
	margin-top: 1.5em;
}
.news-container h3 {
	color: var(--ink-900);
	font-weight: 600;
	font-size: 1.15em;
	margin-bottom: .9em;
	display: flex; align-items: center; gap: .5em;
}
.news-container h3::before {
	content: "";
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-tint);
}

.news-item {
	position: relative;
	padding: .5em 0 .5em 1.25em;
	margin-bottom: 0 !important;
	border-left: 2px solid var(--line);
}
.news-item::before {
	content: "";
	position: absolute; left: -5px; top: 1.05em;
	width: 8px; height: 8px; border-radius: 50%;
	background: #c7ccd4; border: 2px solid var(--bg);
}
.news-item:hover::before { background: var(--accent); }

.news-date {
	display: inline-block;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: .82em;
	color: var(--accent-700);
	background: var(--accent-tint);
	border-radius: 6px;
	padding: .1em .5em;
	margin-right: .35em;
}
/* keep the   spacing from ballooning next to the new pill */
.news-item .news-date + br { display: none; }

.award-highlight { color: var(--award) !important; }
.news-date.award-highlight {
	color: var(--award) !important;
	background: var(--award-bg);
}

.show-more {
	display: inline-block;
	margin-top: 1em;
	font-size: .85em;
	font-weight: 600;
	color: var(--accent-600);
	background: var(--accent-tint);
	padding: .4em 1em;
	border-radius: 999px;
	border: 1px solid transparent;
	cursor: pointer;
}
.show-more:hover {
	color: #fff; background: var(--accent);
	text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Publications — soft cards
   -------------------------------------------------------------------------- */

.pub-list {
	list-style: none;
	padding-left: 0;
	margin-bottom: 2.5em;
}
.pub-list li {
	position: relative;
	background: var(--bg);
	border: 1px solid var(--line);
	border-left: 3px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 1em 1.25em;
	margin-bottom: .85em;
	box-shadow: var(--shadow-sm);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pub-list li:hover {
	border-left-color: var(--accent);
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Neutralise deprecated <font size> sizing inside entries */
.pub-list li font { font-size: inherit !important; }

/* Title */
.pub-list li > strong:first-child {
	display: block;
	color: var(--ink-900);
	font-weight: 600;
	font-size: 1.03em;
	line-height: 1.4em;
	letter-spacing: -.003em;
	margin-bottom: .35em;
}
/* Authors */
.pub-list li i { color: var(--ink-500); font-style: italic; }
/* The site owner's name — highlighted */
.pub-list li i u {
	color: var(--accent-700);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1.5px solid rgba(79, 91, 213, .35);
}
/* Venue line */
.pub-list li font strong {
	color: var(--ink-700);
	font-weight: 600;
}
/* Award text inside a venue keeps its red */
.pub-list li font[color] { color: var(--award) !important; font-weight: 600; }

/* Paper / Github / Project links → pill buttons */
.pub-list li a[href] {
	display: inline-block;
	margin: .5em .4em 0 0;
	padding: .18em .7em;
	font-size: .82em;
	font-weight: 600;
	line-height: 1.5;
	color: var(--accent-700);
	background: var(--accent-tint);
	border: 1px solid rgba(79, 91, 213, .18);
	border-radius: 999px;
	white-space: nowrap;
}
.pub-list li a[href]:hover {
	color: #fff;
	background: var(--accent);
	border-color: var(--accent);
}

/* Legend line above the list */
#research .container > p font { font-size: inherit !important; }

/* --------------------------------------------------------------------------
   Academic services, teaching, awards, contact
   -------------------------------------------------------------------------- */

.service-list {
	list-style: none;
	padding-left: 0;
	font-size: 1em;
	line-height: 1.7;
}
.service-list li {
	position: relative;
	padding: .35em 0 .35em 1.3em;
}
.service-list li::before {
	content: "";
	position: absolute; left: 0; top: .95em;
	width: 6px; height: 6px; border-radius: 50%;
	background: var(--accent);
}

.teaching-list li,
.awards-list li {
	padding: .5em .9em;
	margin-bottom: .3em;
	border-radius: var(--radius-sm);
	line-height: 1.5;
	transition: background-color .2s ease;
}
.teaching-list li:hover,
.awards-list li:hover { background: var(--bg-tint); }
.teaching-list li strong,
.awards-list li strong {
	display: inline-block;
	min-width: 6.5em;
	color: var(--accent-700);
	font-weight: 600;
}
.awards-list li em,
.teaching-list li em { color: var(--ink-600); font-style: normal; }

#contact .container p { color: var(--ink-500); }

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

#footer {
	background: var(--bg-tint);
	color: var(--ink-500);
}
#footer .copyright li { color: var(--ink-500); }

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */

@media screen and (max-width: 960px) {
	#top h2.alt { font-size: 2.6em; }
	.hero-sub { font-size: 1.05em; }
}

@media screen and (max-width: 736px) {
	/* Restore the template's tighter mobile gutters (main.css uses 15px here) */
	.container { padding-left: 15px; padding-right: 15px; }
	#top h2.alt { font-size: 2.1em; }
	.hero-tags { font-size: .85em; }
	.news-container { padding: 1.2em 1.1em; }
	.pub-list li { padding: .9em 1em; }
	.teaching-list li strong,
	.awards-list li strong { display: block; min-width: 0; margin-bottom: .1em; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.pub-list li:hover,
	#header .icons a:hover { transform: none; }
}