/* Small additions layered over main.css. Keeps the Editorial theme and the
   #2d709c blue; only fixes things that were broken or hard to read. */

/* Body text was #7f888f, about 3:1 on white and below the 4.5:1 minimum. */
body, input, select, textarea { color: #5f686f; }

/* Justified text at this measure opens rivers of whitespace between words. */
#main p[align="justify"], #main p { text-align: left; }

/* iframe height="auto" is not valid, so the talk videos collapsed to a sliver.
   A 16:9 box gives them their real size at every width. */
#main iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 4px;
	background: #eff1f2;
}

/* The portrait had no size rule and filled its column, dwarfing the name.
   Cap the photo and give the name more weight so the two balance. */
/* main.css lays the banner out as a rigid flex row. Make it a normal block so
   the portrait can float top-right and the text wraps beneath it once it
   clears the image. The markup puts the image first for the float to work. */
#banner {
	display: block;
	overflow: hidden;
}
#banner .content { width: auto; }
#banner .content h2 {
	font-size: clamp(1.8rem, 1.15rem + 2.4vw, 3rem);
	line-height: 1.15;
	margin-bottom: 0.65em;
}
/* Fluid, not fixed: the portrait scales with the viewport between sane
   bounds instead of sitting at one pixel width on every screen. */
#banner .image.object {
	float: right;
	width: clamp(150px, 24vw, 320px);
	margin: 0 0 1.5em clamp(1.25em, 3vw, 3em);
}
#banner .image.object img { width: 100%; height: auto; border-radius: 4px; }

/* main.css gives this span a fixed 25em / min 18em height box in portrait
   orientation. The photo is far shorter, so the float stayed tall and left a
   dead band under it, and squeezed the text into a narrow column well past the
   image. Let the box size to the picture instead, at every orientation. */
#banner .image.object {
	height: auto;
	min-height: 0;
	max-height: none;
}

@media screen and (max-width: 736px) {
	#banner .image.object {
		float: none;
		width: clamp(140px, 45vw, 240px);
		margin: 0 0 1.75em 0;
	}
}

/* Projects, talks and tutorials: each entry becomes a bordered card whose
   boundary picks up the theme blue on hover. */
#main .posts > article {
	margin-bottom: 3em;
	padding: 1.5em;
	border: 1px solid #e2e6e9;
	border-radius: 6px;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
#main .posts > article:hover {
	border-color: #2d709c;
	background-color: rgba(45, 112, 156, 0.05);
	box-shadow: 0 2px 12px rgba(45, 112, 156, 0.12);
}
/* The template draws divider rules between entries; the card border replaces
   them, so hide both the vertical (:before) and horizontal (:after) rules. */
#main .posts > article:before,
#main .posts > article:after { display: none; }
#main .posts > article > img,
#main .posts > article > a.image img { border-radius: 4px; }
#main .posts > article h3 { margin-top: 0.75em; }

@media (prefers-reduced-motion: reduce) {
	#main .posts > article { transition: none; }
}

/* A little more air between publication entries, and tidier link runs. */
#main article + article { margin-top: 1.25em; }
#main article .content h3 { margin-bottom: 0.35em; }
#main article .content h3 + a { font-size: 0.85em; }

/* Buttons: main.css still hovers them to a faint coral tint left over from the
   unused palette. Fill them with the theme blue and flip the label to white. */
#main .button:hover,
#main .button:focus,
#main input[type="submit"]:hover,
#main input[type="submit"]:focus {
	background-color: #2d709c;
	box-shadow: inset 0 0 0 2px #2d709c;
	color: #ffffff !important;
}
#main .button:hover .label,
#main .button:focus .label { color: #ffffff !important; }
#main .button:active { background-color: #255c80; box-shadow: inset 0 0 0 2px #255c80; }

/* --- Responsive safety ---------------------------------------------------- */

/* Nothing should be able to push the page wider than the screen. */
#main img, #main video, #main iframe, #main table { max-width: 100%; }
#main img, #main video { height: auto; }
#main pre, #main table { overflow-x: auto; }

/* The template keeps two columns of cards all the way down to 480px. With the
   card padding added above, that leaves roughly 130px of text per column on a
   small phone. Go single column while there is still room to read. */
@media screen and (max-width: 860px) {
	#main .posts { margin-left: 0; width: 100%; }
	#main .posts > article { width: 100%; margin-left: 0; }
}
@media screen and (max-width: 480px) {
	#main .posts > article { padding: 1.1em; }
}

/* The masthead links are inline text separated by pipes; let them wrap rather
   than run off the edge on a narrow screen. */
#header .navig { display: flex; flex-wrap: wrap; gap: 0 0.35em; align-items: baseline; }
#header .icons { flex-wrap: wrap; }

/* Keep section padding from eating the screen on small viewports. */
@media screen and (max-width: 480px) {
	#banner { padding: 3em 0 2em 0; }
}