/* One type scale for every page. Loaded after the theme and Stacks CSS,
   so it overrides them. */

/* Page frame. The theme centered a 900px white box on a dark striped
   background, with dark bands at both sides on today's screens. Now the
   page is white edge to edge, the header, menu and footer bars run across
   the whole window, and the text sits in a wide centered column that
   follows the window width up to COLUMN (1440px). The header titles and
   the first menu item are placed so that they line up with the text. */
html,
body {
	background: #FFFFFF;
}
body {
	margin: 0;
	padding: 0;
}
#bodyGrad {
	display: none; /* the dark gradient image behind the old box */
}
#container {
	width: 100%;
	max-width: none;
	margin: 0;
	border: 0;
}
#pageHeader #grad {
	width: 100%;
}
/* COLUMN = 1440px, text inset 24px: left edge = max(24px, (100% - 1440px)/2 + 24px) */
#pageHeader h1,
#pageHeader h2 {
	left: max(24px, calc(50% - 696px));
}
#navcontainer ul {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 6px; /* 6px + the 18px link padding = the 24px text inset */
	box-sizing: border-box;
}
#contentContainer #content {
	max-width: 1440px;
	margin: 0 auto;
	padding: 15px 24px 30px;
	box-sizing: border-box;
}
#footer p,
#footer #breadcrumbcontainer {
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}
#footer p {
	padding: 15px 24px 5px;
}
/* Phones (the pages carry a viewport tag, see tools/normalize_typography.py):
   one column, smaller insets and header. */
@media (max-width: 640px) {
	#contentContainer #content {
		padding: 12px 16px 24px;
	}
	#pageHeader h1,
	#pageHeader h2 {
		left: 16px;
	}
	#pageHeader h1 {
		font-size: 28px;
	}
	#navcontainer a {
		padding: 7px 12px 9px;
	}
	/* The two columns of Home (text and photo) stack, without the 100px
	   indent the block has on wide screens. */
	#content .columns_stack .stacks_div {
		float: none !important;
		width: 100% !important;
		margin: 0 0 1em !important;
	}
	#content #stacks_in_98 {
		margin: 0 0 12px;
	}
	#content .areas .research-summary {
		font-size: 18px;
	}
	/* The word cloud keeps a readable size and scrolls sideways. */
	#content figure.cloud {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	#content .cloud-svg {
		min-width: 680px;
	}
}

/* Header, menu and footer text, scaled with the body text below. */
#pageHeader h1 {
	font-size: 38px;
	top: 26px;
}
#pageHeader h2 {
	font-size: 18px;
	top: 80px;
	margin: 0; /* some pages pushed it down 12px */
}
#navcontainer {
	height: auto; /* the theme's fixed 36px hid the menu's second row on narrow windows */
	min-height: 36px;
	font-size: 17px;
	line-height: 20px;
}
#navcontainer ul {
	display: flow-root; /* wraps around the floated items */
}
#navcontainer a {
	padding: 7px 18px 9px;
}
#navcontainer ul a {
	color: #FFFFFF; /* teaching.html's theme copy had dark menu text */
}
#navcontainer ul ul {
	top: 36px;
}
#footer {
	font-size: 13px;
}

/* Body text grows a little with the window (16px on a small one, 19px on a
   wide one), so the page reads well at the browser's 100% zoom. */
#content {
	font-size: clamp(17px, 0.65vw + 10.5px, 21px);
	line-height: 1.6;
	color: #333333;
}

/* Every Stacks block carried its own size (90%-133%), weight ("lighter")
   and sometimes line-height; reset them so the scale below applies. */
#content [id^="stacks_in"] {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
/* Header blocks drew their own rule on some pages; h2 draws one now. */
#content .com_yourhead_stack_header_stack {
	border: 0;
	margin: 0;
}

/* Page title, section headings, sub-headings (theme keeps Georgia). */
#content h1,
#content h2,
#content h3 {
	font-weight: bold;
	text-align: left; /* the theme justifies everything; titles spread out */
}
#content h1 {
	font-size: clamp(36px, 2vw + 10px, 46px);
	line-height: 1.25;
	color: #1D2024;
	margin: 0 0 0.6em;
}
#content h2 {
	font-size: clamp(28px, 1.5vw + 9px, 35px);
	line-height: 1.3;
	color: #1D2024;
	margin: 1.6em 0 0.9em;
	padding-bottom: 4px;
	border-bottom: 1px solid #E2E2E2;
}
#content h3 {
	font-size: clamp(22px, 1.1vw + 7.5px, 26px);
	line-height: 1.35;
	color: #1D2024;
	margin: 1.2em 0 0.5em;
}
/* Empty header blocks left in the page (e.g. top of Home). */
#content h3:empty,
#content h3:has(> span:only-child:empty) {
	display: none;
}

/* Lists: the same spacing on every page (some pages had 1.5em, some none). */
#content ul,
#content ol {
	margin: 0 0 1em;
	padding-left: 22px;
}
#content li {
	margin: 0 0 0.5em;
	text-align: left; /* justified list items left wide gaps between words */
}
#content li ul,
#content li ol {
	margin-top: 0.5em;
}
/* Bullets and numbers drawn in the item's own box: the browser's list
   markers sit outside it and were clipped by the Stacks blocks
   (overflow: hidden) at some zoom levels. */
#content ul,
#content ol {
	list-style: none;
}
#content ol {
	counter-reset: item;
}
#content ul > li,
#content ol > li {
	position: relative;
}
#content ul > li::before {
	content: "";
	position: absolute;
	left: -15px;
	top: 0.62em;
	width: 5px;
	height: 5px;
	background: currentColor;
}
#content ul.disc > li::before {
	border-radius: 50%;
}
#content ul.dashed > li::before {
	content: "\2013";
	top: 0;
	width: auto;
	height: auto;
	background: none;
}
#content ol > li {
	counter-increment: item;
}
#content ol > li::before {
	content: counter(item) ".";
	position: absolute;
	left: -26px;
	width: 22px;
	text-align: right;
}

/* The one emphasis color (replaces the four reds/oranges pasted in). */
#content .hl {
	color: #C0151F;
}

#content strong {
	font-weight: bold;
}

/* Sub-headings inside a text block (Group page: "Ph.D. Students"). */
#content .subhead {
	display: block;
	margin: 0 0 0.7em;
}
#content ul + .subhead {
	margin-top: 1.2em;
}
/* Group page: the current-members block had its own 20px top margin,
   so it sat further below its heading than the alumni list. */
#content #stacks_in_182 {
	margin-top: 0;
}

/* Research section (Home) and Research page: summary, word cloud of the
   paper titles, diagram of the research areas (tools/research.py). */
#content .research-summary {
	font-size: clamp(20px, 1vw + 7.5px, 25px);
	line-height: 1.7;
	text-align: left;
	margin: 0 0 0.8em;
}
#content .research-stats {
	color: #666666;
	margin: 0 0 1.4em;
}
#content .research h3 {
	margin-top: 1.4em;
}
#content .hint {
	font-size: 14px;
	font-style: italic;
	color: #666666;
	text-align: center;
	margin: 0.4em auto 1.4em;
}
#content figure {
	margin: 0;
	padding: 0;
}
#content .cloud-svg {
	display: block;
	width: 100%;
	max-width: 880px;
	height: auto;
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", serif;
}
#content .cloud a {
	text-decoration: none;
}
#content .cloud a:hover text,
#content .cloud a:focus text {
	fill: #C0151F;
}
/* Research: the summary paragraph at the left, the Venn diagram at the right,
   the text centered on the height of the diagram. */
#content .areas {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0.4em 2.4em;
	align-items: center;
}
#content .areas .research-summary {
	font-size: clamp(20px, 1vw + 7.5px, 25px);
	line-height: 1.7;
	margin: 0;
	text-align: justify; /* owner, 2026-10-25 */
	-webkit-hyphens: auto;
	hyphens: auto;
}
/* Alternative layout: Venn at the left, cloud at the right, headings centered. */
#content .areas-cloud {
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	align-items: start;
	margin-top: 0.6em;
}
#content .areas-cloud h3 {
	text-align: center;
	margin: 0 0 0.6em;
}
#content .areas-cloud .areas-svg {
	max-width: 560px;
}
@media (max-width: 760px) {
	#content .areas {
		grid-template-columns: 1fr;
	}
}
/* The Venn diagram (tools/venn.svg carries its own inner styles). */
#content .areas-svg {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0 auto;
	font-family: Georgia, "Times New Roman", serif;
}
#content .areas-figure a {
	text-decoration: none;
	outline: none;
}
#content .area-sub,
#content .area-count {
	font-style: italic;
	fill: #5E646C;
}
#content .dot {
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: currentColor;
	margin-right: 0.45em;
	vertical-align: 0.05em;
}
#content h2.area-head {
	margin-top: 2em;
}
#content .area-blurb {
	margin: 0 0 0.8em;
}
#content ul.compact li {
	font-size: 18px;
	line-height: 1.5;
	margin-bottom: 0.35em;
}
#content .meta {
	color: #666666;
}
/* publications.html?q=...: only the matching entries stay visible. */
#content .pub-list li.nomatch,
#content .empty {
	display: none;
}
#content .pub-filter {
	background: #FBF8EA;
	border: 1px solid #EADFA8;
	padding: 0.5em 0.8em;
	margin: 0 0 1em;
}

/* Home: the news before NEWS_VISIBLE_FROM (tools/update_content.py) sit in a
   closed fold; the summary line looks like a link with a small triangle. */
#content details.older-news {
	margin: 0.4em 0 1em;
}
#content details.older-news > summary {
	list-style: none;
	cursor: pointer;
	font-weight: bold;
	color: #2F5D8A;
	padding: 0.2em 0;
	-webkit-user-select: none;
	user-select: none;
}
#content details.older-news > summary::-webkit-details-marker {
	display: none;
}
#content details.older-news > summary::before {
	content: "\25B8";
	display: inline-block;
	width: 1em;
	transition: transform 0.15s ease;
}
#content details.older-news[open] > summary::before {
	transform: rotate(90deg);
}
#content details.older-news > summary:hover {
	text-decoration: underline;
}
#content details.older-news > ul {
	margin-top: 0.8em;
}

/* Home: the opening block with the titles and the address, larger than the
   body text (owner, 2026-10-25). */
#content #stacks_in_9 {
	font-size: clamp(20px, 1vw + 7.5px, 25px); /* the same as the research summary */
	line-height: 1.7;
	text-align: left; /* the theme justified it, stretching the ECE line */
}

/* bio.html: one paragraph, the size of the research summary. */
#content .bio {
	font-size: clamp(20px, 1vw + 7.5px, 25px);
	line-height: 1.7;
	text-align: left;
	max-width: 60em;
}

/* Home: the link under the research summary. */
#content .research-more {
	margin: 1em 0 0;
	font-size: 17px;
}
#content .research-more a {
	font-weight: bold;
	text-decoration: none;
}
#content .research-more a:hover {
	text-decoration: underline;
}

/* topics/<word>.html: the word as a centered title. */
#content h1.topic-title {
	text-align: center;
	margin-bottom: 0.9em;
}
#content .topic-all {
	text-align: right;
	margin: 0 0 0.2em;
	font-size: 17px;
}
#content .topic-all a {
	font-weight: bold;
	text-decoration: none;
}
#content .topic-all a:hover {
	text-decoration: underline;
}

/* "The papers, in their own words (click a word)": the note in the heading
   of the word cloud, lighter than the heading (owner, 2026-10-27). */
#content h3 .click-note {
	font-weight: normal;
	font-size: 0.8em;
	color: #5E646C;
}