@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");

/*
	Chinese typography overrides for Editorial by HTML5 UP.
	Loaded after main.css. Nothing here changes the template's layout —
	it only supplies CJK fonts and corrects spacing that was tuned for Latin text.
*/

/* Font stacks.
   Latin families come first so digits, units and English keep Open Sans /
   Roboto Slab; Chinese falls through to Noto, then to the system fonts. */

	body,
	input, select, textarea,
	.button {
		font-family: "Open Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	}

/* The template's body grey was picked for Latin text; Chinese glyphs carry far
   more strokes per character and read washed out at the same value. */

	body {
		color: #5f686f;
	}

	h1, h2, h3, h4, h5, h6,
	#menu ul {
		font-family: "Open Sans", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
		font-weight: 700;
	}

/* CJK spacing.
   Chinese glyphs already sit on a fixed em box, so the template's
   0.075em kerning pulls them apart; and a full glyph body needs more
   leading than Latin text does. */

	html[lang^="zh"] body {
		line-height: 1.9;
	}

	html[lang^="zh"] h1,
	html[lang^="zh"] h2,
	html[lang^="zh"] h3,
	html[lang^="zh"] h4,
	html[lang^="zh"] h5,
	html[lang^="zh"] h6,
	html[lang^="zh"] #menu ul,
	html[lang^="zh"] .button {
		letter-spacing: 0;
	}

	html[lang^="zh"] h1,
	html[lang^="zh"] h2,
	html[lang^="zh"] h3 {
		line-height: 1.5;
	}

	html[lang^="zh"] p {
		margin-bottom: 1.6em;
	}

/* uppercase does nothing to Chinese and only shouts at the language switcher. */

	html[lang^="zh"] #menu ul {
		text-transform: none;
	}

/* Menu links are no longer wrapped in <h3>, so restore a comfortable size. */

	#menu ul a,
	#menu ul span {
		font-size: 1em;
	}

	#menu > ul > li > ul a,
	#menu > ul > li > ul span {
		font-size: 0.9em;
	}

/* Role label on the members page (was an <h4>). */

	.role {
		color: #9fa3a6;
		font-size: 0.9em;
		letter-spacing: 0;
	}

/* ---------------------------------------------------------------------------
   Layout additions for the restructured site.
   Everything below builds on the template's own grid and components.
   --------------------------------------------------------------------------- */

/* The template stretches #sidebar to the full document height but leaves the
   menu inside it at the very top, so on a long page the navigation scrolls out
   of reach and the reader is left with an empty grey column. Sticking the inner
   block keeps the menu in view. The height cap matters on short laptop screens:
   the menu is around 830px tall, so without it the contact details and
   copyright would be cut off below the fold.

   Only above 1280px -- narrower than that the template already turns the
   sidebar into a fixed overlay driven by the toggle. */

	@media screen and (min-width: 1281px) {
		#sidebar > .inner {
			max-height: 100vh;
			overflow-y: auto;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}
	}

/* Narrower sidebar: 26em took a fifth of a 1500px window to hold six links. */

	#sidebar,
	#sidebar > .inner {
		width: 21em;
	}

	#sidebar .toggle {
		left: 21em;
	}

	#sidebar.inactive {
		margin-left: -21em;
	}

	@media screen and (min-width: 1281px) {
		#main {
			padding-left: 0;
		}
	}

/* The per-page #header bar was removed. It used to supply the top padding
   that keeps content clear of the sidebar toggle, so replace it here. */

	#main > .inner {
		padding-top: 4em;
	}

	@media screen and (max-width: 736px) {
		#main > .inner {
			padding-top: 5em;
		}
	}

/* Hero and section leads. */

/* The template styles header <p> as a subtitle sitting below the title, so it
   needs unwinding when used as a kicker above one. */

	.eyebrow {
		color: #9fa3a6;
		letter-spacing: 0;
		margin: 0 0 0.5em 0;
		text-transform: none;
	}

/* Tall portrait photos must not fill the viewport when used as a banner. */

	.image.main img {
		max-height: 30em;
		object-fit: cover;
	}

	.lead {
		color: #5f686f;
		font-size: 1.1em;
	}

	#hero .image.main {
		margin-bottom: 2em;
	}

	hr.minor {
		margin: 2em 0;
	}

/* Body copy now spans the full column instead of sitting beside a figure, so it
   needs a measure of its own -- unchecked, a line would run past 40 Chinese
   characters and the eye loses its place returning to the next line. */

	.prose {
		max-width: 46em;
	}

/* The research page runs Characterization -> Modelling across four numbered
   stages; the numeral is a quiet marker, not a heading. */

	.stage {
		color: #9fa3a6;
		display: block;
		font-size: 0.85em;
		font-weight: 700;
		letter-spacing: 0.15em;
		margin-bottom: 0.35em;
	}

	.stage-card .stage {
		color: #46698f;
	}

	.stage-card h3 {
		margin-bottom: 0.4em;
	}

	.stage-card p {
		color: #9fa3a6;
		font-size: 0.9em;
	}

	.row.spectrum {
		margin-top: 2em;
	}

	p.axis {
		align-items: center;
		color: #9fa3a6;
		display: flex;
		font-size: 0.85em;
		gap: 1em;
		letter-spacing: 0.1em;
		margin-top: 0.5em;
		text-transform: uppercase;
	}

	p.axis .arrow {
		background: linear-gradient(to right, rgba(210, 215, 217, 0.75), #46698f);
		flex: 1 1 auto;
		height: 2px;
	}

	@media screen and (max-width: 736px) {
		p.axis {
			display: none;
		}
	}

/* A section holding nothing but the page title would otherwise contribute a
   full section's padding plus a divider before the content starts. */

	#main > .inner > section.page-title {
		padding-bottom: 0;
	}

	#main > .inner > section.page-title > header.major > :last-child {
		margin-bottom: 0;
	}

	#main > .inner > section.page-title + section {
		border-top: 0 !important;
		padding-top: 2.5em;
	}

/* The Characterization -> Modelling axis already closes the overview, so the
   rule the template would draw under it is one divider too many. */

	#main > .inner > section.intro + section {
		border-top: 0 !important;
		padding-top: 3em;
	}

	#main > .inner > section.intro {
		padding-bottom: 2em;
	}

/* Dated lists: news on the home page, references on the publications page. */

	ul.news,
	ol.pubs {
		list-style: none;
		padding: 0;
		margin-bottom: 2em;
	}

	ul.news li,
	ol.pubs li {
		border-top: solid 1px rgba(210, 215, 217, 0.75);
		display: flex;
		gap: 1.5em;
		padding: 1em 0;
	}

	ul.news li:first-child,
	ol.pubs li:first-child {
		border-top: 0;
	}

	.news .date,
	.pubs .year {
		color: #9fa3a6;
		flex: 0 0 5.5em;
		font-size: 0.9em;
		padding-top: 0.15em;
	}

	.news .body,
	.pubs .body {
		flex: 1 1 auto;
	}

	@media screen and (max-width: 736px) {
		ul.news li,
		ol.pubs li {
			display: block;
		}

		.news .date,
		.pubs .year {
			display: block;
			margin-bottom: 0.25em;
		}
	}

/* Card images: the source photos have very different proportions, so crop
   them to one ratio or the cards below them never line up. */

	.topic .image img,
	.posts article .image img,
	.member .image img {
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}

	.member .image img {
		aspect-ratio: 1 / 1;
	}

	.topic h3 {
		margin-bottom: 0.5em;
	}

/* The affiliation line sits above the title; underlined links shout there. */

	.eyebrow a {
		border-bottom: 0;
		color: inherit;
	}

/* Member cards. Students share one placeholder photo, which renders as a row
   of identical grey blobs; an initial reads better and needs no asset. */

	.member h3 {
		margin-bottom: 0.25em;
	}

	.member p {
		font-size: 0.9em;
	}

	.member .avatar {
		align-items: center;
		aspect-ratio: 1 / 1;
		background-color: #eaeef2;
		border-radius: 0.375em;
		color: #46698f;
		display: flex;
		font-size: 2.75em;
		font-weight: 700;
		justify-content: center;
		line-height: 1;
		margin-bottom: 1em;
		-webkit-user-select: none;
		user-select: none;
		width: 100%;
	}

/* Captioned gallery images.

   The figures come from papers and slides, so their proportions vary wildly
   (520x390 photos next to 1200x692 charts). Cropping them to a common ratio is
   not an option -- it would cut the axes off a plot -- so each sits in a fixed
   box and is scaled to fit. That keeps every row level and the captions aligned. */

	.gallery .image img {
		aspect-ratio: 4 / 3;
		background-color: #f5f6f7;
		object-fit: contain;
	}

	.gallery .caption {
		color: #9fa3a6;
		display: block;
		font-size: 0.85em;
		padding-top: 0.5em;
		text-align: center;
	}

/* CV timelines: a date column beside the entry, collapsing on narrow screens. */

	dl.timeline {
		margin-bottom: 2em;
	}

	dl.timeline dt {
		clear: left;
		color: #9fa3a6;
		float: left;
		font-size: 0.9em;
		font-weight: 400;
		padding-top: 0.9em;
		width: 11em;
	}

	dl.timeline dd {
		border-top: solid 1px rgba(210, 215, 217, 0.75);
		margin: 0 0 0 11em;
		padding: 0.9em 0;
	}

	dl.timeline dd:first-of-type {
		border-top: 0;
	}

	/* The first row loses its rule, so drop the padding on BOTH cells --
	   zeroing only the <dt> left the date sitting a line above its entry. */

	dl.timeline dt:first-of-type,
	dl.timeline dd:first-of-type {
		padding-top: 0;
	}

	@media screen and (max-width: 980px) {
		dl.timeline dt {
			float: none;
			padding-top: 0.9em;
			width: auto;
		}

		dl.timeline dd {
			border-top: 0;
			margin-left: 0;
			padding-top: 0.2em;
		}

		dl.timeline dt {
			border-top: solid 1px rgba(210, 215, 217, 0.75);
		}

		dl.timeline dt:first-of-type {
			border-top: 0;
		}
	}

/* Grant numbers sit under the project title as secondary information. */

	.grant {
		color: #9fa3a6;
		font-size: 0.85em;
	}

	td.nowrap {
		white-space: nowrap;
	}

/* An email address should not be shouted in caps like the other buttons. */

	.button.email {
		text-transform: none;
	}

/* Call to action. */

	.box.cta {
		background-color: #f5f6f7;
		border: 0;
		padding: 2em;
	}

	.box.cta > :last-child {
		margin-bottom: 0;
	}