/* ==========================================================================
   Positive Family and Developmental Psychology Lab
   Design system: "Ink & Vermilion" -- editorial

   The visual language is a printed journal, not an app:
     * warm paper, near-black ink, one hot vermilion accent
     * a display serif for headings, Inter for everything functional
     * RULES DO THE WORK. No drop shadows anywhere. Blocks are separated by
       hairlines and by an ink rule at the top of each section.
     * near-square corners (2px) -- nothing is pill-shaped except nothing
     * small uppercase letterspaced "eyebrow" labels above serif headings

   Everything is driven by the tokens in :root. Retune there, not below.
   Bootstrap 3 is still loaded for its grid helpers and the mobile menu's
   data-toggle="collapse", so section 2 neutralises the rest of it.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
	/* paper and ink */
	--paper:       #FAF7F2;	/* page */
	--paper-sunk:  #F2ECE3;	/* inset areas, hover fills */
	--surface:     #FFFDFA;	/* raised block, a shade above the paper */
	--header-bg:   #FFFFFF;	/* the masthead sits a step brighter than the page */
	--ink:         #14110F;	/* body, hard rules */
	--ink-soft:    #3C3531;	/* secondary text */
	--muted:       #6B625C;	/* captions, tertiary text */
	--title:       #16386B;	/* deep blue, every display heading (10.8:1) */

	/* vermilion. Three steps, because the bright one is only safe as a
	   graphic mark -- it does not carry enough contrast for small text. */
	--accent:      #D9401F;	/* rules, bars, marks, counters, large display */
	--accent-ink:  #A93214;	/* links and small text on paper (5.9:1) */
	--accent-deep: #8F2A10;	/* pressed / filled-button hover */
	--accent-soft: #FBEAE4;	/* tint fill */

	/* rules */
	--rule:        #E0D8CE;	/* hairline */
	--rule-ink:    #14110F;	/* the hard rule that opens a section */

	--focus:       #A93214;

	/* geometry -- near-square, never pill */
	--r: 2px;

	/* space -- 4px base */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;
	--s-9: 96px;

	/* type -- Fraunces is variable (opsz 9..144, wght 400..700), so headings can
	   be genuinely bold rather than faux-bolded from a single-weight face. */
	--font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--measure: 70ch;	/* comfortable maximum line length for prose */

	/* Used for sticky offsets and anchor scroll-margin. Rounded up from the
	   measured header so anchored content never lands underneath it. */
	--header-h: 170px;
}

/* ==========================================================================
   2. BASE + BOOTSTRAP NEUTRALISATION
   ========================================================================== */
*, *::before, *::after {
	box-sizing: border-box;
}

/* Bootstrap 3's scaffolding sets html { font-size: 10px }, which would make
   every rem below 62.5% of its intended size. Put it back to the browser
   default -- this rule wins because styles.css follows bootstrap.min.css. */
html {
	font-size: 100%;
	scroll-behavior: smooth;
}

body {
	background-color: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-weight: 600;
	color: var(--title);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

p {
	margin: 0 0 var(--s-4);
}

/* height:auto is what makes the width= and height= attributes on the pictures
   safe. Without it a browser treats height="1200" as a literal 1200px while CSS
   sets the width, and the picture is squashed. With it the attributes are only
   read as a shape, so the space is reserved before the file arrives and the
   page does not jump -- which is the whole reason they are there. */
img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--accent-ink);
	text-decoration: none;
	transition: color .15s ease, background-color .15s ease;
}

a:hover, a:focus {
	color: var(--accent-deep);
	text-decoration: none;
}

::selection {
	background: var(--accent-ink);
	color: #fff;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 0;
}

/* The signature label: small, uppercase, widely letterspaced, vermilion.
   It sits above a serif heading and does the job a subtitle used to. */
.eyebrow {
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin: 0 0 var(--s-3);
}

.container {
	width: 100%;
	max-width: 1180px;
	padding-left: var(--s-5);
	padding-right: var(--s-5);
	margin-left: auto;
	margin-right: auto;
}

.navbar,
.navbar-default {
	background: transparent;
	background-image: none;
	border: 0;
	border-radius: 0;
	margin-bottom: 0;
	min-height: 0;
}

.navbar-collapse {
	border-top: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}

.panel-footer {
	background: transparent;
	border: 0;
	border-radius: 0;
}

/* script.js injects float-clearing divs between grid items. Bootstrap's
   .visible-*-block carry !important, so undoing them needs it too. */
.people-grid .clearfix,
.other-news-grid .clearfix,
#Publication-link .clearfix {
	display: none !important;
}

.skip-link {
	position: absolute;
	left: var(--s-4);
	top: -100px;
	z-index: 200;
	padding: var(--s-3) var(--s-5);
	background: var(--ink);
	color: var(--paper);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: top .15s ease;
}

.skip-link:focus {
	top: 0;
	color: var(--paper);
}

/* ==========================================================================
   3. HEADER + NAVIGATION
   ========================================================================== */
header {
	background: var(--header-bg);
	border-bottom: 1px solid var(--rule-ink);
}

#header-row {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-4) 0 var(--s-3);
	margin: 0;
	width: 100%;
}

#logo-link {
	flex: 0 0 auto;
	display: block;
	line-height: 0;
	padding: 0;
}

.Logo {
	width: 88px;
	height: 88px;
	object-fit: contain;
	margin: 0;
}

header h1 {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	text-align: left;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 2.15vw, 1.875rem);
	font-weight: 600;
	line-height: 1.15;
	color: var(--title);
	text-wrap: balance;
}

/* Nav bar ------------------------------------------------------------- */
#collapsable-nav {
	margin: 0;
}

#nav-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 0 var(--s-5);
	float: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--rule);
	overflow: visible;
}

#nav-list::before, #nav-list::after {
	display: none;
}

#nav-list > li {
	position: relative;
	float: none;
	padding: 0;
	list-style: none;
}

#nav-list > li > a {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-4) 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	white-space: nowrap;
	text-shadow: none;
	background: transparent;
	transition: color .15s ease, border-color .15s ease;
	cursor: pointer;
}

#nav-list > li > a:hover,
#nav-list > li > a:focus {
	background: transparent;
	color: var(--ink);
	border-bottom-color: var(--rule);
}

#nav-list > li > a#page-on {
	color: var(--accent-ink);
	border-bottom-color: var(--accent);
}

/* the caret on the two items that carry a submenu */
.collapsible-a::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: -1px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .8;
}

/* Submenus ------------------------------------------------------------ */
/* Collapsed by max-height rather than height, so the open state never has to
   name the exact pixel height of the list -- new menu rows just work. */
#nav-list ul {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	max-height: 0;
	transition: max-height .25s ease;
}

#nav-list ul li {
	margin: 0;
	padding: 0;
}

#nav-list ul li a {
	display: block;
	padding: var(--s-2) var(--s-3);
	color: var(--ink-soft);
	font-size: 0.875rem;
	line-height: 1.35;
	border-left: 2px solid transparent;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
	cursor: pointer;
}

#nav-list ul li:hover > a,
#nav-list ul li:focus-within > a {
	background: var(--paper-sunk);
	border-left-color: var(--accent);
	color: var(--ink);
}

/* ==========================================================================
   4. PAGE SHELL: MASTHEAD, MOTION
   ========================================================================== */
main#main-content,
#main-content {
	display: block;
	padding-top: var(--s-7);
	padding-bottom: var(--s-9);
	min-height: 60vh;
}

/* Every page opens the same way: a hard ink rule, a vermilion eyebrow, then
   the title set large in the display serif and ranged left. */
.page-head {
	border-top: 1px solid var(--rule-ink);
	padding-top: var(--s-4);
	margin: 0 0 var(--s-7);
}

/* A masthead that carries a picture: the image is a second column of the
   head itself, so its top edge starts level with the eyebrow. */
.page-head--figure {
	display: grid;
	grid-template-columns: minmax(0, 2.8fr) minmax(0, 1fr);
	gap: var(--s-7);
	align-items: start;
	margin-bottom: var(--s-8);
}

.page-head--figure #explanation {
	margin-top: var(--s-5);
}

#main-title {
	margin: 0;
	max-width: 22ch;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.1vw, 3rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.02em;
	text-align: left;
}

/* the two responsive line-break variants inside the home title */
#main-title > div {
	display: inline;
}

#other-news-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-align: left;
}

.section-head {
	border-top: 1px solid var(--rule-ink);
	padding-top: var(--s-4);
	margin: var(--s-9) 0 var(--s-6);
}

/* the helper line under a few page titles, set in the serif italic */
#explanation {
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--muted);
	text-align: left;
	margin: var(--s-4) 0 0;
}

/* the old <hr> is redundant now that the masthead carries its own rules */
.main-hr {
	display: none;
}

/* Page transitions come for free: script.js replaces #main-content's
   innerHTML, so these children are new nodes and the animation runs afresh
   on every page change. No JavaScript needed. */
@keyframes fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

#main-content > * {
	animation: fade-up .35s cubic-bezier(.2, .6, .2, 1) both;
}

/* ==========================================================================
   5. SHARED COMPONENTS
   ========================================================================== */
/* A block, not a card: an ink rule across the top, hairlines elsewhere, and
   no shadow at all. */
.card {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-top: 2px solid var(--rule-ink);
	border-radius: var(--r);
	padding: var(--s-5);
}

.card h3 {
	margin: 0 0 var(--s-4);
	font-size: 1.625rem;
	line-height: 1.1;
}

.card h3::before {
	content: "";
	display: block;
	width: 24px;
	height: 2px;
	background: var(--accent);
	margin-bottom: var(--s-3);
}

/* The standard content page: prose left, picture right. */
.page-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: var(--s-7);
	align-items: start;
}

.page-grid p {
	max-width: var(--measure);
}

.page-figure {
	margin: 0;
	border-radius: var(--r);
	width: 100%;
	display: block;
}

/* Buttons -- squared, uppercase, letterspaced ------------------------- */
.btn-primary-lab {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--r);
	background: var(--accent-ink);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	transition: background-color .15s ease;
}

.btn-primary-lab:hover,
.btn-primary-lab:focus {
	background: var(--accent-deep);
	color: #fff;
}

.btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	border-radius: var(--r);
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.btn-ghost:hover,
.btn-ghost:focus {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* "read more" reads as a small caption, not a button. */
.read-more,
.read-more:link,
.read-more:visited {
	display: inline-block;
	color: var(--accent-ink);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--accent-soft);
	padding-bottom: 2px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.read-more::after {
	content: "\2192";
	display: inline-block;
	margin-left: var(--s-2);
	transition: transform .2s ease;
}

.read-more:hover, .read-more:focus {
	color: var(--accent-deep);
	border-bottom-color: var(--accent);
}

.read-more:hover::after {
	transform: translateX(3px);
}

/* Square outlined icon button, used by the gallery and back-to-top. */
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--r);
	background: var(--paper);
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: 1rem;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.icon-btn:hover, .icon-btn:focus {
	background: var(--ink);
	color: var(--paper);
}

/* ==========================================================================
   6. HOME PAGE
   ========================================================================== */
.home-hero {
	margin: 0 0 var(--s-5);
	border-radius: var(--r);
	overflow: hidden;
	position: relative;
}

/* A wide group photograph. Capping the height crops it top and bottom only,
   so nobody gets cut off the sides. The offset leans the visible window
   towards the lower part of the frame -- more foreground, less sky. */
.hero-img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 520px;
	object-fit: cover;
	object-position: center 78%;
}

.home-row {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: stretch;
	margin-bottom: var(--s-5);
}

.home-row .card,
.home-research {
	display: flex;
	flex-direction: column;
}

.home-row .card .read-more {
	margin-top: auto;
	padding-top: var(--s-4);
	align-self: flex-start;
}

.home-row .card p,
.home-research p {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	margin-bottom: 0;
}

.home-research h3 span {
	display: block;
	margin-top: var(--s-2);
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}

/* The research index: numbered like a table of contents, and set in two
   columns so it fills the full measure instead of running down one side. */
.research-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: research;
	column-count: 2;
	column-gap: var(--s-8);
}

.research-list li {
	counter-increment: research;
	border-top: 1px solid var(--rule);
	break-inside: avoid;
}

.research-list a {
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	align-items: baseline;
	gap: var(--s-2);
	padding: var(--s-3) 0;
	color: var(--ink);
	font-size: 0.9375rem;
	line-height: 1.35;
	cursor: pointer;
}

.research-list a::before {
	content: counter(research, decimal-leading-zero);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent-ink);
}

.research-list a:hover,
.research-list a:focus {
	color: var(--accent-ink);
}

/* Calls to action ------------------------------------------------------ */
.cta-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin-top: var(--s-8);
	border-top: 1px solid var(--rule-ink);
}

.cta-card {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	padding: var(--s-5) var(--s-5) var(--s-5) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rule);
	cursor: pointer;
	transition: background-color .15s ease;
}

.cta-row .cta-card + .cta-card {
	padding-left: var(--s-5);
	border-left: 1px solid var(--rule);
}

.cta-card:hover, .cta-card:focus {
	background: var(--paper-sunk);
}

.cta-card img {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.cta-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cta-text strong {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--title);
	line-height: 1.15;
}

.cta-card::after {
	content: "\2192";
	margin-left: auto;
	color: var(--accent-ink);
	font-size: 1.125rem;
	transition: transform .2s ease;
}

.cta-card:hover::after {
	transform: translateX(4px);
}

/* ==========================================================================
   7. ABOUT + RESEARCH PAGES
   ========================================================================== */
#about-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: var(--measure);
}

#about-content .text-bold {
	font-weight: 600;
	color: var(--ink);
}

/* The opening band under a masthead: description left, picture right. Only
   this part is two columns -- the list below it spans the whole page.
   Shared by the research pages and Media. */
.page-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: var(--s-7);
	align-items: start;
	margin-bottom: var(--s-8);
}

.page-intro #explanation {
	margin: 0;
	font-size: clamp(1.125rem, 1.8vw, 1.375rem);
}

/* The lede, set in the display serif. */
#research-explanation {
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: clamp(1.25rem, 2.1vw, 1.625rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--ink);
	max-width: 46ch;
	margin: 0;
}

/* Full width, but set in two columns so the citations stay readable rather
   than running the whole 1100px measure. */
.research-articles {
	column-count: 2;
	column-gap: var(--s-8);
}

.research-articles p {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	margin-bottom: var(--s-5);
	padding-left: var(--s-4);
	border-left: 1px solid var(--rule);
	break-inside: avoid;
	transition: border-color .15s ease;
}

.research-articles p:hover {
	border-left-color: var(--accent);
}

/* Written as p.class, not .class: .research-articles p matches this element
   too and would otherwise tie on specificity and win on source order, taking
   the colour, the indent and the left rule with it. */
.research-articles p.research-articles-label {
	column-span: all;
	font-family: var(--font-body);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-ink);
	border-top: 1px solid var(--rule-ink);
	border-left: 0;
	padding: var(--s-3) 0 0;
	margin-bottom: var(--s-5);
}

/* ==========================================================================
   8. PEOPLE PAGES
   ========================================================================== */
.people-grid {
	display: grid;
	gap: var(--s-6) var(--s-5);
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	margin: 0;
}

.people-container {
	text-align: left;
	padding: 0;
	cursor: pointer;
}

/* The frame is what clips: the photograph pushes in slightly on hover
   without the tile changing size, so the grid never reflows. */
.people-photo {
	overflow: hidden;
	border-radius: var(--r);
	background: var(--paper-sunk);
	margin-bottom: var(--s-3);
}

.people-container img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

.people-container:hover img,
.people-container:focus-visible img {
	transform: scale(1.05);
}

/* No font-size change on hover -- it used to reflow the whole grid. */
.people-container span {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ink);
	border-top: 1px solid var(--rule);
	padding-top: var(--s-2);
	transition: color .15s ease, border-color .15s ease;
}

.people-container:hover span,
.people-container:focus span {
	color: var(--accent-ink);
	border-top-color: var(--accent);
}

/* Single member page --------------------------------------------------- */
#member-content {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
	max-width: var(--measure);
}

/* The name opens the biography as the subject of its first sentence, so it
   runs on in the body text -- weight and colour only, no display face and no
   size of its own. It used to be a second heading under the page title. */
.member-name {
	font-weight: 600;
	color: var(--title);
}

#member-content p {
	display: block;
}

#member-img-container {
	text-align: left;
}

#member-img-container img {
	width: 100%;
	border-radius: var(--r);
	margin-bottom: var(--s-5);
}

/* Former students lists ------------------------------------------------ */
#former-students-list {
	list-style: none;
	counter-reset: student;
	font-size: 1rem;
	padding: 0;
	margin: 0;
	max-width: 92ch;
	color: var(--muted);
}

#former-students-list li {
	counter-increment: student;
	display: grid;
	grid-template-columns: 3rem 1fr;
	gap: var(--s-3);
	border-top: 1px solid var(--rule);
	padding: var(--s-4) 0;
	margin: 0;
}

#former-students-list li::before {
	content: counter(student, decimal-leading-zero);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--accent-ink);
	line-height: 1.9;
}

/* The row is a two-column grid, so the citation has to be one element --
   loose spans would each become a grid item of their own. */
.student-body {
	min-width: 0;
}

#former-students-list li span {
	font-weight: 400;
}

#former-students-list .student-name {
	font-weight: 600;
	color: var(--ink);
}

/* ==========================================================================
   9. PUBLICATIONS PAGE
   ========================================================================== */
.pub-grid {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: var(--s-8);
	align-items: start;
}

/* Sticky year index. No inner scroller on the content pane any more -- the
   page itself scrolls, so nothing gets clipped. */
#Publication-link {
	position: sticky;
	top: calc(var(--header-h) + var(--s-4));
	align-self: start;
	max-height: calc(100vh - var(--header-h) - var(--s-7));
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	float: none;
	border-top: 1px solid var(--rule-ink);
}

.year-link-container {
	padding: 0;
}

.year-link,
.year-link:visited {
	display: block;
	text-align: left;
	padding: var(--s-2) 0;
	border-bottom: 1px solid var(--rule);
	background: transparent;
	color: var(--muted);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	white-space: nowrap;
	box-shadow: none;
	transition: color .15s ease, padding-left .15s ease;
}

.year-link:hover,
.year-link:focus,
.year-link:active {
	background: transparent;
	color: var(--accent-ink);
	padding-left: var(--s-2);
	box-shadow: none;
	cursor: pointer;
}

#Publication-content {
	float: none;
	height: auto;
	overflow: visible;
}

#Publication-content section {
	/* clear the sticky header when an anchor is jumped to */
	scroll-margin-top: calc(var(--header-h) + var(--s-5));
	margin-bottom: var(--s-8);
}

#Publication-content h3 {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--title);
	padding-bottom: var(--s-2);
	border-bottom: 1px solid var(--rule-ink);
	margin: 0 0 var(--s-5);
}

/* Citations are scanned rather than read, so they run the full width of the
   column instead of being held to the prose measure. */
#Publication-content p {
	margin-bottom: var(--s-4);
	padding-left: var(--s-4);
	border-left: 1px solid var(--rule);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ink-soft);
	max-width: none;
	transition: border-color .15s ease;
}

#Publication-content p:hover {
	border-left-color: var(--accent);
}

#top-content-title {
	margin-top: 0;
}

/* Back to top: a small square in the corner. */
#back-to-top,
#back-to-top:link,
#back-to-top:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	right: var(--s-5);
	bottom: var(--s-5);
	z-index: 100;
	width: 42px;
	height: 42px;
	border-radius: var(--r);
	background: var(--paper);
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

#back-to-top:hover,
#back-to-top:focus {
	background: var(--ink);
	color: var(--paper);
	cursor: pointer;
}

/* ==========================================================================
   10. NEWS PAGE
   ========================================================================== */
.news-feature {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--s-7);
	align-items: start;
}

.news-feature img {
	width: 100%;
	border-radius: var(--r);
	display: block;
}

#news-content p {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ink-soft);
	margin: 0;
	max-width: var(--measure);
}

/* A ruled table: the grid draws the top and left edges, each cell the right
   and bottom, so the whole block closes however many columns fit. */
.other-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 0;
	border-top: 1px solid var(--rule-ink);
	border-left: 1px solid var(--rule);
}

/* No fixed height: the block grows with its text, and the read-more links
   still line up because they are pushed to the bottom. */
.other-news-container {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--rule);
	border-right: 1px solid var(--rule);
	padding: var(--s-6);
	margin: 0;
	transition: background-color .15s ease;
}

.other-news-container:hover {
	background: var(--paper-sunk);
}

.other-news-container p {
	color: var(--ink-soft);
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: var(--s-5);
}

.other-news-container .read-more {
	margin-top: auto;
	align-self: flex-start;
}

#conference-link:link,
#conference-link:visited {
	color: var(--accent-ink);
	font-weight: 500;
}

#conference-link:hover,
#conference-link:active {
	color: var(--accent-deep);
	cursor: pointer;
}

/* ==========================================================================
   11. MEDIA PAGE
   ========================================================================== */
#media-content {
	float: none;
	height: auto;
	overflow: visible;
	border-top: 1px solid var(--rule-ink);
}

#media-content .media-link,
#media-content a:link,
#media-content a:visited {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: var(--s-4);
	padding: var(--s-4) var(--s-3) var(--s-4) 0;
	color: var(--ink);
	font-size: 0.9375rem;
	font-weight: 400;
	line-height: 1.5;
	border-bottom: 1px solid var(--rule);
	transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

#media-content a::after {
	content: "\2197";
	color: var(--muted);
	font-size: 0.9em;
}

#media-content a:hover,
#media-content a:focus,
#media-content a:active {
	background: var(--paper-sunk);
	color: var(--accent-ink);
	padding-left: var(--s-3);
	cursor: pointer;
}

#media-content a:hover::after {
	color: var(--accent-ink);
}

#media-content hr {
	display: none;	/* the list has its own separators */
}

/* ==========================================================================
   12. GALLERY PAGE
   ========================================================================== */
/* A contact sheet. Every frame is the same shape so the grid is stable while
   the pictures lazy-load; the viewer below shows them uncropped. */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: var(--s-3);
}

.gallery-thumb {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	border-radius: var(--r);
	overflow: hidden;
	background: var(--paper-sunk);
	cursor: pointer;
}

.gallery-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}

.gallery-thumb:hover img,
.gallery-thumb:focus-visible img {
	transform: scale(1.06);
}

/* Viewer ---------------------------------------------------------------- */
body.lightbox-open {
	overflow: hidden;
}

#gallery-lightbox {
	display: none;
}

#gallery-lightbox.is-open {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	background: rgba(20, 17, 15, .98);
	padding: var(--s-4) var(--s-5) var(--s-5);
	gap: var(--s-4);
	/* The viewer is a child of #main-content, so the page-transition
	   animation would otherwise apply its opacity:0 start state here. That
	   animation cannot run while the viewer is display:none, which would
	   leave an invisible overlay sitting over the page swallowing clicks. */
	animation: none;
	opacity: 1;
}

.lightbox-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
}

.lightbox-bar .gallery-counter {
	color: rgba(250, 247, 242, .6);
}

.lightbox-bar .gallery-counter #picture-number {
	color: var(--paper);
}

.lightbox-stage {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--s-4);
	min-height: 0;
}

.lightbox-foot {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s-5);
}

#img-container {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
}

#img-container img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.gallery-counter {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}

#picture-title {
	text-align: left;
	margin: 0;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.4;
	color: rgba(250, 247, 242, .78);
	max-width: 70ch;
}

/* Outlined on the dark ground rather than the paper ground. */
.lightbox-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--r);
	background: transparent;
	border: 1px solid rgba(250, 247, 242, .35);
	color: var(--paper);
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.lightbox-btn:hover,
.lightbox-btn:focus-visible {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

.lightbox-btn:focus-visible {
	outline: 2px solid var(--paper);
	outline-offset: 3px;
}

/* script.js toggles play/pause by setting these spans' height between
   "auto" and "0", so they must stay block-level inside a clipped box. */
#gallery-play-stop {
	overflow: hidden;
}

#gallery-play-stop span {
	display: block;
	overflow: hidden;
	line-height: 1;
}

#gallery-play {
	height: auto;
}

#gallery-stop {
	height: 0;
}

/* ==========================================================================
   13. CONTACT PAGE
   ========================================================================== */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-6);
	align-items: start;
}

#contact-content {
	font-size: 0.9375rem;
	line-height: 1.7;
}

#contact-content .text-bold {
	display: block;
	font-family: var(--font-display);
	font-optical-sizing: auto;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--title);
	margin-bottom: var(--s-4);
}

#contact-content div {
	margin-bottom: var(--s-1);
	color: var(--muted);
}

#contact-content a {
	color: var(--accent-ink);
	border-bottom: 1px solid var(--accent-soft);
}

#contact-content a:hover {
	border-bottom-color: var(--accent);
}

.contact-cta {
	margin-top: var(--s-5);
}

#contact-img {
	width: 100%;
	border-radius: var(--r);
}

#map {
	border-radius: var(--r);
	overflow: hidden;
	border: 1px solid var(--rule-ink);
	line-height: 0;
}

#map iframe {
	display: block;
	width: 100%;
	border: 0;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
footer.panel-footer {
	background: transparent;
	border-top: 1px solid var(--rule-ink);
	padding: var(--s-5) 0 var(--s-7);
	margin: 0;
	color: var(--muted);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

footer .text-center {
	text-align: left !important;
}

#copyright-symbol {
	font-size: 1em;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* --- tablet and up: sticky header, horizontal nav, floating submenus --- */
@media (min-width: 768px) {
	header {
		position: sticky;
		top: 0;
		z-index: 50;
	}

	/* Bootstrap floats the brand block left at this width, which would put the
	   nav beside the title instead of on its own row underneath it. */
	.navbar-header {
		float: none;
		width: 100%;
	}

	#collapsable-nav {
		float: none;
		clear: both;
		width: 100%;
	}

	/* the icons are for the mobile menu; the desktop bar reads better without */
	#nav-list > li > a > .glyphicon {
		display: none;
	}

	#nav-list > li > ul {
		position: absolute;
		top: 100%;
		left: calc(var(--s-3) * -1);
		z-index: 60;
		width: max-content;
		max-width: 320px;
		padding: 0;
		background: var(--surface);
		border: 1px solid var(--rule-ink);
		border-radius: var(--r);
		/* hidden outright while collapsed, otherwise the panel's own border
		   would still draw as a hairline under the bar */
		visibility: hidden;
		opacity: 0;
		transition: max-height .25s ease, opacity .2s ease, visibility 0s linear .25s;
	}

	#nav-list > li:hover > ul,
	#nav-list > li:focus-within > ul {
		max-height: 600px;
		padding: var(--s-2) 0;
		visibility: visible;
		opacity: 1;
		transition: max-height .25s ease, opacity .2s ease, visibility 0s;
	}
}

/* --- tablet only --- */
@media (min-width: 768px) and (max-width: 991px) {
	:root {
		--header-h: 152px;
	}

	#nav-list {
		gap: 0 var(--s-4);
	}

	#nav-list > li > a {
		font-size: 0.6875rem;
		letter-spacing: 0.1em;
	}

	.Logo {
		width: 72px;
		height: 72px;
	}

	.hero-img {
		max-height: 400px;
	}

	.pub-grid {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: var(--s-6);
	}

	.page-grid,
	.page-intro,
	.page-head--figure,
	.news-feature {
		gap: var(--s-6);
	}
}

/* --- phones --- */
@media (max-width: 767px) {
	:root {
		--header-h: 96px;
	}

	.container {
		padding-left: var(--s-4);
		padding-right: var(--s-4);
	}

	#header-row {
		padding: var(--s-3) 0;
		gap: var(--s-3);
	}

	.Logo {
		width: 60px;
		height: 60px;
	}

	header h1 {
		font-size: 1rem;
		line-height: 1.2;
		padding-right: 48px;	/* clear the hamburger */
	}

	.navbar-header {
		position: relative;
	}

	button#navbarToggle {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		margin: 0;
		padding: var(--s-2);
		background: transparent;
		border: 1px solid var(--ink);
		border-radius: var(--r);
	}

	.navbar-default .navbar-toggle:hover,
	.navbar-default .navbar-toggle:focus {
		background: var(--paper-sunk);
	}

	.navbar-default .navbar-toggle .icon-bar {
		background-color: var(--ink);
		border: 0;
	}

	#collapsable-nav {
		border-top: 1px solid var(--rule-ink);
	}

	#nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--s-2) 0;
		border-top: 0;
	}

	#nav-list > li > a {
		justify-content: flex-start;
		padding: var(--s-3) 0;
		border-bottom: 1px solid var(--rule);
		font-size: 0.75rem;
		text-align: left;
	}

	#nav-list > li > a > .glyphicon {
		width: 20px;
		color: var(--muted);
		font-size: 0.9em;
	}

	#nav-list > li > a#page-on > .glyphicon {
		color: var(--accent-ink);
	}

	/* submenus open inline underneath their parent */
	#nav-list > li:hover > ul,
	#nav-list > li:focus-within > ul {
		max-height: 1000px;
	}

	#nav-list ul {
		padding-left: var(--s-5);
		border-left: 1px solid var(--rule);
		margin-left: var(--s-3);
	}

	/* content pages stack */
	.page-grid,
	.home-row,
	.page-intro,
	.page-head--figure,
	.pub-grid,
	.news-feature,
	.contact-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--s-5);
	}

	.research-articles {
		column-count: 1;
	}

	#main-title {
		max-width: none;
	}

	.hero-img {
		max-height: 300px;
	}

	.research-list {
		column-count: 1;
	}

	.cta-row {
		grid-template-columns: 1fr;
	}

	.cta-card,
	.cta-row .cta-card + .cta-card {
		padding: var(--s-4) 0;
		padding-left: 0;
		border-left: 0;
	}

	.people-grid {
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: var(--s-5) var(--s-4);
	}

	/* the year index becomes a horizontal strip above the list */
	#Publication-link {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 0 var(--s-4);
		max-height: none;
		overflow: visible;
		margin-bottom: var(--s-6);
		border-top: 1px solid var(--rule-ink);
		padding-top: var(--s-2);
	}

	.year-link-container {
		flex: 0 0 auto;
		width: auto;
	}

	.year-link,
	.year-link:visited {
		border-bottom: 0;
		padding: var(--s-1) 0;
	}

	.year-link:hover {
		padding-left: 0;
	}

	#Publication-content h3 {
		font-size: 1.625rem;
	}

	#member-img-container {
		order: -1;
	}

	.other-news-container {
		border-right: 0;
		padding: var(--s-5);
	}

	.section-head {
		margin-top: var(--s-8);
	}

	.gallery-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--s-2);
	}

	/* the arrows move under the picture so it can use the full width */
	#gallery-lightbox.is-open {
		padding: var(--s-3) var(--s-4) var(--s-4);
		gap: var(--s-3);
	}

	/* the arrows lift onto the picture so it can use the full width */
	.lightbox-stage {
		position: relative;
		grid-template-columns: minmax(0, 1fr);
	}

	.lightbox-stage .lightbox-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		width: 40px;
		height: 40px;
		background: rgba(20, 17, 15, .6);
	}

	.lightbox-stage #backward-arrow {
		left: 0;
	}

	.lightbox-stage #foward-arrow {
		right: 0;
	}

	.lightbox-foot {
		align-items: center;
		gap: var(--s-4);
	}

	.lightbox-foot #picture-title {
		font-size: 1rem;
	}

	#back-to-top,
	#back-to-top:link,
	#back-to-top:visited {
		right: var(--s-4);
		bottom: var(--s-4);
	}
}

/* --- small phones --- */
@media (max-width: 480px) {
	.people-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	header h1 {
		font-size: 0.875rem;
	}

	.gallery-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   16. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	html {
		scroll-behavior: auto;
	}
}