/* Regular (400, plus its italic) and semi-bold (600); main.css only loads 300 and 900 */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap");

/* Personal tweaks layered on top of Big Picture's main.css.
   --pill sets the button colour; --accent the small highlights. */

:root {
	--accent: #f4c9a8;
	--accent-strong: #e9a274;
	--pill: #6f5844;        /* muddy brown buttons (CV, Contact) */
	--pill-hover: #574434;
	--ink: #2b2b2b;
	--muted: #6b6f76;
	--link: #b8693a;
	--rule: #7d2f3b; /* bruised maroon: the divider lines in every section */
}

/* Links in the white/grey sections use the accent instead of the template's green */

	.main.style3 a:not(.pill) {
		color: var(--link);
	}

		.main.style3 a:not(.pill):hover {
			color: var(--accent-strong);
		}

/* Section backgrounds: swap the image files to change them */

	#intro {
		background: url("../../images/eye-art.jpg");
		background-size: cover;
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		align-items: flex-end;
		padding-bottom: 22vh;
		color: var(--ink);
	}

	@media screen and (max-width: 736px) {
		#intro {
			min-height: 100vh;
			background-attachment: scroll;
		}
	}

	/* About: paper-coloured backdrop matching the China rose plate */
	#about {
		background: #fdf9cb;
	}

/* What I Do: photo background with the text on a frosted-glass panel.
   Raise the panel's white (0.64 desktop / 0.76 phone) for more legibility,
   lower it to show more photo. */

	#workexp {
		background: url("../../images/scotland.jpg");
		background-size: cover;
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
	}

		#workexp > .content {
			width: 49em;
			padding: 0.9em 2em 0.6em 2em;
			border-radius: 16px;
			background: rgba(255, 255, 255, 0.76);
			-webkit-backdrop-filter: blur(8px) saturate(120%);
			backdrop-filter: blur(8px) saturate(120%);
			border: 1px solid rgba(255, 255, 255, 0.55);
			box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
		}

		/* On desktop, a pre-blurred copy of the photo lines up exactly behind the
		   panel (both are fixed to the window), so the glass works in every browser */
		body:not(.is-touch) #workexp > .content {
			background:
				linear-gradient(rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.64)),
				url("../../images/scotland-blur.jpg") center center / cover fixed no-repeat;
			-webkit-backdrop-filter: none;
			backdrop-filter: none;
		}

		#workexp .entries h3 {
			border-bottom-color: var(--rule);
		}

		/* What I Do and Publications share one look over their photos:
		   dark text, black bold headings, semi-bold titles, light dates */
		#workexp > .content,
		#pubs > .content {
			color: #33373d;
		}

		#workexp .entries ul.bullets,
		#workexp .dates,
		#pubs .dates {
			color: #44484f;
		}

		#workexp .entries h3,
		#pubs .entries h3 {
			color: #111111;
			font-weight: 900;
		}

		#workexp .role,
		#pubs .entries strong {
			font-weight: 600;
			color: #111111;
		}

		#pubs .entries a:not(.pill) {
			color: #111111;
			text-decoration-color: var(--rule);
		}

			#pubs .entries a:not(.pill):hover {
				color: var(--rule);
			}

		/* no extra space under the last item, so the panel hugs the text */
		#workexp .entries > ul:last-child,
		#workexp .entries > ul:last-child > li:last-child,
		#workexp .entries ul.bullets:last-child,
		#workexp .entries ul.bullets > li:last-child {
			margin-bottom: 0;
		}

		#workexp .content > header {
			margin-bottom: 1em;
		}

	@media screen and (max-width: 736px) {
		#workexp > .content {
			padding: 0.9em 1em 0.6em 1em;
		}
	}

/* Publications + Recent News: one Georgia Tech evening-sky photo behind both,
   pinned bottom-left so the lamp and GT flag sit in the corner of Recent News,
   which is a white card on the right (like About) so the flag stays clear. */

	#sky {
		background: #989e9f url("../../images/georgia-moon-sky.jpg") left bottom / cover no-repeat;
	}

		#sky > .main {
			background: transparent;
		}

	#pubs {
		padding-top: 9em; /* room for the moon above the heading */
	}

	/* a wider card with a tighter date column keeps it within one screen */
	@media screen and (min-width: 1001px) {
		#news > .content {
			width: 48%;
		}

		#news .entries ul.news li {
			gap: 1em;
		}

			#news .entries ul.news .when {
				flex-basis: 6.5em;
			}
	}

	@media screen and (max-width: 736px) {
		/* on phones show the photo at a size where the whole lamp and flag fit,
		   with the sky colour continuing above it, and leave room below the card */
		#sky {
			background-size: 260% auto;
		}

		#news {
			padding-bottom: 15em;
		}
	}

/* CV: Hephaestus drawing, eyes kept in frame to the right of the card */

	#cv {
		background: #e9e9e4 url("../../images/hephaestus-cv.jpg") 72% 47% / cover no-repeat;
	}

		#cv .box.style2 {
			text-align: center;
		}

		#cv .cv-contact {
			line-height: 1.9em;
		}

	@media screen and (max-width: 736px) {
		/* on phones the card spans the width; show the eyes in the strip below it */
		#cv {
			background-size: 240% auto;
			background-position: 85% calc(100% + 190px);
			padding-bottom: 20em;
		}
	}

/* Contact: abstract painting behind a centred white card */

	#contact {
		background: url("../../images/abstract-art.jpg") center center / cover no-repeat;
		padding-top: 10em;
		padding-bottom: 10em;
	}

		#contact > .content {
			width: 34em;
			background: #ffffff;
			padding: 2.5em 2.5em 2em 2.5em;
		}

			#contact > .content > header {
				margin-bottom: 1em;
			}

		#contact .box {
			background: transparent;
			padding: 0;
		}

	@media screen and (max-width: 736px) {
		#contact {
			padding-top: 6em;
			padding-bottom: 6em;
		}

			#contact > .content {
				padding: 2em 1.25em 1.5em 1.25em;
			}

			#contact ul.pills li {
				padding-left: 0.6em;
			}

			#contact a.pill {
				padding: 0.45em 0.9em;
				white-space: nowrap;
			}
	}

/* Footer: maroon bar with white icons and text */

	#footer {
		background: var(--rule);
		color: #ffffff;
	}

		#footer a,
		#footer .icon:before {
			color: #ffffff;
		}

			#footer a:hover,
			#footer a:hover:before {
				color: rgba(255, 255, 255, 0.75);
			}

		#footer ul.menu li {
			border-left-color: rgba(255, 255, 255, 0.35);
		}

/* Regular weight for all text (the template uses light); dates stay light */

	body, input, textarea, select {
		font-weight: 400;
	}

	.dates {
		font-weight: 300;
	}

	/* the template hides line breaks on phones; keep them in lists and the CV contact lines */
	@media screen and (max-width: 736px) {
		.main > .content .entries br,
		.main > .content .cv-contact br {
			display: inline;
		}
	}

/* Header name: maroon, handwritten (Caveat); links back to the top */

	#header h1 a {
		border-bottom: none;
		color: var(--rule);
		font-family: "Caveat", cursive;
		font-weight: 600;
		font-size: 1.75em;
		letter-spacing: 0;
	}

/* Intro quote */

	.quote {
		border-left: none;
		font-style: italic;
		font-size: 1.4em;
		line-height: 1.5em;
		max-width: 30em;
		margin: 0 auto 2em auto;
		padding: 0;
	}

		.quote cite {
			display: block;
			margin-top: 0.75em;
			font-size: 0.7em;
			font-style: normal;
			letter-spacing: 0.08em;
		}

			#intro .quote {
				font-weight: 400;
				color: var(--rule);
			}

			#intro .quote cite {
				color: var(--muted);
			}

			.quote cite:before {
				content: "— ";
			}

/* About: the poem's title line, then the paragraph about it */

	.art-title {
		margin-bottom: 0.5em;
	}

	.art-note {
		font-size: 0.95em;
		padding-bottom: 1.25em;
		border-bottom: 2px solid var(--rule);
	}

/* About: the China rose plate, with the poem pinned under its right branch.
   The poem is positioned in % of the picture, so it stays put at any size.
   Nudge it with left/top on .rose-poem. */

	.rose {
		position: absolute;
		top: calc(50% + 0.5em);
		--rose-width: calc((100vh - 9em) * 0.5647);
		right: calc((60vw - var(--rose-width)) / 2);
		transform: translateY(-50%);
		width: var(--rose-width);
		margin: 0;
		container-type: inline-size;
	}

		.rose img {
			display: block;
			width: 100%;
			height: auto;
			/* soften the plate's edges into the background */
			-webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 60%, transparent 100%);
			mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 60%, transparent 100%);
		}

		.rose-poem {
			position: absolute;
			left: 51%;
			top: 62%;
			margin: 0;
			font-style: italic;
			font-size: 4.1cqw;
			line-height: 1.5;
			color: #3a3024;
			white-space: nowrap;
			text-align: left;
		}

		/* label sits just under the picture, so the poem's % position is unaffected */
		.rose figcaption {
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			margin-top: 0.3em;
			text-align: center;
			white-space: nowrap;
			font-size: 3.6cqw;
			letter-spacing: 0.03em;
			color: #6b5d48;
		}

	@media screen and (max-width: 1280px) {
		.rose {
			right: calc((50vw - var(--rose-width)) / 2);
		}
	}

	@media screen and (max-width: 1000px) {
		#about {
			flex-direction: column;
			align-items: center;
		}

		.rose {
			position: relative;
			top: auto;
			right: auto;
			transform: none;
			width: min(85%, 420px);
			margin: 2em auto 0 auto;
		}

			.rose figcaption {
				position: static;
				white-space: normal;
			}
	}

/* Round profile photo (CV) */

	.circle-img {
		display: block;
		width: 140px;
		height: 140px;
		margin: 0 auto 1.25em auto;
		border-radius: 50%;
		object-fit: cover;
	}

	@media screen and (max-width: 736px) {
		.circle-img {
			width: 100px;
			height: 100px;
		}
	}

/* Left-aligned lists inside the centered white/grey sections */

	.entries {
		max-width: 46em;
		margin: 0 auto;
		text-align: left;
	}

		.entries h3 {
			font-size: 1em;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			color: var(--muted);
			margin: 2em 0 0.8em 0;
			padding-bottom: 0.4em;
			border-bottom: 2px solid var(--rule);
		}

		.entries ul {
			list-style: none;
			padding: 0;
		}

			.entries > ul > li {
				margin: 0 0 1.4em 0;
				line-height: 1.6em;
			}

		.entries ul.interests li {
			margin-bottom: 0.6em;
			padding-left: 1.2em;
			position: relative;
		}

			.entries ul.interests li:before {
				content: "";
				position: absolute;
				left: 0;
				top: 0.6em;
				width: 0.45em;
				height: 0.45em;
				border-radius: 50%;
				background: var(--accent-strong);
			}

		.entries ul.bullets {
			list-style: disc;
			padding-left: 1.4em;
			margin: 0.4em 0 0 0;
			color: var(--muted);
		}

			.entries ul.bullets li {
				margin-bottom: 0.3em;
				padding-left: 0;
			}

		.entries .me {
			text-decoration: underline;
			text-decoration-color: var(--accent-strong);
			text-underline-offset: 3px;
		}

	.dates {
		color: var(--muted);
		font-size: 0.9em;
		margin-left: 0.4em;
	}

/* Recent News: date column + text */

	.entries ul.news li {
		display: flex;
		gap: 1.5em;
		margin: 0 0 1em 0;
		line-height: 1.6em;
	}

		.entries ul.news .when {
			flex: 0 0 7.5em;
			font-weight: 900;
			color: var(--muted);
		}

	@media screen and (max-width: 736px) {
		.entries ul.news li {
			flex-direction: column;
			gap: 0;
		}

			.entries ul.news .when {
				flex-basis: auto;
			}
	}

/* Pill buttons, in the spirit of ellaneumann.com */

	ul.pills {
		margin-top: 1em;
	}

	a.pill {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		background: var(--pill);
		color: #ffffff;
		border: none;
		border-radius: 9999px;
		padding: 0.45em 1.3em;
		font-weight: 900;
		text-decoration: none;
		transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.2s ease;
	}

		a.pill:hover {
			background: var(--pill-hover);
			color: #ffffff;
			transform: translateY(-1px);
			box-shadow: 0 4px 10px rgba(87, 68, 52, 0.35);
		}

	/* the template's dark cards (CV) recolour links; keep button text white */
	.main.dark a.pill,
	.main.dark a.pill:hover {
		color: #ffffff;
	}

	.pill-icon {
		width: 1.1em;
		height: 1.1em;
	}

/* Contact */

	#contact .contact-lead {
		font-style: italic;
		font-size: 1.35em;
		line-height: 1.4em;
		margin: 0;
	}

	#contact .email {
		font-size: 1em;
		margin-bottom: 0.75em;
	}

		#contact .email a {
			color: var(--rule);
		}

			#contact .email a:hover {
				color: var(--pill);
			}