@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@700&display=swap');

        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --accent: #073f4a;
            --primary: #76171B;
            --accent-light: #e8f0fe;
            --bg: #D7EAE9;
            --card-bg: #ffffff;
            --text: #2c3e50;
            --text-light: #6b7c93;
            --border: #e2e8f0;
            --shadow: 0 4px 24px rgba(0,0,0,0.06);
            --shadow-hover: 0 8px 32px rgba(0,0,0,0.10);
        }

        body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.7; }

        /* ── Navbar ── */
        nav { position:fixed; top:0; width:100%; background:rgba(255,255,255,0.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--border); z-index:1000; transition:box-shadow 0.3s; }
        nav.scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.06); }
        .nav-inner { max-width:1100px; margin:0 auto; padding:0 2rem; display:flex; align-items:center; justify-content:space-between; height:64px; }
        .nav-logo { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--primary); text-decoration:none; cursor:pointer; }
        .nav-links { display:flex; list-style:none; gap:1.6rem; }
        .nav-links a { text-decoration:none; color:var(--text-light); font-size:0.88rem; font-weight:500; position:relative; transition:color 0.3s; cursor:pointer; }
        .nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--accent); transition:width 0.3s; }
        .nav-links a:hover, .nav-links a.active { color:var(--accent); }
        .nav-links a:hover::after, .nav-links a.active::after { width:100%; }
        .hamburger { display:none; flex-direction:column; cursor:pointer; gap:5px; background:none; border:none; }
        .hamburger span { width:24px; height:2px; background:var(--text); transition:0.3s; }

        /* ── Hero / Bio ── */
        .hero { max-width:1100px; margin:0 auto; padding:140px 2rem 80px; display:flex; align-items:center; gap:4rem; }
        .hero-image { flex-shrink:0; position:relative; }
        .hero-image::before { content:''; position:absolute; top:-12px; left:-12px; right:12px; bottom:12px; border:2px solid var(--accent); border-radius:16px; z-index:0; }
        .hero-image img { width:260px; height:260px; object-fit:cover; border-radius:16px; position:relative; z-index:1; display:block; }
        .hero-text { flex:1; }
        .hero-text h1 { font-family:'Playfair Display',serif; font-size:2.8rem; color:var(--primary); margin-bottom:0.3rem; }
        .hero-text .subtitle { font-size:1.1rem; color:var(--accent); font-weight:500; margin-bottom:1.2rem; }
        .hero-text p { color:var(--text-light); font-size:1.02rem; margin-bottom:1.5rem; }
        .social-links { display:flex; gap:0.75rem; flex-wrap:wrap; }
        .social-links a { display:inline-flex; align-items:center; gap:0.4rem; padding:0.5rem 1rem; border:1px solid var(--border); border-radius:8px; text-decoration:none; color:var(--text); font-size:0.85rem; font-weight:500; transition:all 0.3s; }
        .social-links a:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-light); }
        .social-links a svg { width:16px; height:16px; }

        /* ── Sections ── */
        section, .page-section { max-width:1100px; margin:0 auto; padding:60px 2rem; }
        .section-header { display:flex; align-items:center; gap:1rem; margin-bottom:2rem; }
        .section-header h2 { font-family:'Playfair Display',serif; font-size:2rem; color:var(--primary); white-space:nowrap; }
        .section-header::after { content:''; flex:1; height:1px; background:var(--border); }

        /* ── News Cards ── */
        .news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
        .news-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:1.8rem; transition:all 0.3s; position:relative; overflow:hidden; }
        .news-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--accent); opacity:0; transition:opacity 0.3s; }
        .news-card:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
        .news-card:hover::before { opacity:1; }
        .news-card .date { font-size:0.78rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:0.5rem; }
        .news-card .tag { display:inline-block; background:var(--accent-light); color:var(--accent); padding:0.2rem 0.6rem; border-radius:20px; font-size:0.72rem; font-weight:600; margin-left:0.5rem; }
        .news-card h3 { font-size:1.1rem; color:var(--primary); margin-bottom:0.6rem; line-height:1.4; }
        .news-card p { color:var(--text-light); font-size:0.92rem; line-height:1.6; }
        .news-card a.read-more { display:inline-flex; align-items:center; gap:0.3rem; margin-top:1rem; font-size:0.85rem; font-weight:600; color:var(--accent); text-decoration:none; transition:gap 0.3s; }
        .news-card a.read-more:hover { gap:0.6rem; }

        /* ── Media Coverage ── */
        .media-list { display:flex; flex-direction:column; gap:1rem; }
        .media-item { display:flex; align-items:center; gap:1.5rem; background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:1.4rem 1.8rem; text-decoration:none; color:inherit; transition:all 0.3s; }
        .media-item:hover { box-shadow:var(--shadow-hover); transform:translateY(-2px); }
        .media-logo { flex-shrink:0; width:72px; height:72px; border-radius:12px; background:var(--accent-light); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.7rem; color:var(--accent); text-align:center; line-height:1.2; }
        .media-content { flex:1; }
        .media-content .outlet { font-size:0.78rem; color:var(--accent); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
        .media-content h3 { font-size:1.05rem; color:var(--primary); margin:0.25rem 0; line-height:1.4; }
        .media-content .media-date { font-size:0.82rem; color:var(--text-light); }
        .media-arrow { flex-shrink:0; color:var(--text-light); transition:all 0.3s; }
        .media-item:hover .media-arrow { color:var(--accent); transform:translateX(4px); }

        /* ── Extended Bio ── */
        .bio-extended { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
        .bio-extended .bio-narrative { grid-column:1/-1; }
        .bio-narrative p { color:var(--text-light); font-size:1.02rem; margin-bottom:1.2rem; }
        .bio-narrative p:first-of-type::first-letter { font-family:'Playfair Display',serif; font-size:3.4rem; float:left; margin-right:0.5rem; margin-top:0.15rem; line-height:1; color:var(--primary); }
        .bio-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:2rem; }
        .bio-card h3 { font-family:'Playfair Display',serif; color:var(--primary); font-size:1.2rem; margin-bottom:1.2rem; display:flex; align-items:center; gap:0.6rem; }
        .bio-card h3 svg { width:20px; height:20px; color:var(--accent); }
        .bio-card ul { list-style:none; }
        .bio-card li { padding:0.6rem 0; border-bottom:1px solid var(--border); color:var(--text-light); font-size:0.92rem; }
        .bio-card li:last-child { border-bottom:none; }
        .bio-card li strong { color:var(--text); display:block; font-size:0.95rem; }
        .bio-card li span { font-size:0.82rem; color:var(--accent); font-weight:600; }

        /* ── CV ── */
        .cv-download-bar { display:flex; align-items:center; justify-content:space-between; background:var(--accent-light); border:1px solid var(--accent); border-radius:14px; padding:1.2rem 2rem; margin-bottom:2.5rem; flex-wrap:wrap; gap:1rem; }
        .cv-download-bar p { font-weight:500; color:var(--primary); font-size:0.95rem; }
        .btn-download { display:inline-flex; align-items:center; gap:0.5rem; padding:0.7rem 1.5rem; background:var(--accent); color:#fff; border-radius:8px; text-decoration:none; font-weight:600; font-size:0.9rem; transition:background 0.3s,transform 0.2s; }
        .btn-download:hover { background:#2a63b5; transform:translateY(-1px); }
        .btn-download svg { width:18px; height:18px; }
        .cv-timeline { position:relative; padding-left:2.5rem; }
        .cv-timeline::before { content:''; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--border); }
        .cv-category { margin-bottom:2.5rem; }
        .cv-category h3 { font-family:'Playfair Display',serif; font-size:1.25rem; color:var(--primary); margin-bottom:1.2rem; position:relative; }
        .cv-category h3::before { content:''; position:absolute; left:-2.5rem; top:50%; transform:translateY(-50%); width:18px; height:18px; background:var(--accent); border:3px solid var(--bg); border-radius:50%; box-shadow:0 0 0 2px var(--accent); }
        .cv-entry { background:var(--card-bg); border:1px solid var(--border); border-radius:12px; padding:1.3rem 1.6rem; margin-bottom:0.8rem; transition:all 0.3s; }
        .cv-entry:hover { box-shadow:var(--shadow); }
        .cv-entry .cv-role { font-weight:600; color:var(--primary); font-size:0.98rem; }
        .cv-entry .cv-place { color:var(--text-light); font-size:0.9rem; }
        .cv-entry .cv-year { color:var(--accent); font-size:0.82rem; font-weight:600; margin-top:0.2rem; }

        /* ── Research ── */
        .research-hero-img { width:100%; height:280px; object-fit:cover; border-radius:16px; margin-bottom:2.5rem; border:1px solid var(--border); }
        .research-content { display:grid; grid-template-columns:1fr 340px; gap:3rem; }
        .research-content .main-text h3 { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--primary); margin:2rem 0 0.8rem; }
        .research-content .main-text h3:first-child { margin-top:0; }
        .research-content .main-text p { color:var(--text-light); font-size:0.98rem; margin-bottom:1rem; }
        .research-sidebar .sidebar-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; padding:1.6rem; margin-bottom:1.5rem; }
        .sidebar-card h4 { font-family:'Playfair Display',serif; color:var(--primary); font-size:1.05rem; margin-bottom:1rem; }
        .sidebar-card .research-area { display:flex; align-items:flex-start; gap:0.8rem; padding:0.7rem 0; border-bottom:1px solid var(--border); }
        .sidebar-card .research-area:last-child { border-bottom:none; }
        .research-area .area-icon { width:36px; height:36px; border-radius:8px; background:var(--accent-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
        .research-area .area-text { font-size:0.88rem; color:var(--text-light); }
        .research-area .area-text strong { display:block; color:var(--text); font-size:0.92rem; margin-bottom:0.15rem; }
        .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
        .stat-item { text-align:center; padding:1rem 0.5rem; background:var(--accent-light); border-radius:10px; }
        .stat-item .stat-number { font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--accent); }
        .stat-item .stat-label { font-size:0.75rem; color:var(--text-light); font-weight:500; margin-top:0.2rem; }

        /* ── Page system ── */
        .page { display:none; }
        .page.active { display:block; animation:fadeIn 0.4s ease; }
        @keyframes fadeIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

        /* ── Back to top ── */
        .back-to-top { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all 0.3s; box-shadow:var(--shadow); z-index:999; }
        .back-to-top.visible { opacity:1; visibility:visible; }
        .back-to-top:hover { background:#2a63b5; transform:translateY(-2px); }

        /* ── Footer ── */
        footer { text-align:center; padding:3rem 2rem; border-top:1px solid var(--border); margin-top:2rem; }
        footer p { color:var(--text-light); font-size:0.85rem; }
        footer a { color:var(--accent); text-decoration:none; }

        /* ── Scroll animation ── */
        .fade-up { opacity:0; transform:translateY(24px); transition:opacity 0.6s ease,transform 0.6s ease; }
        .fade-up.visible { opacity:1; transform:translateY(0); }

        /* ── Responsive ── */
        @media(max-width:768px){
            .hero{flex-direction:column;text-align:center;gap:2rem;padding-top:110px}
            .hero-image::before{display:none}
            .hero-image img{width:200px;height:200px}
            .hero-text h1{font-size:2rem}
            .social-links{justify-content:center}
            .news-grid{grid-template-columns:1fr}
            .media-item{flex-direction:column;text-align:center;gap:1rem}
            .media-arrow{display:none}
            .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(16px);flex-direction:column;padding:1.5rem 2rem;gap:1rem;border-bottom:1px solid var(--border)}
            .nav-links.open{display:flex}
            .hamburger{display:flex}
            .bio-extended{grid-template-columns:1fr;gap:1.5rem}
            .research-content{grid-template-columns:1fr}
            .research-sidebar{order:-1}
            .cv-download-bar{flex-direction:column;text-align:center}
        }

                /* ── Section CTA (view all link) ── */
        .section-cta {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-top: 2.5rem;
        }

        .section-cta .cta-line {
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.75rem 1.6rem;
            background: var(--card-bg);
            border: 2px solid var(--accent);
            border-radius: 10px;
            color: var(--accent);
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all 0.3s;
            white-space: nowrap;
            cursor: pointer;
        }

        .cta-button:hover {
            background: var(--accent);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 4px 16px rgba(58, 123, 213, 0.3);
        }

        /* ── Publications Page ── */
        .pub-controls {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .pub-search {
            flex: 1;
            min-width: 200px;
            padding: 0.7rem 1rem 0.7rem 2.6rem;
            border: 1px solid var(--border);
            border-radius: 10px;
            font-size: 0.9rem;
            font-family: 'Inter', sans-serif;
            background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.9rem center;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .pub-search:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(58, 123, 213, 0.12);
        }

        .pub-filter-group {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .pub-filter {
            padding: 0.5rem 1rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            background: var(--card-bg);
            color: var(--text-light);
            font-size: 0.82rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            font-family: 'Inter', sans-serif;
        }

        .pub-filter:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .pub-filter.active {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
        }

        .pub-year-heading {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            color: var(--primary);
            margin: 2rem 0 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid var(--accent-light);
        }

        .pub-year-heading:first-of-type {
            margin-top: 0;
        }

        .pub-entry {
            display: flex;
            gap: 1.2rem;
            padding: 1.3rem 1.6rem;
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 12px;
            margin-bottom: 0.7rem;
            transition: all 0.3s;
            align-items: flex-start;
        }

        .pub-entry:hover {
            box-shadow: var(--shadow);
            transform: translateY(-1px);
        }

        .pub-number {
            flex-shrink: 0;
            width: 32px;
            height: 32px;
            border-radius: 8px;
            background: var(--accent-light);
            color: var(--accent);
            font-weight: 700;
            font-size: 0.78rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.15rem;
        }

        .pub-details {
            flex: 1;
        }

        .pub-details .pub-title {
            font-weight: 600;
            color: var(--primary);
            font-size: 0.98rem;
            line-height: 1.4;
        }

        .pub-details .pub-authors {
            color: var(--text-light);
            font-size: 0.88rem;
            margin-top: 0.2rem;
        }

        .pub-details .pub-authors strong {
            color: var(--text);
        }

        .pub-details .pub-venue {
            font-style: italic;
            color: var(--accent);
            font-size: 0.85rem;
            margin-top: 0.15rem;
        }

        .pub-links {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.6rem;
            flex-wrap: wrap;
        }

        .pub-link {
            padding: 0.25rem 0.65rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            color: var(--text-light);
            text-decoration: none;
            transition: all 0.2s;
        }

        .pub-link:hover {
            border-color: var(--accent);
            color: var(--accent);
            background: var(--accent-light);
        }

        /* ── Writings Page ── */
        .writings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
            gap: 1.5rem;
        }

        .writing-card {
            background: var(--card-bg);
            border: 1px solid var(--border);
            border-radius: 14px;
            overflow: hidden;
            transition: all 0.3s;
            text-decoration: none;
            color: inherit;
            display: flex;
            flex-direction: column;
        }

        .writing-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-3px);
        }

        .writing-card-img {
            height: 180px;
            object-fit: cover;
            width: 100%;
            border-bottom: 1px solid var(--border);
        }

        .writing-card-body {
            padding: 1.6rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .writing-card-body .writing-meta {
            font-size: 0.78rem;
            color: var(--accent);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
        }

        .writing-card-body .writing-tag {
            display: inline-block;
            background: var(--accent-light);
            color: var(--accent);
            padding: 0.15rem 0.5rem;
            border-radius: 20px;
            font-size: 0.7rem;
            font-weight: 600;
            margin-left: 0.5rem;
            vertical-align: middle;
        }

        .writing-card-body h3 {
            font-size: 1.1rem;
            color: var(--primary);
            line-height: 1.4;
            margin-bottom: 0.6rem;
        }

        .writing-card-body p {
            color: var(--text-light);
            font-size: 0.9rem;
            line-height: 1.6;
            flex: 1;
        }

        .writing-card-body .writing-read {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            margin-top: 1rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--accent);
            transition: gap 0.3s;
        }

        .writing-card:hover .writing-read {
            gap: 0.6rem;
        }

        @media(max-width:768px){
            .writings-grid{grid-template-columns:1fr}
            .pub-controls{flex-direction:column}
            .pub-search{min-width:100%}
        }