/* ============================================================
   Editorial / Academic — serif type, paper tones, quiet rules
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&family=Cormorant+Garamond:wght@600&family=EB+Garamond:wght@600&family=Lora:wght@600&family=Libre+Baskerville:wght@700&family=Crimson+Pro:wght@600&family=Merriweather:wght@700&family=PT+Serif:wght@700&family=Spectral:wght@600&family=Newsreader:wght@600&family=Fraunces:wght@600&family=Bitter:wght@600&family=Domine:wght@600&family=Vollkorn:wght@600&family=Cardo:wght@700&family=Alegreya:ital,wght@0,400;0,600;1,400;1,600&family=Noto+Serif:wght@600&family=IBM+Plex+Serif:wght@600&family=DM+Serif+Display&family=Petrona:wght@600&family=Ubuntu+Mono:wght@400&display=swap');
/* ^ The extra families above (Playfair Display, Cormorant Garamond, ... Petrona) are only
   loaded so the commented-out .hero-name options below render instantly when you uncomment
   one. Once you've settled on a font, trim this list back down to just what's in use. */

:root {
    --bg: #faf7f1;
    --bg-raised: #f2ede3;
    --text: #241f1a;
    --text-dim: #6b6154;
    --accent: #0e7c74;
    --accent-soft: #119488;
    --accent-tint: rgba(14, 124, 116, 0.09);
    --accent-contrast: #ffffff;
    --border: #ddd2bf;
    --card-bg: #ffffff;
    --rule: #c9bca3;
    /* Highlighter colour for link hover, as "R, G, B".
       142, 233, 255 = original cyan · 100, 215, 210 = cyan-teal · 45, 190, 175 = full theme teal */
    --hl: 100, 215, 210;
    --hl-halo: #ffffff;          /* soft glow around highlighted text */

    --font-serif: 'Alegreya', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --maxw: 100%;
    --radius: 6px;
}

/* Container width steps to match how much of the screen the original site used */
@media (min-width: 1024px) { :root { --maxw: 960px; } }
@media (min-width: 1216px) { :root { --maxw: 1152px; } }
@media (min-width: 1408px) { :root { --maxw: 1344px; } }

html[data-theme="dark"] {
    --bg: #14161a;
    --bg-raised: #241f1a;
    --text: #ece5d8;
    --text-dim: #a89a84;
    --accent: #2dd4bf;
    --accent-soft: #5eead4;
    --accent-tint: rgba(45, 212, 191, 0.14);
    --accent-contrast: #0b211d;
    --border: #3a332a;
    --card-bg: #221d18;
    --rule: #4a4033;
    --hl: 45, 212, 191;
    --hl-halo: #14161a;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    transition: background .2s ease, color .2s ease;
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
/* Highlighter-pen hover, after eringrant.github.io */
a:hover {
    color: var(--text);
    background:
        linear-gradient(104deg, rgba(var(--hl), 0) 0.9%, rgb(var(--hl)) 2.4%, rgba(var(--hl), .5) 5.8%, rgba(var(--hl), .1) 93%, rgba(var(--hl), .7) 96%, rgba(var(--hl), 0) 98%),
        linear-gradient(183deg, rgba(var(--hl), 0) 0%, rgba(var(--hl), .3) 7.9%, rgba(var(--hl), 0) 15%);
    text-shadow: -0.15em 0.15em 0.42em rgba(var(--hl), .7), 0.15em -0.15em 0.31em var(--hl-halo), -0.15em -0.15em 1.3em var(--hl-halo);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--accent); color: #fff; padding: .6em 1em; z-index: 1000;
    font-family: var(--font-ui); font-size: .85rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
@media (min-width: 1024px) {
    .wrap { padding: 0; }
}

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

/* ---------- Header / nav ---------- */
.site-header {
    background: var(--bg);
}
.nav {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 9px 24px;
    display: flex;
    align-items: center;
    gap: 28px;
    font-family: var(--font-ui);
}
@media (min-width: 1024px) {
    .nav { padding-left: 0; padding-right: 0; }
}
.nav-links { display: flex; gap: 22px; margin-right: auto; }
.nav-link {
    color: var(--text-dim);
    text-decoration: none;
    font-size: .92rem;
    letter-spacing: .01em;
    padding-bottom: 3px;
    border-bottom: 1px solid transparent;
}
.nav-link[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

.theme-toggle {
    background: none; border: 1px solid var(--rule); color: var(--text);
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.icon-moon { display: none; }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="dark"] .icon-moon { display: block; }

/* ---------- Hero ---------- */
.hero { padding-top: 24px; padding-bottom: 9px; }
/* The hero sits in its own narrower, more centered column — same treatment the
   original site gives it (a wider side-inset than the rest of the page). */
@media (min-width: 700px) {
    .hero { padding-left: 15%; padding-right: 15%; }
    /* the section's own inset above already provides the gutter — don't stack the wrap's on top */
    .hero .wrap { padding-left: 0; padding-right: 0; }
}
.hero-grid {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 26px;
}
.hero-avatar { margin: 0; flex-shrink: 0; }
.hero-avatar img {
    width: 152px; height: 152px; border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent-tint), 0 0 0 7px var(--rule);
}
/* .hero-text has no fixed width, so as a flex item it defaults to min-width:auto
   (its content's min-content width). If a long unbreakable run inside it (e.g. the
   Urdu spans, which can't wrap) ever exceeds the space left after the avatar, the
   row would overflow and the flex algorithm could shrink the avatar's box instead —
   and because the avatar img's WIDTH is capped by the global `img{max-width:100%}`
   reset while its HEIGHT stays at the fixed px value, that shrink is width-only,
   stretching the circle into an oval. flex-shrink:0 above locks the avatar's size;
   min-width:0 + overflow-wrap here let the text column absorb any overflow instead. */
.hero-text { min-width: 0; overflow-wrap: anywhere; }
.hero-name {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 0 0 6px;
    /* letter-spacing: -0.015em; */
    line-height: 1.08;
    color: #2CD4BF;
    font-family: 'Alegreya', Georgia, serif;              /* calligraphic touches, literary — eringrant.github.io */
    /* font-family: 'Crimson Pro', Georgia, serif; */
    /* font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif; */
    /* --- Other font options — comment the ACTIVE line above and uncomment ONE line
       below to preview it live on the site. All of these are already loaded via the
       @import at the top of this file, so the swap is instant, no reload of fonts needed. --- */
    /*font-family: 'Source Serif 4', Georgia, serif;       /* your original choice */
    /*font-family: 'Playfair Display', Georgia, serif;     /* high-contrast, elegant, magazine-style */
    /* 1: font-family: 'Cormorant Garamond', Georgia, serif;   /* delicate, refined, old-world */
    /* 2: font-family: 'EB Garamond', Georgia, serif;          /* classic book serif, understated */
    /* 3: font-family: 'Lora', Georgia, serif;                 /* balanced, contemporary, readable */
    /* 4: font-family: 'Newsreader', Georgia, serif; */           /* news/editorial, clean modern serif */
    /* 5: font-family: 'Cardo', Georgia, serif; */                /* very traditional, scholarly */
}
.ur { color: var(--text-dim); font-weight: 400; font-size: 1em; }
.hero-name .ur { color: #2CD4BF; font-weight: 700; letter-spacing: 0.08em; font-size: 0.8em;} /* only the hero heading's Urdu span — other .ur uses (block titles) keep the dim, regular-weight, default-tracking style. The .hero-name's own -0.015em tightening (meant for the Latin name) was bleeding into this span and crowding the already-cursive Arabic glyphs together, so it's reset to a bit of positive tracking here for breathing room. */
.hero-tagline {
    color: var(--text-dim);
    margin: -6px 0 12px;
    font-size: 1.2rem;
}
.hero-links {
    font-family: "Ubuntu Mono", monospace;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin: 0;
}
.hero-links .sep { color: var(--rule); margin: 0 8px; }
.hero-email { color: rgb(212, 209, 203); }
.hero-docs { white-space: nowrap; }
.hero-bio {
    padding-top: 6px;
    color: var(--text);
    font-size: 1.2rem;
}

/* ---------- Section blocks ---------- */
.block { padding-top: 24px; padding-bottom: 9px; }
.block-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 22px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--accent);
    display: inline-block;
}
.block-title a { color: var(--text); }
.block-more { font-family: var(--font-ui); font-size: .9rem; margin-top: 22px; }

/* ---------- Project cards (home) ---------- */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
}
.project-card {
    border-radius: 12px;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 14px 28px -18px rgba(0,0,0,.22);
    transition: transform .18s ease, box-shadow .18s ease;
}
.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 14px rgba(0,0,0,.07), 0 24px 38px -18px rgba(0,0,0,.3);
}
.project-card-head {
    background: var(--accent);
    padding: 14px 20px;
}
.project-card-title { font-size: 1.12rem; font-weight: 600; margin: 0; color: var(--accent-contrast); }
.project-card-body { padding: 22px 22px 4px; display: flex; flex-direction: column; flex-grow: 1; }
.project-card-authors {
    font-style: italic;
    color: var(--text-dim);
    font-size: 1.1rem;
    margin: 0 0 12px;
}
.project-card-authors strong { font-weight: 600; font-style: italic; color: var(--text); }
.project-card-desc { margin: 0 0 16px; color: var(--text); font-size: 16px; flex-grow: 1; }
.project-card-date {
    font-family: var(--font-ui);
    font-size: .82rem;
    color: var(--text-dim);
    margin: 0 0 20px;
}
.project-card-links {
    margin: 0;
    padding: 0;
    display: flex;
    border-top: 1px solid var(--border);
}
.project-card-links a {
    flex: 1 0 0;
    display: flex; align-items: center; justify-content: center;
    padding: 14px 8px;
    color: var(--accent);
    text-decoration: none;
    transition: background-color .15s ease;
}
.project-card-links a:not(:last-child) { border-right: 1px solid var(--border); }
.project-card-links a:hover { background: var(--accent-tint); color: var(--accent); text-shadow: none; }
.project-card-links a::before { width: 17px; height: 17px; }

/* Shared icon mask (project card footer + full project list) */
.project-card-links a::before,
.project-list-links a::before {
    content: "";
    width: 13px; height: 13px; flex-shrink: 0;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.project-list-links a {
    text-decoration: none;
    background: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
}
.project-list-links a:hover { background: var(--accent); color: var(--accent-contrast); text-shadow: none; }
a[data-icon="live"]::before { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E"); }
a[data-icon="video"]::before { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E"); }
a[data-icon="code"]::before { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 18 22 12 16 6'/%3E%3Cpolyline points='8 6 2 12 8 18'/%3E%3C/svg%3E"); }
a[data-icon="paper"]::before { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E"); }
a[data-icon="slides"]::before { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E"); }
.project-card-links a::before, .project-list-links a::before {
    -webkit-mask-image: var(--ic); mask-image: var(--ic);
}

/* ---------- Project list (projects.html) ---------- */
.project-list { list-style: none; margin: 0; padding: 0; counter-reset: proj; }
.project-list > li {
    counter-increment: proj;
    padding: 20px 0 20px 40px;
    border-top: 1px solid var(--rule);
    position: relative;
}
.project-list > li:first-child { border-top: none; }
.project-list > li::before {
    content: counter(proj, decimal-leading-zero);
    position: absolute; left: 0; top: 21px;
    font-family: var(--font-ui);
    font-size: .78rem;
    color: var(--text-dim);
}
.project-list-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; }
.project-list-title { font-size: 1.08rem; font-weight: 600; }
.project-list-date {
    font-family: var(--font-ui); font-size: .74rem; font-weight: 600;
    color: var(--accent); background: var(--accent-tint);
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.project-list-authors { font-family: var(--font-ui); font-size: .86rem; color: var(--text-dim); margin: 4px 0 10px; }
.project-list-links { font-family: var(--font-ui); font-size: .76rem; display: flex; gap: 8px; margin: 0; flex-wrap: wrap; }

/* ---------- Teaching ---------- */
.teaching-group { margin-bottom: 22px; }
.teaching-role { font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.teaching-list { margin: 0; padding-left: 20px; color: var(--text-dim); font-size: 17px; }
.teaching-list li { margin-bottom: 6px; }
.teaching-list a { color: var(--text); }

/* ---------- Education ---------- */
.education-list { display: flex; flex-direction: column; gap: 20px; }
.education-item { display: flex; gap: 18px; align-items: center; }
.education-logo {
    flex: 0 0 52px; width: 52px; height: 52px;
    border-radius: 6px; overflow: hidden;
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    background: var(--card-bg);
}
.education-logo img { width: 100%; height: 100%; object-fit: contain; }
.education-title { font-weight: 600; font-size: 1.1rem; color: var(--text); }
.education-subtitle { display: block; width: fit-content; font-size: 1.1rem; }
/* font-family: var(--font-ui); */

.education-dates { font-size: 1.1rem; color: var(--text-dim);}

/* ---------- Awards / interests ---------- */
.plain-list { margin: 0; padding-left: 20px; }
.plain-list li { margin-bottom: 8px; }
.interests-intro { color: var(--text-dim); margin-top: 0; margin-bottom: 14px; }
.viewing-log { font-size: 16px; color: var(--text); margin: 0 0 14px; }
.viewing-log strong { font-family: var(--font-ui); font-weight: 600; text-transform: uppercase; font-size: .75rem; letter-spacing: .05em; color: var(--accent); display: block; margin-bottom: 6px; }
.swatches { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 10px 18px; font-family: var(--font-ui); font-size: .85rem; }
.swatches li { display: flex; align-items: center; gap: 8px; }
.swatches code { color: var(--text-dim); }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); flex-shrink: 0; }
.watch-list { margin: 10px 0 0; }
.watch-list em { font-family: var(--font-ui); font-style: normal; font-weight: 600; font-size: .85rem; color: var(--text-dim); }

/* ---------- Gallery ---------- */
.gallery-note { color: var(--text-dim); font-size: .9rem; margin-top: 0; margin-bottom: 18px; }
.gallery-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; font-family: var(--font-ui); }
.gallery-btn {
    padding: 8px 14px; border-radius: 20px; border: 1px solid var(--border);
    background: var(--bg); color: var(--text); font-size: .82rem; cursor: pointer;
}
.gallery-btn:hover { border-color: var(--accent); color: var(--accent); }
.gallery-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.gallery-btn.primary { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.gallery-btn[disabled], .gallery-btn.is-loaded { opacity: .55; cursor: not-allowed; }

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 10px;
}
.gallery-item { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1/1; border: 1px solid var(--border); cursor: pointer; }
.gallery-inner { position: absolute; inset: 0; }
.gallery-item img, .gallery-item video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.04); }
.overlay {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: #fff; font-family: var(--font-ui); font-size: .74rem;
    opacity: 0; transition: opacity .2s ease;
}
.gallery-item:hover .overlay { opacity: 1; }
.gallery-empty { color: var(--text-dim); font-family: var(--font-ui); padding: 30px 0; }

#lightbox {
    position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(20,16,12,.92); z-index: 99999; padding: 20px;
}
#lightbox[aria-hidden="false"] { display: flex; }
.lightbox-content { max-width: 90vw; max-height: 90vh; }
.lightbox-content img, .lightbox-content video { max-width: calc(100vw - 80px); max-height: calc(100vh - 80px); display: block; }
.lightbox-caption { color: #e9e0d2; font-family: var(--font-ui); font-size: .85rem; text-align: center; margin-top: 10px; }
.lightbox-close, .lightbox-nav {
    position: absolute; background: rgba(255,255,255,.08); border: none; color: #fff;
    cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.lightbox-close { top: 16px; right: 16px; width: 42px; height: 42px; font-size: 18px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 20px; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .wrap { padding: 0 20px; }
    .nav { padding: 10px 20px; }
    .hero-avatar img { width: 124px; height: 124px; }
    .project-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
}

@media (max-width: 640px) {
    body { font-size: 16.5px; }
    .wrap { padding: 0 18px; }
    .nav { padding: 9px 18px; gap: 14px; flex-wrap: wrap; }
    .nav-links { gap: 14px; }
    .hero-grid { gap: 15px; }
    .hero-avatar img { width: 150px; height: 150px; max-width: 40vw; max-height: 40vw; }
    .hero-name { font-size: 2rem; }
    .hero-bio { padding-top: 18px; }
    .project-grid { grid-template-columns: 1fr; gap: 14px; }
    .project-card-head { padding: 12px 16px; }
    .project-card-body { padding: 18px 18px 2px; }
    .education-item { gap: 14px; }
    .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
}

@media (max-width: 420px) {
    .wrap { padding: 0 14px; }
    .nav { padding: 9px 14px; gap: 10px; }
    .nav-links { gap: 10px; }
    .nav-link { font-size: .85rem; }
    .block-title { font-size: 1.12rem; }
    .theme-toggle { width: 30px; height: 30px; }
}