/*
	Custom refinements on top of the Solid State template (main.css).
	Loaded after main.css; delete this file and its <link> tags to revert.
	Palette follows the background image: deep indigo, magenta/pink, warm orange.
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap");

:root {
	--accent: #a9b8ea;
	--accent2: #c4a8d8;
	--ink-soft: rgba(255, 255, 255, 0.82);
	--card: rgba(255, 255, 255, 0.05);
	--card-border: rgba(255, 255, 255, 0.12);
}

/* ---- Page background (compressed image instead of the 24 MB original) ---- */

body {
	background-color: transparent;
	background-image: none;
	background-attachment: scroll;
}

/* A fixed layer instead of background-attachment: fixed, which jumps on phones.
   It has its own compositor layer and, on touch screens, a constant pixel height
   (set in motion.js) so that it is never resized while the browser's address bar slides away. */
body:before {
	content: "";
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	height: var(--bg-h, 100lvh);
	background-color: #14132b;
	background-image: linear-gradient(to top, rgba(10, 9, 26, 0.75), rgba(10, 9, 26, 0.75)), url("../../images/bg.jpg");
	background-size: auto, cover;
	background-position: center, center;
	background-repeat: no-repeat;
	pointer-events: none;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	will-change: transform;
}

html {
	background-color: #14132b;
}

/* ---- Typography ---- */

body, input, select, textarea {
	font-family: "Inter", "Source Sans Pro", Helvetica, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

p, li {
	color: var(--ink-soft);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Inter", Helvetica, sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* Headings with a short accent bar that follows the text alignment */
h2.major, h3.major {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 1em;
}

h2.major:after, h3.major:after {
	content: "";
	display: block;
	width: 2.6em;
	height: 1px;
	margin: 0.7em auto 0 0;
	background: linear-gradient(to right, var(--accent), var(--accent2));
}


#banner h2, #wrapper > header h2 {
	font-weight: 500;
}

#banner p, #wrapper > header p {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.88);
}

/* ---- Spacing ---- */

.wrapper {
	margin: 2.4em 0;
}

.wrapper .inner {
	padding-top: 2em;
	padding-bottom: 0.5em;
}

p {
	margin: 0 0 1em 0;
}

/* ---- Links ---- */

a {
	transition: color 0.2s ease, border-color 0.2s ease;
}

p a, li a {
	color: var(--accent);
	border-bottom: 1px solid rgba(169, 184, 234, 0.3);
}

p a:hover, li a:hover {
	color: #ffffff !important;
	border-bottom-color: var(--accent2);
}

/* ---- Header / menu ---- */

#menu a, #menu li a, #header a {
	color: #ffffff;
	border-bottom: 0;
}

#menu .inner {
	background-color: #2c2e52;
}

#menu li a:hover {
	color: var(--accent) !important;
}


#header {
	background-color: rgba(14, 12, 34, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

#menu {
	background-color: rgba(20, 19, 43, 0.96);
}

/* ---- Buttons ---- */

.button, input[type="submit"], input[type="reset"], input[type="button"], button {
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.button.primary, .button.special {
	background: linear-gradient(to right, var(--accent), var(--accent2));
	color: #1a1533 !important;
	opacity: 0.92;
	box-shadow: none;
}

.button.primary:hover, .button.special:hover {
	background: #ffffff;
}

/* ---- Content blocks ---- */

.wrapper.spotlight .image {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

.features article {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 1.4em 1.3em;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.features article:hover {
	border-color: rgba(255, 255, 255, 0.25);
}

.features article h3.major {
	margin-bottom: 0.8em;
}

/* ---- Lists (talks, events, publications) ---- */

ul.alt li {
	border-top: 0;
	padding: 0.4em 0;
}

/* ---- Video embed ---- */

.video-card {
	margin: 0 0 2em 0;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
}

.video-card .video-frame {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	background: #000;
}

.video-card .video-frame iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-card .video-caption {
	padding: 1em 1.3em 1.1em 1.3em;
}

.video-card .video-caption h4 {
	margin: 0 0 0.2em 0;
	font-size: 1em;
	letter-spacing: 0;
	text-transform: none;
}

.video-card .video-caption p {
	margin: 0;
	font-size: 0.9em;
}

/* ---- Footer ---- */

/* No box: the page background shows through at every screen size */
#footer {
	background: none;
	margin-top: 0;
	padding-top: 0;
}

/* ---- Accessibility ---- */

a:focus-visible, button:focus-visible, .button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}

/* ---- Section shapes ----
	Each section and its two diagonal edges are drawn as ONE translucent shape
	(clip-path), so there are no seams or overlaps between box and triangles. */

#page-wrapper .wrapper,
#page-wrapper .wrapper.spotlight,
#page-wrapper .wrapper.style1,
#page-wrapper .wrapper.style2,
#page-wrapper .wrapper.style3 {
	--w: 2.4em;
	background: none;
	isolation: isolate;
}

#page-wrapper .wrapper:before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 0;
	right: 0;
	top: calc(-1 * var(--w) - 1px);
	bottom: calc(-1 * var(--w) - 1px);
	height: auto;
	width: auto;
	background-image: none;
	box-shadow: none;
	transform: none;
	clip-path: polygon(0 var(--w), 100% 0, 100% 100%, 0 calc(100% - var(--w)));
}

#page-wrapper .wrapper.alt:before {
	clip-path: polygon(0 0, 100% var(--w), 100% calc(100% - var(--w)), 0 100%);
}

#page-wrapper .wrapper:after {
	content: none;
}

/* Section colors (translucent, so the background image shows through) */
#page-wrapper .wrapper:before { background-color: rgba(20,20,42,.86); }
#page-wrapper .wrapper.style1:before { background-color: rgba(20,20,42,.86); }
#page-wrapper .wrapper.style2:before { background-color: rgba(25,26,48,.86); }
#page-wrapper .wrapper.style3:before { background-color: rgba(21,26,46,.86); }
#page-wrapper .wrapper.spotlight:before { background-color: rgba(48,50,88,.86); }
#page-wrapper .wrapper.spotlight.style1:before { background-color: rgba(48,50,88,.86); }
#page-wrapper .wrapper.spotlight.style2:before { background-color: rgba(66,48,84,.86); }
#page-wrapper .wrapper.spotlight.style3:before { background-color: rgba(40,56,96,.86); }

/* ---- Publications ---- */

.papers {
	display: grid;
	gap: 1em;
}

.paper, .topic {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 12px;
	padding: 1.3em 1.5em;
}

.paper-meta {
	display: flex;
	align-items: center;
	gap: 0.8em;
	margin-bottom: 0.5em;
	font-size: 0.75em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.paper .badge {
	padding: 0.15em 0.8em;
	border-radius: 999px;
	border: 1px solid var(--card-border);
	color: var(--ink-soft);
}

.paper .badge.published {
	border-color: var(--accent);
	color: var(--accent);
}

.paper .year {
	color: rgba(255, 255, 255, 0.55);
}

.paper h3 {
	margin: 0 0 0.3em 0;
	font-size: 1.05em;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

.paper .authors {
	margin: 0 0 0.8em 0;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.6);
}

.paper-links {
	margin: 0;
	font-size: 0.85em;
}

.paper .paper-links a {
	display: inline-block;
	margin: 0 0.5em 0.3em 0;
	padding: 0.1em 0.9em;
	border: 1px solid rgba(169, 184, 234, 0.4);
	border-radius: 999px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.paper .paper-links a:hover {
	background-color: rgba(169, 184, 234, 0.18);
}

/* ---- Research page: one continuous reading flow ---- */

.prose {
	margin: 0 0 3em 0;
}

.prose p {
	line-height: 1.75;
}

.prose p.lead {
	font-size: 1.15em;
	line-height: 1.7;
	color: #ffffff;
}

.prose h3.major {
	margin-top: 3.6em;
}

.prose p.paper-links {
	margin-top: -0.2em;
	margin-bottom: 2.4em;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.6);
}

.prose p.paper-links a {
	margin-left: 0.2em;
}

.video-card {
	text-align: left;
}

/* ---- Link cards: even padding (remove the template's bottom margin on the link) ---- */

.features article a.special {
	margin: 0;
}

.features article:has(> a.special:only-child) {
	display: flex;
	align-items: center;
	padding: 1.1em 1.4em;
}

/* ---- Collapsible abstracts ---- */

.paper details.abstract {
	margin-top: 0.8em;
}

.paper details.abstract summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.2s ease;
}

.paper details.abstract summary::-webkit-details-marker {
	display: none;
}

.paper details.abstract summary:before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	color: var(--accent);
}

.paper details.abstract[open] summary:before {
	content: "\2212";
}

.paper details.abstract summary:hover {
	color: #ffffff;
}

.paper details.abstract p {
	margin: 0.8em 0 0 0;
	padding-left: 1em;
	border-left: 1px solid var(--card-border);
	font-size: 0.9em;
	line-height: 1.7;
}

/* ---- Timelines (CV, talks) ---- */

.prose.wide {
	max-width: none;
}

.prose h3.major:first-child {
	margin-top: 0;
}

.timeline {
	margin-bottom: 1em;
}

.entry {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 1.4em;
	padding: 0.65em 0;
}

.entry .when {
	padding-top: 0.2em;
	font-size: 0.85em;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
}

.entry h4 {
	margin: 0 0 0.2em 0;
	font-size: 1em;
	line-height: 1.4;
	text-transform: none;
	letter-spacing: 0;
}

.entry p {
	margin: 0 0 0.3em 0;
	font-size: 0.95em;
	line-height: 1.6;
}

.entry p.where {
	color: rgba(255, 255, 255, 0.7);
}

.entry p:last-child {
	margin-bottom: 0;
}

@media screen and (max-width: 736px) {
	.entry {
		grid-template-columns: 1fr;
		gap: 0.2em;
	}
}

/* ---- Archery: readable text width, full-width pictures ---- */

.prose-flow > p {
	font-size: 1.05em;
	line-height: 1.8;
}

.prose-flow .image.right {
	margin-left: 1.5em;
}

.prose-flow .box.alt {
	margin-bottom: 2em;
}

/* ---- Photo gallery + lightbox ---- */

.gallery .gallery-item {
	cursor: zoom-in;
	overflow: hidden;
	border-radius: 10px;
}

.gallery .gallery-item img {
	transition: transform 0.35s ease, filter 0.35s ease;
}

.gallery .gallery-item:hover img {
	transform: scale(1.04);
	filter: brightness(1.08);
}

/* ---- Landing page ---- */

details.earlier-news summary {
	display: inline-block;
	cursor: pointer;
	list-style: none;
	font-size: 0.8em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

details.earlier-news summary::-webkit-details-marker {
	display: none;
}

details.earlier-news summary:before {
	content: "+";
	display: inline-block;
	width: 1.2em;
	color: var(--accent);
}

details.earlier-news[open] summary:before {
	content: "\2212";
}

details.earlier-news summary:hover {
	color: #ffffff;
}

details.earlier-news p {
	margin-top: 0.8em;
}

/* ---- Landing page banner: two quiet extra lines ---- */

#banner p.affiliation {
	margin: 0.4em 0 0 0;
	font-size: 0.8em;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.78);
}

#banner p.keywords {
	margin: 1.6em 0 0 0;
	padding-top: 1.1em;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: none;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.92);
}

#banner p.keywords span + span:before {
	content: "\00b7";
	margin: 0 0.8em;
	color: rgba(255, 255, 255, 0.45);
}

@media screen and (max-width: 736px) {
	#banner p.keywords span {
		display: block;
	}

	#banner p.keywords span + span:before {
		content: none;
	}
}

/* ---- Landing page: full-screen opening, content starts below the fold ---- */

html {
	scroll-behavior: smooth;
}

#banner {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	margin-bottom: 0;
	padding-top: 4em;
	padding-bottom: 7em;
	background: none;
}

#banner .inner {
	width: 100%;
	max-width: 55em;
}

.scroll-hint {
	position: absolute;
	left: 50%;
	bottom: 2.4em;
	width: 2.6em;
	height: 2.6em;
	margin-left: -1.3em;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	transition: border-color 0.2s ease, background-color 0.2s ease;
	animation: scroll-hint-bob 2.8s ease-in-out infinite;
}

.scroll-hint:before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.65em;
	height: 0.65em;
	margin: -0.5em 0 0 -0.33em;
	border-right: 1px solid rgba(255, 255, 255, 0.85);
	border-bottom: 1px solid rgba(255, 255, 255, 0.85);
	transform: rotate(45deg);
}

.scroll-hint:hover {
	border-color: var(--accent);
	background-color: rgba(255, 255, 255, 0.06);
}

@keyframes scroll-hint-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

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

	.scroll-hint {
		animation: none;
	}
}

/* ---- Landing page buttons: fade in after the text ---- */

#banner .actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 2em 0 0 0;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease 1.1s, transform 0.6s ease 1.1s;
}

#banner .actions li {
	width: auto;
	padding: 0 0.8em 0.8em 0;
}

body.is-preload #banner .actions {
	opacity: 0;
	transform: translateY(8px);
}

#banner .actions .button {
	min-width: 9em;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	#banner .actions {
		transition: none;
	}
}

@media screen and (max-width: 480px) {
	#banner .actions {
		flex-wrap: nowrap;
		margin-left: 0;
	}

	#banner .actions li {
		flex: 0 1 auto;
		padding: 0 0.5em 0 0;
	}

	#banner .actions .button {
		min-width: 0;
		height: 3em;
		line-height: 3em;
		padding: 0 1.1em;
		font-size: 0.6em;
		letter-spacing: 0.08em;
	}
}

/* ---- Landing page details ---- */

.video-card .video-caption p.summary {
	margin: 0 0 0.6em 0;
	font-size: 0.95em;
	color: var(--ink-soft);
}

/* ---- News: date | text ---- */

.news .entry {
	grid-template-columns: 7em 1fr;
	padding: 0.45em 0;
}

.news .entry p {
	margin: 0;
	font-size: 1em;
}

.news .entry .when {
	padding-top: 0.1em;
}

details.earlier-news .news {
	margin-top: 0.6em;
}

@media screen and (max-width: 736px) {
	.news .entry {
		grid-template-columns: 1fr;
	}
}

/* ---- Subpages: title and content share one centered column ---- */

#wrapper > header .inner,
#wrapper > header ~ .wrapper .inner {
	max-width: 46em;
	margin-left: auto;
	margin-right: auto;
}

/* ---- Landing page: same alignment in every section ---- */

#page-wrapper .wrapper.spotlight:nth-child(n) .inner {
	flex-direction: row;
	text-align: left;
}

#page-wrapper .wrapper.spotlight:nth-child(n) .image {
	margin: 0 3em 2em 0;
}

@media screen and (max-width: 980px) {
	#page-wrapper .wrapper.spotlight:nth-child(n) .image {
		margin: 0 2em 2em 0;
	}
}

@media screen and (max-width: 736px) {
	#page-wrapper .wrapper.spotlight:nth-child(n) .inner {
		display: block;
	}

	#page-wrapper .wrapper.spotlight:nth-child(n) .image {
		display: block;
		width: 11em;
		max-width: 70%;
		margin: 0 0 1.4em 0 !important;
	}
}

/* ---- Figures on the research page ---- */

.research-figure {
	margin: 1.8em 0 1.4em 0;
}

.research-figure .fig-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8em;
}

.research-figure .fig-panels.single {
	grid-template-columns: 1fr;
}

.research-figure .fig-panels a.image {
	display: block;
	margin: 0;
	background: #ffffff;
	border-radius: 10px;
	border-bottom: 0;
}

.research-figure .fig-panels img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	padding: 0.5em;
}

.research-figure figcaption {
	margin-top: 0.8em;
	font-size: 0.85em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.7);
}

.research-figure figcaption .fig-source {
	display: block;
	margin-top: 0.3em;
	color: rgba(255, 255, 255, 0.5);
}

@media screen and (max-width: 736px) {
	.research-figure .fig-panels {
		grid-template-columns: 1fr;
	}
}

/* ---- Diagram figure: chain of bubble loops ---- */

.research-figure.diagram {
	padding: 1.4em 1.2em 1em 1.2em;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 12px;
}

.research-figure.diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

.research-figure.diagram .leg {
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2;
	stroke-linecap: round;
}

.research-figure.diagram .v {
	fill: #ffffff;
}

.research-figure.diagram .loop {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.4;
}

.research-figure.diagram .op {
	fill: rgba(255, 255, 255, 0.7);
	font-family: "Inter", sans-serif;
	font-size: 30px;
}

.research-figure .formula {
	margin: 0.6em 0 0.4em 0;
	text-align: center;
	font-size: 1.2em;
	line-height: 2;
	color: #ffffff;
}

.research-figure .formula .sumop {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	vertical-align: middle;
	margin-right: 0.15em;
	line-height: 1;
}

.research-figure .formula .sumop .sigma {
	font-size: 1.7em;
	line-height: 1;
}

.research-figure .formula .sumop .lim {
	font-size: 0.55em;
	line-height: 1.2;
}

.research-figure .formula .fraction {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	line-height: 1.3;
}

.research-figure .formula .fraction > span {
	display: block;
	padding: 0 0.3em;
}

.research-figure .formula .fraction > span:first-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.8);
}

/* ---- Roadmap diagram ---- */

.research-figure.roadmap svg .hl-red { fill: rgba(255, 140, 140, 0.22); }
.research-figure.roadmap svg .hl-blue { fill: rgba(130, 175, 255, 0.24); }
.research-figure.roadmap svg .hl-green { fill: rgba(130, 220, 150, 0.22); }

.research-figure.roadmap svg .leg { stroke-width: 4; }

.research-figure.roadmap svg .ar {
	fill: none;
	stroke-width: 4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.research-figure.roadmap svg .a-red { stroke: #ff9d9d; }
.research-figure.roadmap svg .a-blue { stroke: #8fb6ff; }
.research-figure.roadmap svg .a-green { stroke: #8fe0a2; }
.research-figure.roadmap svg .a-white { stroke: rgba(255, 255, 255, 0.9); }

.research-figure.roadmap svg .lab {
	font-family: "Inter", sans-serif;
	font-size: 54px;
	font-weight: 500;
}

.research-figure.roadmap svg .t-red { fill: #ff9d9d; }
.research-figure.roadmap svg .t-blue { fill: #8fb6ff; }
.research-figure.roadmap svg .t-green { fill: #8fe0a2; }

/* ---- Intro diagram: from fluctuations to patterns ---- */

.intro-diagram svg .ring {
	fill: rgba(255, 255, 255, 0.03);
	stroke: rgba(255, 255, 255, 0.6);
	stroke-width: 2;
}

.intro-diagram svg .wave {
	fill: none;
	stroke: var(--accent);
	stroke-width: 3;
	stroke-linecap: round;
}

.intro-diagram svg .gal { fill: #ffffff; }

.intro-diagram svg .hi { fill: var(--accent); }

.intro-diagram svg .corr {
	stroke: var(--accent);
	stroke-width: 2.4;
	stroke-dasharray: 7 7;
	stroke-linecap: round;
}

.intro-diagram svg .ar {
	fill: none;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.intro-diagram svg .lab {
	fill: rgba(255, 255, 255, 0.88);
	font-family: "Inter", sans-serif;
	font-size: 34px;
}

.intro-diagram svg .lab.dim {
	fill: rgba(255, 255, 255, 0.6);
	font-size: 30px;
}

.intro-diagram svg .lab.small {
	font-size: 30px;
}

.intro-diagram svg .lab.t-acc {
	fill: var(--accent);
}

.intro-diagram svg .lab.halo {
	stroke: #1b1a33;
	stroke-width: 8px;
	paint-order: stroke;
	stroke-linejoin: round;
}

/* ---- Analytic methods: Feynman diagrams ---- */

.feyn-diagram svg .prop {
	fill: none;
	stroke: var(--accent);
	stroke-width: 2.6;
	stroke-linecap: round;
}

.feyn-diagram svg .bdry {
	stroke: rgba(255, 255, 255, 0.5);
	stroke-width: 2;
	stroke-dasharray: 9 8;
}

.feyn-diagram svg .end {
	fill: #1b1a33;
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 2;
}

.feyn-diagram svg .eta {
	fill: var(--accent);
	font-family: "Inter", sans-serif;
	font-style: italic;
	font-size: 32px;
}

.feyn-diagram svg .lab {
	fill: rgba(255, 255, 255, 0.88);
	font-family: "Inter", sans-serif;
	font-size: 34px;
}

.feyn-diagram svg .lab.dim {
	fill: rgba(255, 255, 255, 0.6);
	font-size: 28px;
}

/* ---- Page links (end of the research page) ---- */

ul.page-links {
	display: flex;
	flex-direction: row !important;
	align-items: flex-start !important;
	justify-content: flex-start !important;
	flex-wrap: wrap;
	gap: 0.8em;
	margin: 2.6em 0 1em 0;
	padding: 0;
	list-style: none;
}

ul.page-links li {
	padding: 0;
}

ul.page-links .button {
	white-space: nowrap;
}

ul.page-links li {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	text-align: left;
}

ul.page-links .button {
	display: inline-block !important;
	width: auto !important;
	min-width: 0 !important;
	padding: 0 2em !important;
}

/* ---- Cards: the whole card is the link ---- */

.features article {
	position: relative;
}

.features article a.card-link {
	display: inline-block;
	margin: 0.4em 0 0 0;
	font-size: 0.9em;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--accent);
	border-bottom: 0;
	text-transform: none;
}

.features article a.card-link:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.features article:hover a.card-link {
	color: #ffffff;
}

.features article:hover {
	cursor: pointer;
}

/* ---- IOAA page ---- */

.facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1em;
	margin: 0 0 1.4em 0;
	padding: 1.2em 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.facts .fact {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.facts .num {
	font-size: 1.9em;
	font-weight: 600;
	line-height: 1.1;
	color: #ffffff;
}

.facts .cap {
	font-size: 0.8em;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.65);
}

.table-wrap {
	margin: 1.4em 0 0.6em 0;
	overflow-x: auto;
}

table.results {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	background: none;
	font-size: 0.95em;
}

table.results th, table.results td {
	padding: 0.55em 0.6em;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	text-align: center;
	color: var(--ink-soft);
	background: none;
}

table.results thead th {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	white-space: nowrap;
}

table.results th:first-child, table.results td:first-child,
table.results .place {
	text-align: left;
}

table.results tbody th {
	font-weight: 600;
	color: #ffffff;
}

table.results .place {
	color: rgba(255, 255, 255, 0.65);
}

table.results tbody tr:nth-child(2n + 1) {
	background: none;
}

table.results .medal {
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-right: 0.5em;
	border-radius: 50%;
	vertical-align: baseline;
}

table.results .medal.gold { background: #e6c767; }
table.results .medal.silver { background: #c8d0da; }
table.results .medal.bronze { background: #cd8f5a; }
table.results .medal.hm { background: none; border: 1px solid rgba(255, 255, 255, 0.6); }

p.table-note {
	font-size: 0.8em;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

@media screen and (max-width: 736px) {
	.facts {
		grid-template-columns: 1fr 1fr;
		row-gap: 1.4em;
	}
}

@media screen and (max-width: 520px) {
	table.results .place {
		display: none;
	}

	table.results th, table.results td {
		padding: 0.5em 0.35em;
	}

	table.results .medal {
		margin-right: 0.3em;
	}
}

/* ---- Photo grid (IOAA page): uniform thumbnails, enlarged by gallery.js ---- */

.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
	gap: 0.8em;
	margin: 1.2em 0 2em 0;
}

.photo-grid .gallery-item {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	border-bottom: 0;
	cursor: zoom-in;
	aspect-ratio: 3 / 2;
}

.photo-grid .gallery-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	transition: transform 0.35s ease, filter 0.35s ease;
}

.photo-grid .gallery-item:hover img {
	transform: scale(1.04);
	filter: brightness(1.08);
}

/* ---- Photo credits ---- */

.image .credit {
	display: block;
	padding-top: 0.4em;
	font-size: 0.7em;
	line-height: 1.4;
	text-align: right;
	color: rgba(255, 255, 255, 0.6);
}

p.photo-credit {
	margin: -1em 0 0 0;
	font-size: 0.75em;
	color: rgba(255, 255, 255, 0.55);
}

/* Any photo that opens in the enlarged view */
a.gallery-item {
	cursor: zoom-in;
}

/* ---- Smooth open/close (details.js) ---- */

.details-body {
	overflow: hidden;
}

/* ---- Motion ---- */

@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal-up {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
	body { animation: page-in 0.5s ease; }

	body.is-leaving {
		opacity: 0;
		transition: opacity 0.18s ease;
	}

	html.reveal-ready .reveal { opacity: 0; }

	html.reveal-ready .reveal.is-visible {
		animation: reveal-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}

@media print {
	html.reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* Plus sign that turns into a minus (abstracts, earlier news) */
.paper details.abstract summary,
details.earlier-news summary {
	position: relative;
	padding-left: 1.5em;
}

.paper details.abstract summary:before,
.paper details.abstract summary:after,
details.earlier-news summary:before,
details.earlier-news summary:after {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 50%;
	width: 0.75em;
	height: 1.6px;
	margin: -0.8px 0 0 0;
	background: var(--accent);
	border-radius: 1px;
	transition: transform 0.3s ease;
}

.paper details.abstract summary:after,
details.earlier-news summary:after {
	transform: rotate(90deg);
}

.paper details.abstract[open] summary:before,
details.earlier-news[open] summary:before {
	content: "";
}

.paper details.abstract[open]:not(.closing) summary:after,
details.earlier-news[open]:not(.closing) summary:after {
	transform: rotate(0deg);
}

/* ---- Correlator tool ---- */

[hidden] {
	display: none !important;
}

.ct-card {
	margin: 1.4em 0;
	padding: 1.1em 1.2em;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 12px;
}

.ct-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.9em;
}

.ct-spacer {
	flex: 1 1 auto;
}

.ct-tool, .ct-chip {
	display: inline-block;
	width: auto;
	height: auto;
	min-width: 0;
	margin: 0;
	padding: 0.45em 1.1em;
	line-height: 1.4;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: none;
	color: #ffffff;
	background: transparent;
	border: 1px solid var(--card-border);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ct-tool:hover, .ct-chip:hover {
	background: rgba(169, 184, 234, 0.16);
	border-color: rgba(169, 184, 234, 0.5);
	color: #ffffff;
}

.ct-tool.is-active {
	background: linear-gradient(to right, var(--accent), var(--accent2));
	border-color: transparent;
	color: #1a1533;
}

.ct-ghost {
	color: rgba(255, 255, 255, 0.65);
}

#ct-canvas {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	background: rgba(8, 7, 24, 0.45);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
}

#ct-canvas.tool-vertex { cursor: crosshair; }
#ct-canvas.tool-edge { cursor: cell; }
#ct-canvas.tool-erase { cursor: not-allowed; }

#ct-canvas .ct-edge {
	stroke: rgba(255, 255, 255, 0.85);
	stroke-width: 3;
	stroke-linecap: round;
}

#ct-canvas .ct-edge-hit {
	stroke: transparent;
	stroke-width: 18;
}

#ct-canvas .ct-dir {
	stroke: var(--accent);
	stroke-width: 2.4;
	stroke-linecap: round;
}

#ct-canvas .ct-arrowhead {
	fill: var(--accent);
}

#ct-canvas .ct-rubber {
	stroke: var(--accent);
	stroke-width: 2.4;
	stroke-dasharray: 6 6;
	stroke-linecap: round;
	pointer-events: none;
}

#ct-canvas .ct-vertex {
	cursor: pointer;
	outline: none;
}

#ct-canvas.tool-move .ct-vertex { cursor: grab; }

#ct-canvas .ct-vertex circle {
	fill: #1b1a33;
	stroke: #ffffff;
	stroke-width: 2.4;
	transition: fill 0.15s ease, stroke 0.15s ease;
}

#ct-canvas .ct-vertex text {
	fill: #ffffff;
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-weight: 600;
	pointer-events: none;
}

#ct-canvas .ct-vertex:hover circle {
	stroke: var(--accent);
}

#ct-canvas .ct-vertex.is-pending circle {
	stroke: var(--accent2);
	stroke-width: 4;
}

#ct-canvas .ct-vertex.is-root circle {
	fill: var(--accent);
	stroke: #ffffff;
}

#ct-canvas .ct-vertex.is-root text:not(.ct-roottag) {
	fill: #1a1533;
}

#ct-canvas .ct-roottag {
	fill: var(--accent) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ct-hint {
	margin: 0.8em 0 0.2em 0;
	font-size: 0.85em;
	color: rgba(255, 255, 255, 0.7);
}

.ct-status {
	min-height: 1.4em;
	margin: 0 0 0.6em 0;
	font-size: 0.85em;
	color: #ffb4a8;
}

.ct-presets {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.ct-presets > span {
	margin-right: 0.3em;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.ct-placeholder {
	padding: 1em 1.2em;
	border: 1px dashed var(--card-border);
	border-radius: 12px;
}

.ct-rootinfo {
	font-size: 0.85em;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.6);
}

.ct-formula {
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0.4em 0;
	color: #ffffff;
	font-size: 1.05em;
}

.ct-formula .katex-display {
	margin: 0.3em 0;
}

.ct-formula-card .ct-coef {
	margin-top: 0.4em;
	padding-top: 0.8em;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ct-actions {
	margin-top: 0.4em;
	text-align: right;
}

.ct-defs {
	overflow-x: auto;
	color: #ffffff;
}

.ct-region {
	margin-top: 1em;
}

.ct-region .katex {
	color: #ffffff;
}

.ct-matrices .ct-formula {
	margin: 0.4em 0;
}

#ct-steps {
	margin-top: 1.4em;
}

#ct-steps summary {
	margin-bottom: 0.4em;
}

.prose .katex {
	font-size: 1em;
}

@media screen and (max-width: 736px) {
	.ct-card {
		padding: 0.9em 0.8em;
	}

	.ct-formula {
		font-size: 0.9em;
	}
}

.ct-defs {
	padding: 0.4em 1.2em;
}

.ct-def {
	display: grid;
	grid-template-columns: 10em 1fr;
	gap: 1.2em;
	align-items: center;
	padding: 0.8em 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ct-def:last-child {
	border-bottom: 0;
}

.ct-def-name {
	font-size: 0.75em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.ct-def-math {
	overflow-x: auto;
	overflow-y: hidden;
	color: #ffffff;
}

@media screen and (max-width: 736px) {
	.ct-def {
		grid-template-columns: 1fr;
		gap: 0.3em;
	}
}

/* KaTeX uses an "inner" helper class (for \neq, \not, overlaps). Keep the template's .inner layout off it. */
.katex .inner {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ---- Correlator tool: full correlator ---- */

.ct-optional {
	display: inline-block;
	margin-left: 0.8em;
	padding: 0.1em 0.8em;
	vertical-align: middle;
	font-size: 0.55em;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid rgba(169, 184, 234, 0.45);
	border-radius: 999px;
}

.ct-order-label {
	margin: 0 0 0.6em 0;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.ct-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin-bottom: 1em;
	min-height: 2.2em;
}

.ct-ord {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
	padding: 0.1em 0.3em;
	color: #ffffff;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--card-border);
	border-radius: 999px;
}

.ct-ord span {
	min-width: 1.8em;
	text-align: center;
	font-size: 0.95em;
}

.ct-ord button {
	width: 1.8em;
	height: 1.8em;
	min-width: 0;
	margin: 0;
	padding: 0;
	line-height: 1.7em;
	font-size: 1.1em;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	background: transparent;
	border: 0;
	box-shadow: none;
	cursor: pointer;
}

.ct-ord button:hover:not(:disabled) {
	color: var(--accent);
}

.ct-ord button:disabled {
	opacity: 0.25;
	cursor: default;
}

.ct-ord-sep {
	color: rgba(255, 255, 255, 0.5);
}

.ct-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

.ct-chip.ct-primary {
	background: linear-gradient(to right, var(--accent), var(--accent2));
	border-color: transparent;
	color: #1a1533;
}

.ct-chip.ct-primary:hover {
	background: #ffffff;
	color: #1a1533;
}

.ct-chip:disabled {
	opacity: 0.4;
	cursor: default;
}

.ct-actions-right {
	margin: 1em 0 0.4em 0;
	text-align: right;
}

.ct-eq {
	margin: 0.2em 0;
}

.ct-config {
	margin: 0.8em 0;
	padding: 0.6em 1em;
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: 12px;
}

details.ct-config > summary {
	display: flex;
	align-items: center;
	gap: 1em;
	width: 100%;
	box-sizing: border-box;
	padding: 0.4em 0 0.4em 1.5em;
	font-size: 0.8em;
}

details.ct-config > summary > span {
	color: rgba(255, 255, 255, 0.85);
}

.ct-mini {
	flex: 0 0 auto;
	width: 120px;
	height: auto;
}

.ct-mini .ct-mini-e {
	stroke: rgba(255, 255, 255, 0.8);
	stroke-width: 1.8;
}

.ct-mini .ct-mini-cut {
	stroke-dasharray: 3 3;
	stroke: rgba(255, 255, 255, 0.5);
}

.ct-mini .ct-mini-v {
	stroke: #ffffff;
	stroke-width: 1.8;
}

.ct-mini .ct-mini-plus {
	fill: var(--accent);
}

.ct-mini .ct-mini-minus {
	fill: #1b1a33;
}

.ct-config-body {
	padding-top: 0.6em;
}

.ct-cluster-title {
	margin: 1.4em 0 0.2em 0;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.ct-term-title {
	margin: 1.1em 0 0 0;
	padding-left: 0.8em;
	font-size: 0.8em;
	color: rgba(255, 255, 255, 0.55);
	border-left: 2px solid rgba(169, 184, 234, 0.45);
}

/* Definition rows: display maths never wraps; left-aligned, scrolls sideways if needed */
.ct-def-math .katex-display {
	margin: 0;
	text-align: left;
}

.ct-def-math .katex-display > .katex {
	text-align: left;
}

.ct-cond {
	display: inline-block;
	white-space: nowrap;
}

.ct-eq:empty {
	min-height: 2.6em;
}

/* Progress bar */
.ct-progress {
	margin: 1.1em 0 0.2em 0;
}

.ct-progress-track {
	position: relative;
	height: 0.55em;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
}

.ct-progress-fill {
	display: block;
	width: 0;
	height: 100%;
	min-width: 0.55em;
	background: linear-gradient(to right, var(--accent), var(--accent2));
	border-radius: 999px;
	transition: width 0.15s linear;
}

.ct-progress-label {
	margin: 0.5em 0 0 0;
	font-size: 0.8em;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	.ct-progress-fill {
		transition: none;
	}
}

/* A closed colouring block must not keep any space of its (emptied) content, in any browser */
details.ct-config:not([open]) > .ct-config-body {
	display: none;
}

details.ct-config::details-content {
	contain-intrinsic-size: none;
}