:root {  /* essentially equivalent to html selector
	it's defining variables at the global level . (--)*/
	--bg: #ffffff;
	--text: #1a1a1a;
	--muted: #5a5a5a;
	--accent: #0b5fff;
	--border: #e6e6e6;
	--maxw: 1100px;
	--radius: 12px;
	--focus: 2px solid #0b5fff;
/* Native: 407×614 — display at 1/3 (~136×205) */
	--img-w: calc(407px / 3);
	}

    /* html and body height is set to 100% of the parent, which in this case is the screen */
html, body { /*html and body */
	height: 100%; 
	}
	
body {
	margin: 0;
	font-family: Helvetica, sans-serif, system-ui, -apple-system;
	background: var(--bg);
	color: var(--text);
	line-height: 1.6;
	text-rendering: optimizeLegibility; /* when drawing text the browser needs to decide whether
to optimize for legibility and geometric precision */
	}
a { 
	color: var(--text); 
	text-decoration: none; 
	}
		
a:hover {
	text-decoration: underline; 
	}

		/*Defining a class that is a box, a container it is basically the biggest box in body
		the one that contains everything else*/			
.container {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 24px 20px 64px;
	}

header {
	padding: 24px 0 12px;
/* Remove the next line if you want absolutely no line under the header */
	border-bottom: 1px solid red;
	margin-bottom: 24px;
    }
	
header h1 { /*h1 in header */
	margin: 0;
	font-size: clamp(1.8rem, 2.8vw, 2.4rem);
	letter-spacing: 0.2px;
    }
header p {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 1rem;
    }

    /* Intro: force two columns (image left, text right) */
.intro {
	display: grid;
	grid-template-columns: var(--img-w) 1fr;  /* left col matches scaled image width */
	gap: 20px;
	align-items: start;
	background: #fff;       /* white background */
	border-radius: var(--radius);
	padding: 18px;
      /* no border, no shadow */
    }
	
.profile-pic {
	width: var(--img-w);         /* ~136px */
	aspect-ratio: 407 / 614;     /* preserve ratio and reserve space */
	height: auto;
	border-radius: 10px;
	background: transparent;
	object-fit: cover;           /* harmless since height isn’t forced */
    }

.intro h2 {
	margin: 0 0 8px;
	font-size: 1.25rem;
    }
	


/* Two columns for Publications & Working Papers */
.columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-top: 24px;
	}
.card {
	background: #fff;       /* white background */
	border-radius: var(--radius);
	padding: 16px 16px 10px 16px;
/* no border, no shadow */
    }
.card h3 {    /*all h3 that are inside .card*/
	margin: 0 0 8px;
	font-size: 1.15rem;
	}
    
.card ul {
	margin: 0;
	padding-left: 18px;
	}
    
.card li + li {
	margin-top: 10px; 
	}
	

    /* Responsive: stack on small phones */
@media (max-width: 480px) {
	.intro { 
		grid-template-columns: 1fr; 
		}  /* image above text */
	.profile-pic { 
		width: min(100%, 240px); 
		}
	.columns { 
		grid-template-columns: 1fr; 
		}
    }

    /* Print */
@media print {
	a { 
		color: black; 
		text-decoration: none; 
		}
	header { 
		border-bottom: none; 
		}
	}