/* shrrynsh.github.io
   Design modelled on fredhohman.com (layout, colours, type and components),
   reimplemented from measured values. Greys and the link blue are darkened
   slightly so text meets WCAG AA contrast. */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

html, body { margin: 0; padding: 0; }
html {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 15px;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}
@media (max-width: 768px) {
	html { font-size: 14px; }
}
:root { --bg: #f6f7f9; } /* cool off-white: softer than pure white, suits the black and blue */
body {
	background: var(--bg);
	color: #414141;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: #2b6cc4; text-decoration: none; }
a:hover, a:focus { color: #00449e; text-decoration: underline; text-decoration-color: #aaaaaa; }
:where(a):focus-visible { outline: 2px solid #2b6cc4; outline-offset: 3px; border-radius: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 0.5rem; z-index: 10; padding: 0.5rem 0.75rem; background: var(--bg); }

/* Font Awesome icons, inlined as SVG: one em tall, natural width. */
.fa-icon { display: inline-block; width: auto; height: 1em; vertical-align: -0.125em; }

/* ── Page grid: a centred text column inside a wider page column ── */
.page {
	--track: 56px;
	display: grid;
	grid-template-columns:
		[screen-start] 1fr
		[page-start kicker-start] minmax(0, var(--track))
		[middle-start] minmax(0, var(--track))
		[text-start kicker-end] repeat(8, minmax(0, var(--track)))
		[text-end gutter-start] minmax(0, var(--track))
		[middle-end] minmax(0, var(--track))
		[page-end gutter-end] 1fr [screen-end];
	column-gap: 1.5rem;
}
.page > * { grid-column: text; }
.page > .l-text { grid-column: text; }
.page > .l-middle { grid-column: middle; }
.page > .l-page { grid-column: page; }

@media (max-width: 768px) {
	.page {
		grid-template-columns:
			[screen-start] 0.5rem
			[page-start kicker-start middle-start text-start gutter-start] repeat(8, minmax(0, 1fr))
			[text-end middle-end page-end kicker-end gutter-end] 0.5rem [screen-end];
		column-gap: 0.5rem;
	}
}

/* ── Top bar on inner pages (as on fredhohman.com) ── */
#masthead {
	padding: 0.5rem 0;
	border-bottom: 1px solid #dddddd;
}
.masthead-inner {
	grid-column: text;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 0.5rem;
}
#masthead h1 {
	margin: 0;
	font-size: 1.25rem;
	white-space: nowrap;
}
#masthead h1 > a { color: #414141; }
#masthead h1 > a:hover { color: #414141; text-decoration: none; }
#masthead nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	font-size: 0.9rem;
}
#masthead nav > a {
	margin: 0.15rem;
	padding: 0.5rem 0.48rem;
	border-radius: 5rem;
	background: rgba(0, 0, 0, 0.025);
	color: #414141;
	font-weight: 500;
	text-align: center;
	white-space: nowrap;
	transition: all 0.2s ease-in-out;
}
#masthead nav > a .fa-icon { margin-right: 0.5rem; }
#masthead nav > a:hover, #masthead nav > a:focus {
	background: rgba(0, 0, 0, 0.05);
	color: #414141;
	text-decoration: none;
	transform: scale(1.03);
}
.inner-page { margin-top: 2.5rem; }

/* ── Introduction ── */
#intro {
	margin-top: 3rem;
	font-size: 1.2em;
}
#intro-title-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
/* Portrait card to the right of the name block. */
#intro-image {
	flex: 0 0 auto;
	width: 10.5rem;
	height: 11.25rem;
	margin-right: 2rem;
	border-radius: 0.5rem;
	object-fit: cover;
	box-shadow: 0 4px 18px rgba(17, 24, 39, 0.18), 0 0 0 1px rgba(17, 24, 39, 0.06);
}
#intro-title-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-right: 1.5rem;
}
#intro-title {
	margin: 0;
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1.25;
	color: #111111;
}
#intro-subtitle {
	font-size: 1.57rem;
	line-height: 1.3;
	color: #767676;
	text-wrap: balance;
}

.socials {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.25rem;
}
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 2.5rem;
	background: rgba(0, 0, 0, 0.025);
	color: #414141;
	font-size: 1.2rem;
	transition: all 0.2s ease-in-out;
}
.social-link:hover, .social-link:focus {
	background: rgba(0, 0, 0, 0.05);
	text-decoration: none;
}
.social-link--email, .social-link--scholar { color: #515151; }
.social-link--twitter { color: #000000; }
.social-link--github { color: #6e5494; }
.social-link--linkedin { color: #0077b5; }
.social-link--orcid { color: #a6ce39; }

#quick-links {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}
#quick-links a {
	flex: 1 1 auto;
	margin: 0.25rem;
	padding: 0.75rem 0.9rem;
	white-space: nowrap;
	border-radius: 5rem;
	background: rgba(0, 0, 0, 0.025);
	color: #414141;
	font-size: 1rem;
	font-weight: 500;
	text-align: center;
	transition: all 0.2s ease-in-out;
}
#quick-links a .fa-icon { margin-right: 0.5rem; }
#quick-links a:hover, #quick-links a:focus {
	background: rgba(0, 0, 0, 0.05);
	color: #414141;
	text-decoration: none;
	transform: scale(1.03);
}

.intro-text p + p { margin-top: 1rem; }
.intro-text b { color: #333333; }
/* Faint underline so links in running text don't rely on colour alone. */
.intro-text a, .cv-list p a {
	text-decoration: underline;
	text-decoration-color: #c9d8ef;
	text-underline-offset: 0.15em;
}
.intro-text a:hover, .cv-list p a:hover { text-decoration-color: currentColor; }

.home-hr {
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid #dddddd;
}

/* ── Feature sections ── */
.feature + .feature { margin-top: 3rem; }
.page > .feature.l-page {
	display: grid;
	grid-template-columns: subgrid;
}
.feature.l-page > * { grid-column: text; }
.feature.l-page > .cover-wrapper, .feature.l-page > .project-grid,
.feature.l-page > .film-grid, .feature.l-page > .quote-grid,
.feature.l-page > .film-credit { grid-column: page; }
/* Section heading with a "More …" text link on the right, aligned to the card grid's edge. */
.feature.l-page > .feature-head { grid-column: text-start / page-end; }
.feature-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	column-gap: 1rem;
}
/* Same type as the section descriptions; blue on hover like other links. */
.feature-more {
	margin-left: auto;
	font-size: 1.2rem;
	font-weight: 400;
	color: #414141;
	white-space: nowrap;
}
.feature-more:hover, .feature-more:focus { color: #2b6cc4; text-decoration: none; }
.feature-more span { display: inline-block; transition: transform 0.2s ease-in-out; }
.feature-more:hover span, .feature-more:focus span { transform: translateX(3px); }
.feature-title {
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.25;
	color: #111111;
}
.feature-title a, .feature-title .accent { color: #2b6cc4; font-weight: 600; }
.feature-title a:hover { color: #00449e; }
/* A heading that is one linked word: black, blue on hover. */
.feature-title a.title-link { color: #111111; }
.feature-title a.title-link:hover, .feature-title a.title-link:focus { color: #2b6cc4; text-decoration: none; }
.feature-text {
	margin: 0.75rem 0;
	padding-bottom: 1rem;
	font-size: 1.2rem;
}

/* ── Publication cards ── */
.cover-wrapper {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.cover {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 405px;
	border-radius: 1.5rem;
	background: rgba(0, 0, 0, 0.025);
	transition: all 0.2s ease-in-out;
}
.cover:hover { background: rgba(0, 0, 0, 0.05); transform: scale(1.03); }
.cover-image { width: 100%; padding: 0.5rem; }
.cover-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: contain;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 1rem;
	background: #ffffff;
}
.cover-inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
	padding: 0.5rem 1rem 1rem;
}
.cover-title {
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	color: #313131;
	text-transform: capitalize;
}
.cover-title a { color: #313131; }
.cover-subtitle {
	padding: 0.35rem 0;
	font-size: 0.875rem;
	line-height: 1.1rem;
	color: rgba(0, 0, 0, 0.6);
}
.cover-authors {
	padding-bottom: 0.35rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(0, 0, 0, 0.6);
}
.cover-authors b { color: #333333; }
.cover-venue {
	padding-bottom: 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.6);
}
.cover-venue a { color: inherit; }
.cover-links { font-size: 0.75rem; }

.pub-misc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	font-size: 0.7rem;
}
.pub-misc a {
	padding: 0.25rem 0.55rem;
	border-radius: 1rem;
	background: #ffffff;
	color: #666666;
	white-space: nowrap;
}
.pub-misc a .fa-icon { margin-right: 0.2rem; }
.pub-misc a:hover, .pub-misc a:focus {
	background: #2b6cc4;
	color: #ffffff;
	text-decoration: none;
}

/* ── Project cards ── */
.project-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.project {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 14rem;
	padding: 0.75rem;
	border-radius: 1rem;
	background: rgba(0, 0, 0, 0.025);
	transition: all 0.2s ease-in-out;
}
.project:hover { background: rgba(0, 0, 0, 0.05); transform: scale(1.03); }
.project-title {
	padding: 0 0.25rem;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.3;
	color: #313131;
}
.project-title a { color: #313131; }
.project-subtitle {
	padding: 0.25rem;
	font-size: 0.875rem;
	color: rgba(0, 0, 0, 0.6);
}
.project-venue {
	padding: 0 0.25rem 0.35rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.6);
}
.project .pub-misc { padding: 0 0.25rem; }
.cv-award {
	padding: 0 0.25rem 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #a04a08;
}

/* ── Blogs: reading list (reuses the publication-card text styles and pill buttons) ── */
.reading-topic {
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2b6cc4;
}
/* Topic label with a "More papers" link on the right (same link style as "More projects"). */
.topic-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1rem;
}
.topic-head .feature-more { font-size: 1rem; }
.reading-topic--next { margin-top: 2.25rem; }
.reading-item { padding: 1.25rem 0; }
.reading-item + .reading-item { border-top: 1px solid #e3e5e9; }
.reading-title { margin: 0 0 0.3rem; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.reading-item:first-child { padding-top: 0.6rem; }
.reading-item .cover-authors { padding-bottom: 0.1rem; font-size: 0.8rem; }
.reading-title a { color: #313131; }
.reading-title a:hover { color: #2b6cc4; }
.reading-item .cover-venue { padding: 0.15rem 0 0; }
.reading-note { margin-top: 0.35rem; font-size: 0.875rem; color: #555555; }
.reading-notes { margin: 0.75rem 0; }
.reading-notes > div { display: flex; gap: 0.75rem; margin-top: 0.3rem; font-size: 0.95rem; }
.reading-notes dt { flex: 0 0 9rem; font-weight: 600; color: #313131; }
.reading-notes dd { margin: 0; color: #666666; font-style: italic; }
.reading-item .pub-misc a { background: rgba(0, 0, 0, 0.04); }
/* Same blue hover as the publication and project buttons. */
.reading-item .pub-misc a:hover, .reading-item .pub-misc a:focus { background: #2b6cc4; color: #ffffff; }

/* ── Know Me: subsections listed inside one panel ── */
.know-panel {
	margin-top: 0.25rem;
	padding: 0.25rem 1.5rem;
	border-radius: 1.5rem;
	background: rgba(0, 0, 0, 0.025);
}
.know-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 0;
	color: #414141;
}
.know-row + .know-row { border-top: 1px solid #e3e5e9; }
.know-row:hover, .know-row:focus { text-decoration: none; color: #414141; }
.know-title {
	display: block;
	font-size: 1.4rem;
	font-weight: 600;
	line-height: 1.3;
	color: #111111;
}
.know-title .accent { color: #2b6cc4; }
.know-line { display: block; margin-top: 0.2rem; font-size: 1rem; color: rgba(0, 0, 0, 0.6); }
.know-arrow {
	flex: 0 0 auto;
	font-size: 1.3rem;
	color: #2b6cc4;
	transition: transform 0.2s ease-in-out;
}
.know-row:hover .know-arrow, .know-row:focus .know-arrow { transform: translateX(5px); }
.know-row:hover .know-title { color: #2b6cc4; }
.breadcrumb { margin-bottom: 1rem; font-size: 0.85rem; color: #6b6b6b; }
.breadcrumb a { color: #6b6b6b; }
.breadcrumb a:hover { color: #2b6cc4; }

/* ── Cinema page ── */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.film-rating { color: #855900; letter-spacing: 0.05em; white-space: nowrap; }

.film-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: -0.25rem;
}
.film-stats li {
	padding: 0.4rem 0.9rem;
	border-radius: 5rem;
	background: rgba(0, 0, 0, 0.035);
	font-size: 0.9rem;
	color: #555555;
}
.film-stats b { color: #111111; }

.poster {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 0.6rem;
	background: #e9ebef;
	box-shadow: 0 2px 8px rgba(17, 24, 39, 0.12);
}

/* Poster grid (favourites, recent) */
.film-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 1.25rem 1rem;
}
.film-link { display: block; color: #313131; }
.film-link:hover, .film-link:focus { color: #2b6cc4; text-decoration: none; }
.film-link .poster { transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; }
.film-link:hover .poster, .film-link:focus .poster {
	transform: translateY(-3px) scale(1.02);
	box-shadow: 0 8px 20px rgba(17, 24, 39, 0.18);
}
.film-title {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.25;
}
.film-meta {
	margin-top: 0.2rem;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(0, 0, 0, 0.6);
}
.film-grid--recent { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1rem 0.75rem; }
.film--small .film-meta { margin-top: 0.4rem; text-align: center; }
.film-date { color: #6b6b6b; }

/* Review quotes */
.quote-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}
.quote-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	border-radius: 1.5rem;
	background: rgba(0, 0, 0, 0.025);
}
.quote-card > a { flex: 0 0 auto; }
.poster--mini { width: 4.75rem; border-radius: 0.45rem; }
.quote-card figure { margin: 0; }
.quote-card blockquote {
	margin: 0;
	font-size: 1rem;
	font-style: italic;
	line-height: 1.45;
	color: #313131;
}
.quote-card figcaption { margin-top: 0.5rem; font-size: 0.8rem; color: rgba(0, 0, 0, 0.6); }

/* Themes: an open, numbered list with a row of small posters per theme */
.theme-row {
	display: grid;
	grid-template-columns: 2.5rem minmax(0, 1fr);
	gap: 0.25rem 0.75rem;
	padding: 1.5rem 0;
}
.theme-row + .theme-row { border-top: 1px solid #e3e5e9; }
.theme-row:first-child { padding-top: 0.25rem; }
.theme-num {
	padding-top: 0.2rem;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #2b6cc4;
}
.theme-title { font-size: 1.25rem; font-weight: 600; line-height: 1.3; color: #111111; }
.theme-text { margin-top: 0.2rem; font-size: 1rem; color: #555555; }
.theme-posters { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }
.theme-poster { display: block; flex: 0 0 auto; }
.poster--theme {
	width: 3.9rem;
	border-radius: 0.4rem;
	box-shadow: 0 1px 4px rgba(17, 24, 39, 0.14);
	transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.theme-poster:hover .poster--theme, .theme-poster:focus .poster--theme {
	transform: translateY(-3px);
	box-shadow: 0 6px 14px rgba(17, 24, 39, 0.2);
}

.film-credit { margin-top: 1.5rem; font-size: 0.75rem; color: #6b6b6b; }

@media (max-width: 1100px) {
	.film-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.film-grid--recent { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.quote-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
	.film-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 0.75rem; }
	.film-grid--recent { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem 0.5rem; }
	.theme-row { grid-template-columns: 2rem minmax(0, 1fr); }
	.poster--theme { width: 2.9rem; }
	.theme-posters { gap: 0.45rem; }
}
@media (prefers-reduced-motion: reduce) {
	.film-link:hover .poster, .film-link:focus .poster, .theme-poster:hover .poster--theme { transform: none; }
}

/* ── CV-style lists: dates hang to the left of the text column ── */
.cv-list li {
	position: relative;
	padding: 0.5rem 0;
}
.cv-date {
	position: absolute;
	top: 0.75rem;
	right: 100%;
	width: calc(2 * var(--track) + 1.5rem);
	margin-right: 1.5rem;
	font-size: 0.7rem;
	line-height: 1.4;
	text-align: right;
	color: #6b6b6b;
}
.cv-entry {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.cv-logo {
	flex: 0 0 auto;
	width: 4.5rem;
	height: 2.5rem;
	object-fit: contain;
}
.cv-role { font-weight: 600; color: #333333; }
.cv-org { font-size: 0.875rem; color: #555555; }
.cv-description {
	margin-top: 0.15rem;
	font-size: 0.875rem;
	color: #666666;
}

/* ── Footer ── */
footer.page {
	margin-top: 2em;
	padding: 3rem 0;
	background: #1e1e24;
	color: #e6e6e6;
}
#footer-left { grid-column: text-start / text-end; }
.footer-icon {
	margin-right: 0.75rem;
	color: #e6e6e6;
	font-size: 1.333em;
}
.footer-icon:hover, .footer-icon:focus { color: #ffffff; text-decoration: none; }
.footer-icon:focus-visible { outline-color: #e6e6e6; }
.footer-copy { margin-top: 1.5em; }

/* ── Responsive ── */
@media (max-width: 1100px) {
	.page > .l-text, .page > .l-middle, .feature.l-page > * { grid-column: page; }
	.feature.l-page > .feature-head { grid-column: page; }
	.cv-date {
		position: static;
		display: block;
		width: auto;
		margin: 0 0 0.15rem;
		text-align: left;
	}
	.cv-list li { padding-left: 1rem; border-left: 1px solid #dddddd; }
	.cv-list li + li { margin-top: 0.5rem; }
}

@media (max-width: 768px) {
	#intro-image { width: 6rem; height: 7.5rem; margin-right: 0; }
	#intro-title-text { margin-right: 1rem; }
	#intro-title { font-size: 2rem; }
	#intro-subtitle { font-size: 1.35rem; }
	#quick-links { display: flex; flex-wrap: wrap; }
	#quick-links a { padding: 0.5rem 1.15rem; }
	.cover-wrapper, .project-grid { grid-template-columns: minmax(0, 1fr); }
	.cover { height: auto; }
	.project { min-height: 0; }
	#footer-left { grid-column: page; }
	.feature-more { font-size: 1rem; }
	/* Heading and link differ a lot in size on phones: line up their text baselines. */
	.feature-head { align-items: baseline; }
	.masthead-inner { grid-column: page; }
	#masthead h1 { margin: 0.5rem 0; }
	#masthead nav { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
	.cover:hover, .project:hover, #quick-links a:hover, #masthead nav > a:hover { transform: none; }
}