/* ==========================================================================
   aimanelasad.com — main stylesheet
   Visual language modelled on the "Dimension" layout (HTML5 UP), rewritten
   from scratch in plain CSS: no jQuery, no build step.
   ========================================================================== */

/* ---------- Web font (self-hosted, SIL OFL 1.1 – see assets/fonts/OFL.txt) ----- */

@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/SourceSans3-Roman-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/SourceSans3-Roman-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/SourceSans3-Italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Source Sans 3";
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/SourceSans3-Italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--bg: #1b1f22;
	--fg: #ffffff;
	--fg-dim: rgba(255, 255, 255, 0.75);
	--fg-faint: rgba(255, 255, 255, 0.5);
	--line: #ffffff;
	--line-soft: rgba(255, 255, 255, 0.25);
	--panel: rgba(27, 31, 34, 0.85);
	--accent: #9ad6ff;
	--font: "Source Sans 3", "Source Sans Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
	--dur: 325ms;
	--ease: ease-in-out;
}

/* ---------- Reset ------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

html, body { height: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

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

b, strong { font-weight: 600; }
i, em { font-style: italic; }

a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted var(--fg-faint);
	transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

a:hover, a:focus-visible { color: var(--accent); border-bottom-color: transparent; }

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

p { margin: 0 0 2rem; }

ul, ol { margin: 0 0 2rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

h1, h2, h3 {
	margin: 0;
	color: var(--fg);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

h3 { font-size: 1rem; margin: 2.5rem 0 0.75rem; }
.card h3 { font-size: 0.9rem; letter-spacing: 0.1rem; margin: 0 0 0.5rem; }

/* ---------- Background -------------------------------------------------- */

#bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: var(--bg);
	background-image:
		radial-gradient(ellipse 70% 60% at 18% 20%, rgba(72, 108, 142, 0.55), transparent 70%),
		radial-gradient(ellipse 60% 70% at 85% 80%, rgba(45, 86, 96, 0.55), transparent 70%),
		radial-gradient(ellipse 40% 40% at 60% 35%, rgba(120, 96, 140, 0.25), transparent 70%),
		linear-gradient(160deg, #151a1f 0%, #1b1f22 50%, #12161a 100%);
	transform: scale(1.04);
	transition: transform 2.5s var(--ease);
}

/* subtle film grain so the gradients don't band */
#bg::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.12;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
	background-size: 200px 200px;
}

body:not(.is-preload) #bg { transform: scale(1); }

/* ---------- Wrapper ----------------------------------------------------- */

#wrapper {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	min-height: 100vh;
	padding: 3rem 2rem;
}

#wrapper::before { content: ""; }   /* top spacer for space-between */

/* ---------- Header (landing) ------------------------------------------- */

#header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 100%;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* --- orbit: photo at the bottom-centre, nav links on a semicircle above it --- */

:root {
	--logo: 10rem;      /* photo diameter */
	--orbit-r: 13rem;   /* radius of the nav arc, measured from the photo centre */
}

#header .orbit {
	position: relative;
	width: calc(2 * var(--orbit-r) + 12rem);      /* arc diameter + room for the outer pills */
	height: calc(var(--orbit-r) + var(--logo) / 2 + 1.5rem);
	max-width: 100%;
}

/* faint arc line (upper half of a circle around the photo centre) */
#header .orbit::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(var(--logo) / 2);
	width: calc(2 * var(--orbit-r));
	height: calc(2 * var(--orbit-r));
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transform: translate(-50%, 50%);
	clip-path: inset(0 0 50% 0);
	pointer-events: none;
}

#header .logo {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: var(--logo);
	height: var(--logo);
	border: 1px solid var(--line);
	border-radius: 50%;
	overflow: hidden;
	background: var(--bg);
	transition: opacity 1.25s var(--ease) 0.25s, transform 1.25s var(--ease) 0.25s;
}

#header .logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

#header nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* each item: start at the photo centre, rotate by --a, push out by the radius, rotate back upright */
#header nav li {
	position: absolute;
	left: 50%;
	bottom: calc(var(--logo) / 2);
	margin: 0;
	transform: translate(-50%, 50%) rotate(var(--a)) translateX(var(--orbit-r)) rotate(calc(-1 * var(--a)));
	transition: opacity 0.75s var(--ease) 0.5s, transform 0.75s var(--ease) 0.5s;
}

#header nav a {
	display: block;
	padding: 0 1.25rem 0 1.45rem;
	line-height: 2.5rem;
	font-size: 0.8rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--fg);
	border: 1px solid var(--line);
	border-radius: 2rem;
	background: rgba(27, 31, 34, 0.7);
	transition: background-color var(--dur) var(--ease);
}

#header nav a:hover, #header nav a:focus-visible { background: rgba(255, 255, 255, 0.15); color: var(--fg); }
#header nav a:active { background: rgba(255, 255, 255, 0.25); }

/* name + tagline below the orbit */
#header .content {
	margin-top: 2.5rem;
	max-width: 100%;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	transition: max-height 0.75s var(--ease), opacity 0.75s var(--ease), transform 0.75s var(--ease);
}

#header .content .inner {
	padding: 2.5rem 2rem;
	max-width: 100%;
	transition: opacity 0.75s var(--ease) 0.25s, transform 0.75s var(--ease) 0.25s;
}

#header h1 {
	font-size: 2.25rem;
	letter-spacing: 0.5rem;
	margin: 0 0 1rem;
}

#header .content p {
	margin: 0;
	font-size: 0.8rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
}

/* entrance animation (only when JavaScript is available – see <script> in <head>) */
html.js body.is-preload #header .logo { opacity: 0; transform: translateX(-50%) scale(0.6); }
html.js body.is-preload #header .content { opacity: 0; transform: translateY(-0.25rem); }
html.js body.is-preload #header .content .inner { opacity: 0; transform: translateY(0.5rem); }
html.js body.is-preload #header nav li { opacity: 0; transform: translate(-50%, 50%) rotate(var(--a)) translateX(calc(var(--orbit-r) - 1rem)) rotate(calc(-1 * var(--a))); }
html.js body.is-preload #footer { opacity: 0; }

/* no JavaScript: show every section stacked below the header instead of the overlay */
html:not(.js) #main[hidden],
html:not(.js) #main article[hidden] { display: block !important; }
html:not(.js) #main { margin-top: 3rem; }
html:not(.js) #main article { opacity: 1; transform: none; margin: 0 auto 2rem; }

/* header fades out when an article is open */
body.is-article-visible #header { opacity: 0; transform: scale(0.95); pointer-events: none; }

/* ---------- Main / articles -------------------------------------------- */

#main {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	max-width: 100%;
	flex: 1 1 auto;
	justify-content: center;
	/* click on the dim area outside the panel closes it (see main.js) */
}

#main article {
	position: relative;
	width: 40rem;
	max-width: 100%;
	padding: 4.5rem 2.5rem 1.5rem;
	background: var(--panel);
	border-radius: 4px;
	opacity: 0;
	transform: translateY(0.25rem);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

#main article.active { opacity: 1; transform: translateY(0); }

#main article h2.major {
	display: inline-block;
	max-width: 100%;
	font-size: 1.5rem;
	letter-spacing: 0.5rem;
	padding-bottom: 0.5rem;
	margin: 0 0 2rem;
	border-bottom: 1px solid var(--line);
}

/* close button (the X) */
#main article .close {
	position: absolute;
	top: 0;
	right: 0;
	width: 4rem;
	height: 4rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	text-indent: -9999px;
	overflow: hidden;
}

#main article .close::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5rem;
	height: 1.5rem;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.075);
	transition: background-color var(--dur) var(--ease);
}

#main article .close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.5rem;
	height: 1.5rem;
	transform: translate(-50%, -50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 6l8 8M14 6l-8 8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.25rem;
}

#main article .close:hover::before { background-color: rgba(255, 255, 255, 0.2); }
#main article .close:active::before { background-color: rgba(255, 255, 255, 0.35); }

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

/* quotation */
blockquote {
	margin: 0 0 2rem;
	padding: 0.25rem 0 0.25rem 1.25rem;
	border-left: 2px solid var(--line-soft);
	font-style: italic;
}
blockquote p { margin: 0 0 0.5rem; font-size: 1.05rem; }
blockquote footer { font-style: normal; font-size: 0.85rem; color: var(--fg-dim); }
blockquote cite { font-style: italic; }

/* photo gallery: 2 columns, 1 column on phones */
.gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin: 0 0 2rem;
}
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: auto; border-radius: 4px; display: block; }
figcaption { font-size: 0.8rem; color: var(--fg-dim); margin-top: 0.4rem; line-height: 1.45; }
.image.main figcaption { padding: 0 0.25rem; }
cite { font-style: italic; }

/* full-width image inside an article (e.g. About me) */
.image.main {
	display: block;
	margin: 0 0 2rem;
	border-radius: 4px;
	overflow: hidden;
}
.image.main img { width: 100%; height: auto; display: block; }

/* CV timeline: one entry per list item */
.timeline {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.timeline li { margin: 0 0 1.25rem; }
.timeline li strong { display: block; }
.timeline li .where { display: block; color: var(--fg-dim); font-style: italic; margin-bottom: 0.25rem; }

/* skills: label + text */
.skills {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	column-gap: 1.25rem;
	row-gap: 0.75rem;
	margin: 0 0 1.5rem;
}

.skills dt { font-weight: 600; font-size: 0.85rem; letter-spacing: 0.05rem; text-transform: uppercase; padding-top: 0.1rem; }
.skills dd { margin: 0; }

/* publications */
#publications { counter-reset: pub; }   /* numbering continues across both lists */
ol.pubs { list-style: none; padding: 0; margin: 0 0 1.5rem; }

ol.pubs li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 1.25rem;
	counter-increment: pub;
}

ol.pubs li::before {
	content: "[" counter(pub) "]";
	position: absolute;
	left: 0;
	top: 0.05rem;
	font-size: 0.8rem;
	color: var(--fg-dim);
}

ol.pubs li > a, ol.pubs li { font-weight: 400; }
ol.pubs .authors, ol.pubs .venue { display: block; font-weight: 300; }
ol.pubs .authors { color: var(--fg-dim); }
ol.pubs .venue { color: var(--fg-dim); font-style: italic; font-size: 0.9rem; }

/* project cards */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem;
	margin: 0 0 1.5rem;
}

.card {
	border: 1px solid var(--line-soft);
	border-radius: 4px;
	padding: 1.25rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.card:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.03); }
.card p { margin: 0 0 1rem; font-size: 0.95rem; flex: 1 1 auto; }
.card a { align-self: flex-start; font-size: 0.8rem; letter-spacing: 0.1rem; text-transform: uppercase; }

/* contact */
ul.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }

ul.contact-list li {
	display: grid;
	grid-template-columns: 9.5rem 1fr;
	column-gap: 1.25rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--line-soft);
	margin: 0;
}

ul.contact-list li:last-child { border-bottom: 1px solid var(--line-soft); }
ul.contact-list .label { font-size: 0.8rem; letter-spacing: 0.1rem; text-transform: uppercase; color: var(--fg-dim); align-self: center; }
ul.contact-list a { word-break: break-all; justify-self: start; }

/* visually hidden, but read by screen readers */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* legal notice */
#legal .address { line-height: 1.8; }

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

#footer {
	margin-top: 2rem;
	max-width: 100%;
	text-align: center;
	transition: opacity 0.75s var(--ease) 0.75s;
}

#footer p {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.2rem;
	text-transform: uppercase;
	opacity: 0.75;
}

#footer a { border-bottom-color: transparent; }
#footer a:hover, #footer a:focus-visible { border-bottom-color: var(--accent); }

body.is-article-visible #footer { opacity: 0; pointer-events: none; transition-delay: 0s; transition-duration: var(--dur); }

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

@media (max-width: 736px) {
	body { font-size: 15px; }
	#wrapper { padding: 2rem 1rem; }
	#header .content .inner { padding: 2.5rem 1rem; }
	#header h1 { font-size: 1.75rem; letter-spacing: 0.35rem; }
	/* no room for the arc: photo on top, stacked nav below, then name */
	:root { --logo: 8rem; }
	#header .orbit { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; }
	#header .orbit::before { display: none; }
	#header .logo { position: static; transform: none; }
	html.js body.is-preload #header .logo { transform: scale(0.6); }
	#header nav { width: 100%; max-width: 22rem; margin-top: 2rem; }
	#header nav ul { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
	#header nav li { position: static; transform: none !important; border-top: 1px solid var(--line); }
	#header nav li:first-child { border-top: 0; }
	#header nav a { border: 0; border-radius: 0; background: transparent; text-align: center; }
	#header .content { margin-top: 2.5rem; }
	#main article { padding: 3.5rem 1.5rem 0.5rem; }
	#main article h2.major { font-size: 1.25rem; letter-spacing: 0.35rem; }
	.skills, ul.contact-list li { grid-template-columns: 1fr; row-gap: 0.25rem; }
	.gallery { grid-template-columns: 1fr; }
}


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

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

/* ---------- Print ------------------------------------------------------- */

@media print {
	#bg, #header nav, #header .orbit::before, .close { display: none !important; }
	#header .logo { position: static; transform: none; }
	body { background: #fff; color: #000; }
	#main, #main article { display: block !important; opacity: 1 !important; transform: none !important; background: none; width: auto; padding: 0; }
	#header, #footer { display: flex !important; opacity: 1 !important; transform: none !important; }
	#footer { display: block !important; }
	#main article { page-break-before: always; }
	a { border-bottom: 0; }
}