/* ==========================================================================
   Amal Alabdulkarim — personal site
   Hand-rolled, dependency-free. Light/dark via prefers-color-scheme.
   ========================================================================== */

:root {
	/* Palette: coral #F97683 - cream #F8F6D7 - olive #59482A
	   - pale cream #F9F9D1 - periwinkle #A4BBE9.
	   Coral and periwinkle are too light to carry text on cream (2.45:1 and
	   1.79:1), so they stay decorative; text roles use olive and a deepened
	   coral. Ratios below are against --bg. */
	--bg:          #F9F9D1;
	--surface:     #FCFCEA;
	--text:        #59482A;   /* 8.18:1 */
	--muted:       #6D5F3F;   /* 5.81:1 */
	--faint:       #766949;   /* 5.02:1 */
	--border:      #D6D2AC;
	--accent:      #F97683;   /* decorative fills only */
	--accent-text: #A8434F;   /* 5.45:1 - links, active nav, focus ring */
	--accent-soft: rgba(249, 118, 131, 0.20);
	--pill-bg:     #E1E8D8;   /* periwinkle wash */
	--pill-text:   #59482A;   /* 7.02:1 on --pill-bg */
	--on-accent:   #FFFFFF;   /* 5.86:1 on --accent-text */
	--shadow:      0 1px 2px rgba(89,72,42,.06), 0 8px 24px rgba(89,72,42,.08);

	--serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
	--sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
	         "Helvetica Neue", Arial, sans-serif;
	--mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

	--rail: 300px;
	--maxw: 46rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Same hues, inverted: olive becomes the ground, cream the text.
		   Coral and periwinkle finally have room to work as text here. */
		--bg:          #19140C;
		--surface:     #221B10;
		--text:        #F9F9D1;   /* 17.00:1 */
		--muted:       #AEAD8F;   /*  8.00:1 */
		--faint:       #8C8A71;   /*  5.22:1 */
		--border:      #464233;
		--accent:      #F97683;
		--accent-text: #F97683;   /*  6.93:1 */
		--accent-soft: rgba(249, 118, 131, 0.16);
		--pill-bg:     rgba(164, 187, 233, 0.14);
		--pill-text:   #A4BBE9;   /*  7.30:1 on --pill-bg */
		--on-accent:   #2A1116;   /*  8.24:1 on --accent-text */
		--shadow:      0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
	}
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
	-webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	/* long unbreakable words (a surname, a URL) must not force a sideways
	   scroll when text is scaled up -- WCAG 1.4.4 / 1.4.10 */
	overflow-wrap: break-word;
	font-size: 16.5px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 2px solid var(--accent-text);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip {
	position: absolute; left: -9999px;
	background: var(--accent-text); color: var(--on-accent);
	padding: .6rem 1rem; border-radius: 0 0 6px 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Layout ---------------------------------------------------- */

.shell {
	max-width: calc(var(--rail) + var(--maxw) + 8rem);
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 60rem) {
	.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: 4rem; }
}

/* ---------- Sidebar --------------------------------------------------- */

.rail { padding: 3rem 0 1rem; }

@media (min-width: 60rem) {
	.rail {
		position: sticky; top: 0;
		height: 100vh;
		padding: 4.5rem 0 2rem;
		display: flex; flex-direction: column;
		overflow-y: auto;
	}
}

.monogram {
	width: 62px; height: 62px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent-text);
	border: 1px solid var(--border);
	font-family: var(--serif);
	font-size: 1.4rem; letter-spacing: .04em;
	margin-bottom: 1.25rem;
}

.rail h1 {
	font-family: var(--serif);
	font-size: 1.65rem;
	line-height: 1.2;
	font-weight: 600;
	margin: 0 0 .5rem;
	letter-spacing: -0.01em;
}
.rail h1 a { color: inherit; text-decoration: none; }

.role {
	margin: 0 0 .35rem;
	color: var(--muted);
	font-size: .95rem;
	line-height: 1.5;
}
.role strong { color: var(--text); font-weight: 600; }

/* nav */
.rail nav { margin: 1.75rem 0; }
.rail nav ul { list-style: none; margin: 0; padding: 0; }
.rail nav li { margin: 0; }

.rail nav a {
	display: block;
	padding: .3rem 0 .3rem .85rem;
	border-left: 2px solid var(--border);
	color: var(--muted);
	text-decoration: none;
	font-size: .92rem;
	transition: color .15s ease, border-color .15s ease;
}
.rail nav a:hover { color: var(--text); border-left-color: var(--faint); }
.rail nav a.active {
	color: var(--accent-text);
	border-left-color: var(--accent);
	font-weight: 550;
}

/* social icons */
.socials {
	list-style: none; margin: auto 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: .4rem;
}
.socials a {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: var(--muted);
	transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.socials a:hover {
	color: var(--accent-text);
	border-color: var(--accent);
	background: var(--accent-soft);
}
.socials svg { width: 17px; height: 17px; fill: currentColor; display: block; }

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

main { padding: 1rem 0 0; max-width: var(--maxw); }
@media (min-width: 60rem) { main { padding: 4.5rem 0 0; } }

section { margin-bottom: 3.75rem; scroll-margin-top: 1.5rem; }

section > h2 {
	font-family: var(--serif);
	font-size: .82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--faint);
	margin: 0 0 1.4rem;
	padding-bottom: .6rem;
	border-bottom: 1px solid var(--border);
}

.lede {
	font-family: var(--serif);
	font-size: 1.22rem;
	line-height: 1.55;
	margin: 0 0 1.1rem;
}

p { margin: 0 0 1.05rem; }
p:last-child { margin-bottom: 0; }

/* keyword pills */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 1.4rem 0 0; }
.tags li {
	font-size: .8rem;
	padding: .28rem .7rem;
	border-radius: 100px;
	background: var(--pill-bg);
	color: var(--pill-text);
	border: 1px solid transparent;
}

/* generic entry blocks (research) */
.entry { margin-bottom: 1.75rem; }
.entry:last-child { margin-bottom: 0; }

.entry h3 {
	font-size: 1.02rem;
	font-weight: 600;
	margin: 0 0 .2rem;
	line-height: 1.4;
}

.entry p { font-size: .95rem; color: var(--muted); margin: 0; }

/* ---------- Publications --------------------------------------------- */

.pubyear {
	display: flex; align-items: center; gap: .8rem;
	font-family: var(--mono);
	font-size: .8rem;
	color: var(--faint);
	letter-spacing: .05em;
	margin: 1.9rem 0 .9rem;
}
.pubyear::after {
	content: ""; flex: 1; height: 1px; background: var(--border);
}
.pubyear:first-of-type { margin-top: 0; }

.pubs { list-style: none; margin: 0; padding: 0; }

.pubs li {
	margin-bottom: 1.05rem;
	padding-left: 1rem;
	border-left: 2px solid var(--border);
	font-size: .94rem;
	line-height: 1.6;
	transition: border-color .15s ease;
}
.pubs li:hover { border-left-color: var(--accent); }
.pubs li:last-child { margin-bottom: 0; }

.pubs .title { color: var(--text); font-weight: 550; }
.pubs .authors { color: var(--muted); }
.pubs .me { color: var(--text); font-weight: 650; }
.pubs .venue { color: var(--faint); font-style: italic; }

/* ---------- Contact --------------------------------------------------- */

.contact-card {
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: var(--shadow);
}
.contact-card p { font-size: .95rem; color: var(--muted); }
.contact-card .email {
	font-family: var(--mono);
	font-size: 1rem;
	word-break: break-all;
}

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

footer.site {
	border-top: 1px solid var(--border);
	margin-top: 1rem;
	padding: 1.5rem 0 3rem;
	font-size: .82rem;
	color: var(--faint);
	display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
}
footer.site p { margin: 0; }