/* ============================================================
   Petr Sedlacek personal website stylesheet
   CODEX1: research-first academic polish with policy accents.
   ============================================================ */

:root {
	--navy: #0B2545;
	--ink: #2E3944;
	--soft: #47525E;
	--muted: #5D6B79;
	--gold: #A8842C;
	--gold-light: #D4AF55;
	/* secondary link blue: coauthor names, paper utility tags, body links */
	--link: #2F6F9F;
	--line: #E3E7EC;
	--wash: #F5F7FA;
	--bg: #FCFCFB;
	--maxw: 51rem;
	--top-field-height: 15rem;
	--font-body: -apple-system, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
	--font-head: Georgia, "Times New Roman", serif;
	/* type scale - three steps below body size, one above */
	--fs-small: 0.88rem;   /* captions, side links, year column */
	--fs-meta: 0.94rem;    /* secondary body text: .meta, timelines, fact rows, bullets */
	--fs-sub: 1.02rem;     /* small headings inside cards and lists */
	--fs-h3: 1.08rem;      /* standard h3 */
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.03rem;
	line-height: 1.7;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration: none; }
a:hover {
	color: var(--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--gold);
}

/* ---------- header ---------- */
.site-header {
	background: #fff;
	color: var(--navy);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	flex-wrap: wrap;
	padding: 1.05rem max(1.25rem, calc((100% - var(--maxw)) / 2)) 0.95rem;
	border-top: 5px solid var(--navy);
	border-bottom: 1px solid var(--line);
}
.brand-logos { display: flex; align-items: center; gap: 0.75rem; order: 2; }
.brand-logos a {
	padding: 0;
	display: inline-flex;
	align-items: center;
}
.brand-logos img { margin: 0; display: block; height: 34px; width: auto; }
.brand-name { order: 1; }
.site-header h1 {
	margin: 0;
	font-family: var(--font-head);
	font-size: 2rem;
	font-weight: 500;
	color: var(--navy);
	line-height: 1.15;
}
.site-header h1 a { color: var(--navy); }
.site-header h1 a:hover {
	color: var(--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--gold);
}
.site-subtitle {
	margin: 0.15rem 0 0;
	color: var(--soft);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* ---------- navigation ---------- */
.site-nav {
	background: #fff;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 8px rgba(11, 37, 69, 0.05);
}
.site-nav ul {
	max-width: 60rem;
	list-style: none;
	margin: 0 auto;
	padding: 0 1.25rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.5rem;
	font-size: 0.83rem;
	letter-spacing: 0.12em;
	font-weight: 600;
}
.site-nav ul li { display: block; margin: 0; }
.site-nav ul li a {
	color: var(--navy);
	padding: 0.55rem 0 0.5rem;
	display: inline-block;
	border-bottom: 2px solid transparent;
}
.site-nav ul li a:hover { color: var(--navy); text-decoration: none; border-bottom-color: var(--line); }
.site-nav a.aktivni { color: var(--navy); border-bottom-color: var(--gold); }

/* ---------- main content ---------- */
.obsah {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 1.45rem 1.25rem 4rem;
}
h2 {
	font-family: var(--font-head);
	font-size: 1.42rem;
	font-weight: 500;
	color: var(--navy);
	margin: 3rem 0 1.15rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--line);
	position: relative;
}
h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 2.5rem;
	border-bottom: 2px solid var(--gold);
}
h3 {
	font-family: var(--font-head);
	font-size: var(--fs-h3);
	font-weight: 500;
	color: var(--navy);
	margin: 1.6rem 0 0.2rem;
	line-height: 1.45;
}
h2 a { color: var(--navy); }
h2 a:hover { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); }
h3 a { color: var(--navy); }
h3 a:hover { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); }
p { margin: 0.4rem 0; }
.meta { color: var(--soft); font-size: var(--fs-meta); }
.name { font-weight: 400; color: var(--link); }

/* small bracket links */
.tag { color: var(--link); font-size: 0.86rem; font-weight: 400; }
a.tag:hover, .collapsible.tag:hover {
	color: var(--navy);
	text-decoration: none;
	border-bottom: 1px solid var(--gold);
}
.links { margin: 0.3rem 0 0.7rem; }
.collapsible { cursor: pointer; display: inline; }

.texter { display: none; }
@media print { .texter { display: block !important; } }
.abstract {
	font-size: 0.92rem;
	color: var(--soft);
	background: var(--wash);
	border-left: 2px solid var(--gold);
	padding: 0.7rem 1rem;
	border-radius: 0 4px 4px 0;
	margin: 0.6rem 0 1.1rem;
}

.top-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: var(--top-field-height);
	margin: 0.75rem 0 1.45rem;
	padding: 1.25rem 1.1rem;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--line);
	border-bottom: 3px solid var(--gold);
}
.panel-lead {
	max-width: 43rem;
	margin: 0;
	color: var(--soft);
	font-size: 1rem;
	line-height: 1.65;
}
.panel-lead + .panel-lead {
	margin-top: 0.65rem;
}
.policy-panel {
	height: auto;
	min-height: var(--top-field-height);
	padding-left: 1.1rem;
	padding-right: 1.1rem;
}
.policy-panel .panel-lead {
	max-width: none;
}
.top-panel + h2 {
	margin-top: 0.9rem;
}
.panel-contact {
	margin: 0.9rem 0 0;
	text-align: right;
	font-size: var(--fs-small);
	line-height: 1.5;
}

.page-photo {
	display: block;
	width: 100%;
	height: var(--top-field-height);
	margin: 0.75rem 0 1.45rem;
	object-fit: cover;
	box-sizing: border-box;
	padding: 0.22rem;
	background: #fff;
	border: 1px solid var(--line);
	border-bottom: 3px solid var(--gold);
}
.teaching-photo {
	object-position: 45% 38%;
}
.presentations-photo {
	object-position: 52% 42%;
}
.research-photo {
	/* 25% not 42%: the source was cropped (23 Jul 2026) to remove the wall and
	   metal rail above the whiteboard, which used to intrude at phone widths.
	   The lower value reproduces the original desktop framing on the shorter
	   image. Pre-crop original: _archive\codex1-photos-originals\ */
	object-position: 50% 25%;
}
.media-photo {
	/* Left-aligned, not centred: this photo is 3.2:1, so at phone widths the
	   crop is horizontal and a centred crop showed only body columns. The
	   byline and headline sit in the left 29% of the image, so anchoring to
	   the left edge keeps them visible. No effect on desktop, where the image
	   exactly fills the box width and there is no horizontal slack to move. */
	object-position: 0% 50%;
}
.personal-photo {
	object-position: 50% 42%;
}
.page-photo + h2 {
	margin-top: 0.9rem;
}
/* Phone-only text. Paired with .hide-phone (defined in the responsive block at
   the foot of this file) to swap a word or a sentence between desktop and
   phone, where the top fields have a fixed height budget. */
.phone-only {
	display: none;
}
.paper, .discussion, .media-item { margin: 0 0 1.6rem; }
.paper h3, .discussion h3, .media-item h3 { margin: 0 0 0.1rem; }
.discussion, .media-item { margin-bottom: 1.2rem; }
/* ---------- timeline rows ---------- */
.timeline { margin: 0.35rem 0 1.3rem; }
.tl-row {
	display: grid;
	grid-template-columns: 8.5em 1fr;
	gap: 0 1.4rem;
	padding: 0.1rem 0;
}
.tl-yr {
	color: var(--muted);
	font-size: var(--fs-small);
	font-weight: 400;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.tl-it { font-size: var(--fs-meta); }
.compact-timeline .tl-row {
	padding: 0.07rem 0;
}
/* ---------- home page ---------- */
.hero {
	position: relative;
	display: flex;
	gap: 2rem;
	align-items: center;
	height: var(--top-field-height);
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--line);
	border-bottom: 3px solid var(--gold);
	padding: 1.45rem 1.1rem;
	margin: 0.75rem 0 0.5rem;
}
.hero-photo {
	width: 10rem;
	flex: none;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(11, 37, 69, 0.14);
}
.hero-lead {
	font-family: var(--font-head);
	font-weight: 500;
	font-size: 1.28rem;
	color: var(--navy);
	line-height: 1.5;
	margin: 0;
}
.hero-affil {
	font-size: 1rem;
	color: var(--soft);
	line-height: 1.5;
	margin: 0.85rem 0 0;
}
.hero-fellowship {
	margin: 0.9rem 0 0;
	color: var(--soft);
	font-size: var(--fs-meta);
	line-height: 1.5;
}
.fellowship-title {
	margin: 0 0 0.15rem;
	font-size: var(--fs-sub);
}
.hero-fellowship p {
	margin: 0;
}
.hero-editor {
	margin: 0.65rem 0 0;
	color: var(--soft);
	font-size: var(--fs-meta);
	line-height: 1.5;
}
.editor-role {
	font-family: var(--font-head);
	color: var(--navy);
	font-size: var(--fs-sub);
}
.hero-info {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}
.hero-info .hero-lead {
	margin-top: -0.6rem;
}
.hero-info .hero-affil {
	margin-top: 0.6rem;
}
.home-links {
	margin: auto 0 0;
	padding-top: 0.5rem;
	font-size: 0.83rem;
	white-space: nowrap;
}

/* ---------- bio page ---------- */
.bio-layout {
	display: flex;
	gap: 2.75rem;
	align-items: flex-start;
	margin: 1.9rem 0 0;
}
.bio-photo-col {
	width: 14.5rem;
	flex: none;
}
.bio-photo {
	display: block;
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(11, 37, 69, 0.14);
}
.bio-download {
	margin: 0.55rem 0 0;
	font-size: var(--fs-small);
}
.bio-side-links {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--line);
	font-size: var(--fs-small);
	line-height: 1.8;
}
.bio-text p {
	margin: 0 0 1.05rem;
	color: var(--soft);
	font-size: 1rem;
	line-height: 1.65;
}
.bio-name {
	font-family: var(--font-head);
	color: var(--navy);
	font-size: var(--fs-sub);
}
.bio-text p:last-child {
	margin-bottom: 0;
}

.slideshow {
	display: block;
	width: 370px;
	height: 320px;
	max-width: 100%;
	object-fit: cover;
	margin: 1rem auto 1.75rem;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(11, 37, 69, 0.14);
}
.news-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.4rem;
	align-items: stretch;
	margin-bottom: 1.5rem;
}
.news-item {
	margin: 0 0 1.65rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--line);
}
.news-grid .news-item {
	background: #fff;
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	padding: 0.9rem 1rem 1rem;
	margin: 0;
}
.news-title { margin: 1.25rem 0 0.35rem; font-size: var(--fs-h3); }
.news-grid .news-title { margin-top: 0; font-size: var(--fs-sub); }
.news-title b, .news-title strong { font-weight: inherit; }
.recent-papers {
	margin: 0.35rem 0 1.4rem;
	padding-left: 1.2rem;
	font-size: var(--fs-meta);
}
.recent-papers li { margin: 0.35rem 0; }
.new-badge {
	display: inline-block;
	margin-right: 0.45rem;
	padding: 0.09rem 0.34rem 0.08rem;
	color: var(--navy);
	background: #FBF7EA;
	border: 1px solid var(--gold-light);
	border-radius: 3px;
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: 0.16em;
}
.news-bullets { margin: 0.3rem 0 0.5rem 1.2rem; padding: 0; font-size: var(--fs-meta); }
.news-bullets li { margin: 0.15rem 0; }
.factlist { margin: 0.4rem 0 0.6rem; }
.fact {
	display: grid;
	grid-template-columns: 8em 1fr;
	gap: 0 1.2rem;
	padding: 0.08rem 0;
	font-size: var(--fs-meta);
}
.news-grid .fact {
	grid-template-columns: 6.4em 1fr;
	gap: 0 0.8rem;
	font-size: 0.9rem;
}
.fact-q { font-style: italic; color: var(--muted); }
.fact-a { min-width: 0; }   /* second grid cell: allows long answers to wrap instead of overflowing */
.teaching-highlight { margin-bottom: 2.2rem; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem;
	margin-top: 0.75rem;
}
.contact-card {
	font-size: var(--fs-meta);
	background: transparent;
	padding: 0;
}
.contact-title {
	margin: 0 0 0.35rem;
	font-size: var(--fs-sub);
}
.contact-card p { margin: 0.45rem 0; }

/* Page title inside a top panel: keeps the standard h2 look (serif, navy,
   gold rule) and only drops the section-heading top margin. */
.panel-title {
	margin-top: 0;
}
.page-illustration {
	display: block;
	width: 23rem;
	max-width: 100%;
	margin: 1rem auto 1.75rem;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(11, 37, 69, 0.14);
}

/* ---------- macro lunch page ---------- */
/* Body copy and schedule lists here are plain <p>/<ul>; the child selector keeps
   the top-panel (kicker/lead) and .timeline rows untouched, while bringing prose
   and bullets into line with .meta / .news-bullets used on the other pages. */
.lunch-page > p { color: var(--soft); font-size: var(--fs-meta); }
.lunch-page > ul {
	margin: 0.35rem 0 1.1rem;
	padding-left: 1.2rem;
	font-size: var(--fs-meta);
}
.lunch-page > ul li { margin: 0.18rem 0; }
.lunch-page > ul ul { margin: 0.15rem 0 0.25rem; }

/* ---------- images ---------- */

.galerie {
	list-style: none;
	margin: 0.75rem 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: flex-start;
}
.galerie li { width: 13.5rem; }
.galerie li p { min-height: 2.6em; margin: 0 0 0.3rem; }
.galerie img { border-radius: 4px; display: block; }
.galerie-uniform li {
	width: 15rem;
}
.galerie-uniform li p {
	min-height: 0;
	white-space: nowrap;
}
.galerie-uniform img {
	width: 100%;
	height: 9.5rem;
	object-fit: cover;
}
.video-thumb {
	position: relative;
	display: block;
}
.video-thumb::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
	border-left: 1.15rem solid #fff;
	border-top: 0.7rem solid transparent;
	border-bottom: 0.7rem solid transparent;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
	pointer-events: none;
}
.video-thumb:hover {
	border-bottom: 0;
}
.galerie-center { justify-content: center; }
.galerie a:hover img { opacity: 0.85; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
	.site-header { justify-content: center; text-align: center; padding: 1rem 1rem 0.95rem; }
	.site-header h1 { font-size: 1.7rem; }
	.brand-logos { justify-content: center; }
	.site-nav ul { gap: 0.25rem 1.1rem; font-size: 0.8rem; justify-content: center; }
	.hero { flex-direction: column; text-align: center; gap: 1rem; height: auto; }
	.home-links { white-space: normal; }
	.bio-layout { flex-direction: column; align-items: center; }
	.bio-photo-col { width: 13rem; }
	.news-grid { grid-template-columns: 1fr; }
	/* Every top field - photo or text panel - is one shared height on phones,
	   so the fields line up as you move between pages. min-height rather than
	   height so an unusually narrow phone grows the box instead of clipping
	   the text; at 390px wide all of them land on exactly 15rem.
	   This only works because the leads that would overflow are trimmed on
	   phones with .hide-phone - see Policy.html and StartupCalculator.html.
	   If you lengthen a panel lead, re-check it against tools\measure-heights. */
	.top-panel { height: auto; min-height: var(--top-field-height); padding: 1rem 0; }
	.tl-row { grid-template-columns: 1fr; padding: 0.3rem 0; }
	.fact { grid-template-columns: 7.5em 1fr; }
	.hide-phone { display: none; }
	.phone-only { display: inline; }
}