/* Text, publication, and responsive layout refinements for website version 5. */
#first .content,
#current-projects .content,
#background .content {
	text-align: left;
}

#first .research-questions-intro {
	margin-bottom: 1.5rem;
}

#first .indented-list {
	list-style-position: outside;
	padding-left: 1.25em;
}

#first .indented-list li {
	margin-bottom: 0.65rem;
	font-size: 0.95rem;
}

#publications {
	--publication-muted: #626262;
	--publication-accent: #287b32;
	scroll-margin-top: 2rem;
}

#publications.invert {
	--publication-muted: #b3b3b3;
	--publication-accent: #81c784;
}

#publications .publication-year {
	padding-top: 1.5rem;
}

#publications .publication-year:first-of-type {
	padding-top: 0;
}

#publications .publication-year h3 {
	margin-bottom: 1rem;
	font-size: 1.1rem;
	letter-spacing: 0;
}

#publications .publication-list {
	list-style-type: decimal;
	padding-left: 1.8rem;
	margin: 0;
}

#publications .publication-list li {
	padding-left: 0.5rem;
	margin-bottom: 1.25em;
	font-size: 0.8rem;
	scroll-margin-top: 2rem;
}

#publications .publication-list li::marker {
	color: var(--publication-muted);
	font-size: 1em;
	font-variant-numeric: tabular-nums;
}

#publications .publication-reference {
	margin-bottom: 0;
	padding-left: 1.5em;
	text-indent: -1.5em;
	font-size: inherit;
	line-height: 1.65;
	overflow-wrap: break-word;
}

#publications a.publication-link {
	color: var(--publication-accent);
	text-underline-offset: 0.2em;
}

#publications a:focus-visible {
	outline: 2px solid var(--publication-accent);
	outline-offset: 4px;
}

#publications .publication-note {
	margin-top: 1rem;
	margin-bottom: 0;
	color: var(--publication-muted);
	font-size: 0.8rem;
	font-style: italic;
}

/* Keep the template's phone typography and layout. On larger viewports,
   replace its abrupt 16px / 18.67px / 24px steps with a capped, fluid scale.
   rem bounds keep the scale responsive to the reader's default font size. */
@media screen and (min-width: 737px) {
	html {
		font-size: clamp(1rem, calc(0.75rem + 0.3125vw), 1.125rem);
	}

	/* Use more of a tall desktop panel without inflating text in short windows. */
	#wrapper {
		--reading-size: clamp(0.97rem, calc(0.74rem + 0.5vh), 1.08rem);
		--reading-size: clamp(0.97rem, calc(0.74rem + 0.5svh), 1.08rem);
		--intro-size: clamp(1.125rem, calc(0.92rem + 0.45vh), 1.25rem);
		--intro-size: clamp(1.125rem, calc(0.92rem + 0.45svh), 1.25rem);
	}

	#wrapper > .banner:first-child h1 {
		margin-bottom: clamp(1.8rem, 4.5vh, 3rem);
		margin-bottom: clamp(1.8rem, 4.5svh, 3rem);
	}

	#wrapper > .banner:first-child p.major {
		font-size: var(--intro-size);
		line-height: 1.65;
	}

	#first .content > p,
	#current-projects .content > p,
	#background .content > p {
		font-size: var(--reading-size);
		line-height: 1.7;
	}

	#first .indented-list li {
		font-size: var(--reading-size);
	}

	/* Smooth spacing for the media, publications, contact, and footer areas. */
	#wrapper > .wrapper.style1 > .inner {
		padding: clamp(2.5rem, 6vh, 5rem) clamp(2rem, 4vw, 4.5rem);
		padding-block: clamp(2.5rem, 6svh, 5rem);
	}
}

/* A screen is a minimum for the four main panels, rather than a fixed height.
   Text can always expand the panel; tablet portrait and phone layouts retain
   the template's natural image-and-text flow. */
@media screen and (min-width: 737px) and (orientation: landscape) {
	#wrapper > .banner.style1 {
		min-height: 100vh;
		min-height: 100svh;
	}

	#wrapper > .banner.style1 .content {
		padding: clamp(1.75rem, 5vh, 4rem) clamp(2.5rem, 4.25vw, 6rem);
		padding-block: clamp(1.75rem, 5svh, 4rem);
	}

	#wrapper > .banner.style1 .content > p {
		margin-bottom: clamp(1rem, 2.75vh, 1.75rem);
		margin-bottom: clamp(1rem, 2.75svh, 1.75rem);
	}

	#wrapper > .banner.style1 .content > .research-questions-intro {
		margin-bottom: 1.5rem;
	}

	#wrapper > .banner.style1 .content > :last-child {
		margin-bottom: 0;
	}

	/* Bound the line length on wide screens; added type size uses panel height. */
	#wrapper > .banner:first-child p.major {
		max-width: 56ch;
	}

	#first .content > p,
	#first .indented-list,
	#current-projects .content > p,
	#background .content > p {
		max-width: 68ch;
	}
}