:root {
    --bg-color:#E0D8D2;
    --bright-color:#EDD6A6;
    --black:#000;
    --dark-gray:#333;
    --blue:#748CD3;
    --green:#698C7D;
    --white:#EEE;
    --serif:'Lora', serif;
    --sansserif: 'Raleway', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html {
	font-weight: normal;
	background-color: var(--dark-gray); 
  	font-family: var(--serif);
  	color: var(--white);
}

.menucontainer {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	min-height: 80px;
	padding: 6px 15px;
	background-color: var(--dark-gray);
	border-bottom: 3px double var(--white);
}

.closecontainer {
	background-image:
	    linear-gradient(
	      to top, 
	      rgba(0,0,0,1), rgba(0,0,0,0)
	    );
		min-height:300px;
}

#logocontainer {
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 70px;
	line-height: 1;
	color: var(--bright-color);
}
#unlvlogo {
	order: 3;
	margin-left: auto;
	display: flex;
	align-items: center;
	font-size: 42px;
	line-height: 1;
	color: var(--bright-color);
}
#menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.6em;
	font-size: 24px;
	color: var(--bright-color);
}
#menu a {
	font-family: var(--sansserif);
	font-weight: 700;
}

.phd {
	font-size: 40px;
	font-weight: normal;
}

.occupation {
	font-size: 24px;
	margin: 0em 0em 0em 0px;
	padding: 0;
	color: var(--bright-color);
	text-align:center;
	text-shadow: 0 0 4px rgba(0,0,0,1);
}

.links {
	font-size: 16px;
	font-weight:bold;
	margin: 20px 0em 0em 0px ;
	padding: 0;
	color: var(--blue);
	font-family: var(--serif);
	text-align:center;
/*	text-transform: lowercase;*/
	font-variant: small-caps;
	text-shadow: 0 0 2px rgba(0,0,0,1);
}


.links a {
	font-weight: 700;
/*	font-variant: small-caps;*/
}
/* unvisited link */
.links a:link {
    color: var(--blue);
	text-decoration: none;
}

/* visited link */
.links a:visited {
    color: var(--blue);
	text-decoration: none;
}

/* mouse over link */
.links a:hover {
    color: var(--bright-color);
	text-decoration: none;
}

/* selected link */
.links a:active {
    color: var(--bright-color);
	text-decoration: none;
}

a {
	font-weight: 700;
/*	font-variant: small-caps;*/
}
/* unvisited link */
a:link {
    color: var(--blue);
	text-decoration: none;
}

/* visited link */
a:visited {
    color: var(--blue);
	text-decoration: none;
}

/* mouse over link */
a:hover {
    color: var(--green);
	text-decoration: none;
}

/* selected link */
a:active {
    color: var(--green);
	text-decoration: none;
}

main h2 {
	font-family: var(--sansserif);
	font-weight: 700;
	font-size: 48px;
	color: var(--white);
	text-align: center;
	margin: 1em 0;
}
main h3 {
	font-family: var(--sansserif);
	font-weight:700;
	font-size:24px;
	color: var(--white);
	text-align:left;
	margin-bottom: 1em;
	margin-top: 1em;
}

p {
	font-family: var(--serif);
	line-height: 1.6;
	margin: 0 auto 1em;
	text-align: justify;
	hyphens: auto;
}

.section {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 16px;
}

.date {
	margin:0;
	padding:0;
	font-weight:700;
}

.personnelContainer {
	display: flex;
	flex-direction: column;
	gap: 2em;
	width: 100%;
	font-family: var(--serif);
	margin-bottom: 2em;
}

.personRow {
	display: flex;
	gap: 2em;
	align-items: flex-start;
}

.bio {
	flex: 1 1 auto;
	min-width: 0;
}

.headshot {
	flex: 0 0 300px;
	text-align: center;
}

.headshot img {
	width: 100%;
	height: auto;
}

.name {
	font-weight:700;
}

/* Accessible heading that is present for screen readers and search engines
   but not shown, since the site title is rendered as the logo image. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Keep in-page anchor targets clear of the sticky header. Replaces the old
   "<span id> offset by position:relative" trick. */
section {
	scroll-margin-top: 150px;
}

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

.site-footer {
	max-width: 800px;
	margin: 4em auto 3em;
	padding: 1.5em 1em 0;
	border-top: 1px solid rgba(238,238,238,0.25);
	font-family: var(--sansserif);
	font-size: 15px;
	text-align: center;
}
.site-footer p {
	text-align: center;
	margin: 0;
}

/* News items: image beside text, previously done with float + clear:both */
.news-item {
	display: flex;
	gap: 1.5em;
	align-items: flex-start;
	margin-bottom: 2em;
}
.news-thumb {
	flex: 0 0 300px;
	width: 300px;
	height: auto;
	border-radius: 2px;
}
.news-body {
	flex: 1 1 auto;
	min-width: 0;
}
.news-body p {
	margin-bottom: 0;
}
.date::after {
	content: " \2014 ";
}

/* Publications. <ol reversed> numbers items N..1 automatically, which
   reproduces the old counter-reset behaviour without a hardcoded start
   value that had to be bumped by hand every time a paper was added. */
.pub-list {
	margin: 0 0 3em 3em;
	padding: 0;
}
.pub-list li {
	margin-bottom: 0.9em;
	padding-left: 0.4em;
	line-height: 1.5;
	scroll-margin-top: 150px;
}
.pub-list li::marker {
	font-weight: 700;
	color: var(--white);
}
.pub-list li:target {
	background: rgba(237,214,166,0.14);
	border-radius: 3px;
}

/* Images never overflow their container. */
img {
	max-width: 100%;
	height: auto;
}

/* Former members are listed without a headshot; keep them compact. */
.personRow:not(:has(.headshot)) {
	gap: 0;
}

/* ---- Narrow screens ------------------------------------------------ */

/* The masthead wraps to a second row on laptop widths once the logo,
   nav and UNLV mark no longer fit; scale the logo down before that. */
@media (max-width: 1100px) {
	#logocontainer { font-size: 56px; }
	#unlvlogo      { font-size: 34px; }
	/* Give the nav its own row rather than letting the UNLV mark wrap
	   below it on its own. */
	#menu {
		order: 4;
		flex-basis: 100%;
		font-size: 21px;
	}
}

@media (max-width: 820px) {
	#logocontainer { font-size: 46px; }
	#unlvlogo      { font-size: 30px; }
	#menu          { font-size: 19px; gap: 0 1.1em; }
	main h2        { font-size: 34px; margin: 0.8em 0; }
	.pub-list      { margin-left: 1.6em; }
}

@media (max-width: 620px) {
	.menucontainer {
		gap: 0.3em 0.8em;
		padding: 8px 12px;
	}
	#logocontainer { font-size: 38px; }
	#unlvlogo      { font-size: 24px; }
	#menu {
		order: 4;
		flex-basis: 100%;
		justify-content: space-between;
		font-size: 17px;
		gap: 0 0.6em;
	}
	#menu a { margin: 0; }

	/* Stack the image above the text instead of beside it. */
	.news-item,
	.personRow {
		flex-direction: column;
		gap: 1em;
	}
	.news-thumb {
		flex: 0 0 auto;
		width: 100%;
		max-width: 360px;
	}
	.headshot {
		flex: 0 0 auto;
		width: 100%;
		max-width: 260px;
	}
	.headshot img { width: 100% !important; }

	/* Justified text with hyphenation is hard to read in a narrow column. */
	p {
		text-align: left;
		hyphens: none;
	}

	main h2 { font-size: 28px; }
	main h3 { font-size: 21px; }

	section { scroll-margin-top: 160px; }
}

/* The logo links home now that the site has several pages. */
#logocontainer a {
	display: flex;
	align-items: center;
	text-decoration: none;
}

/* Current page in the nav. */
#menu a[aria-current="page"] {
	color: var(--bright-color);
}

/* "All news ->" link under the home page teaser. */
.more {
	font-family: var(--sansserif);
	font-weight: 700;
	text-align: right;
	margin-top: 1.5em;
}

/* The masthead logos are sized by CSS height (1em), so their width must stay
   auto. Otherwise the width="..." attribute is used as the layout width and
   the SVG is letterboxed inside a far wider box -- which pushed the "da kine
   lab" wordmark away from the rainbow. The attributes are still useful: with
   width:auto the browser takes the aspect ratio from them. */
/* Masthead marks. Height comes from the container's font-size; the width is
   derived from an explicit aspect-ratio rather than from each SVG's intrinsic
   size. color_logo.svg declares its dimensions in pt (360pt x 230pt), which
   engines resolve differently from the width/height attributes in the HTML, so
   leaving the width to be inferred made the box size engine-dependent -- and
   the -0.2em tuck below only lands correctly if both boxes are predictable. */
#logocontainer img.mark {
	height: 1em;
	width: auto;
	aspect-ratio: 360 / 230;
}

#unlvlogo img.mark {
	height: 1em;
	width: auto;
	aspect-ratio: 360 / 116;
}

/* The wordmark, sitting against the rainbow.
 *
 * The original -0.2em pulled the boxes together by 0.2em, but measuring the
 * ink inside each SVG shows there is almost no transparent padding to absorb
 * that: color_logo.svg's ink runs to x=351.8 of a 360-wide viewBox (~0.036em
 * of right padding at this size) and logo-anim.svg's starts at x=2.2 of 800
 * (~0.009em). Total padding is ~0.044em, so -0.2em overlapped the artwork
 * itself by roughly 0.16em -- about 9px.
 *
 * Chromium happened to look fine because the rainbow's thin right-hand tail
 * and the "d" stroke miss each other vertically; Firefox centres the two
 * boxes slightly differently and they collided.
 *
 * margin-left: 0 leaves the boxes adjacent, so the artwork keeps its ~0.044em
 * natural gap and cannot overlap in any engine. Increase this value to open
 * the lockup up; anything below about -0.04em starts cutting into the ink
 * again. */
#logocontainer object {
	height: 0.7em;
	width: auto;
	aspect-ratio: 800 / 175;
	margin-left: 0;
}

/* Figures on the research page: floated right so the prose wraps around them.
   Scientific figures have white backgrounds, so each sits on a light plate to
   look deliberate against the dark page. */
.research-figure {
	float: right;
	width: 300px;
	margin: 0.4em 0 1em 1.8em;
}
.research-figure img {
	display: block;
	/* width:auto so a figure is never scaled up past its own resolution. */
	width: auto;
	max-width: 100%;
	height: auto;
	background: #fff;
	padding: 8px;
	border-radius: 3px;
}
.research-figure .fig-credit {
	display: block;
	margin-top: 0.3em;
	font-style: italic;
	opacity: 0.85;
}
.research-figure figcaption {
	margin-top: 0.5em;
	font-family: var(--sansserif);
	font-size: 13px;
	line-height: 1.45;
	color: rgba(238, 238, 238, 0.72);
}

/* Each heading starts below the previous section's figure. */
main h3 {
	clear: both;
}

/* Research headings are link targets, so keep them clear of the masthead. */
main h3[id] {
	scroll-margin-top: 150px;
}

@media (max-width: 620px) {
	/* Too narrow to wrap text beside a figure; centre it instead. */
	.research-figure {
		float: none;
		width: 100%;
		max-width: 340px;
		margin: 1.2em auto 1.6em;
	}
	.research-figure figcaption { text-align: left; }
}

/* Shared first authorship, spelled out after a publication entry. */
.equal-contrib {
	font-family: var(--sansserif);
	font-size: 0.85em;
	font-style: italic;
	color: rgba(238, 238, 238, 0.7);
}

/* Former members: a small square portrait beside a one-line entry. Kept to a
   quarter the width of a current member's headshot so the people currently in
   the lab stay visually dominant. Members without a photo keep the same
   indent, so the column of names stays aligned. */
.personRow.alum {
	gap: 1em;
	align-items: center;
	margin-bottom: 0.2em;
}
.alum-thumb {
	flex: 0 0 80px;
	width: 80px;
}
.alum-thumb img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.alum-thumb-empty {
	height: 80px;
}
.personRow.alum .bio p {
	margin-bottom: 0;
}

@media (max-width: 620px) {
	.personRow.alum {
		flex-direction: row;
		gap: 0.8em;
	}
	.alum-thumb,
	.alum-thumb img { flex-basis: 56px; width: 56px; }
	.alum-thumb img { height: 56px; }
	.alum-thumb-empty { height: 56px; }
}