/* Generated with assistance from GitHub Copilot (AI coding assistant). */

/* Layout & colors */
:root{
    /* Slightly more muted warm palette (softer burnt-orange accents) */
    --bg: #F7F4F1;            /* softer cream */
    --text: #3B3532;          /* warm deep gray */
    --muted: #7F6E66;         /* muted brown for secondary text */
    --accent: #B04F36;        /* slightly darker muted burnt orange (primary accent) for contrast */
    --accent-2: #9A4A34;      /* slightly darker muted terracotta (secondary accent) */
    /* darken header gradient stops so white header text has sufficient contrast */
    --header: linear-gradient(135deg,#51261f 0%, #2f120d 100%); /* darker muted header gradient (end darker for contrast) */
    --card: #FFF9F6;          /* warm, subtle card background */
    --footer-bg: #4A362F;     /* warm deep brown for footer */
    --footer-text: #FFF8F5;   /* soft off-white for footer text */
}

html,body {
    height: 100%;
}

body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header{
    background: var(--header);
    color: #fff;
    /* reduce vertical padding so header height matches footer more closely */
    padding: 8px 0;
    text-align: center;
    box-shadow: 0 3px 12px rgba(2,15,23,0.08);
}

.site { max-width: 1000px; margin: 0 auto; padding: 24px; }

/* When .site is inside header keep vertical padding small so header is compact */
header .site { padding-top: 20px; padding-bottom: 20px }

h1{ margin: 0; font-size: 1.6rem; letter-spacing: -0.5px }
h2{ font-size: 1.25rem; color: var(--accent-2); margin-top: 22px }
p { color: var(--muted); line-height: 1.5; font-size: 1rem }

/* Hero area with photo + intro */
.hero { display: grid; grid-template-columns: 160px 1fr; gap: 22px; align-items: center; background: var(--card); padding: 20px; border-radius: 10px; box-shadow: 0 6px 18px rgba(45,33,28,0.06); }
.photo { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg,#fff4ef,#fffaf8); border: 4px solid rgba(201,106,76,0.12) }
.photo img{ width:100%; height:100%; object-fit:cover; display:block }

.intro h2{ margin-bottom: 8px }
.intro p.lead{ font-size: 1.05rem; color: var(--text); margin-top: 0 }

/* Sections */
.section { margin-top: 20px; background: var(--card); padding: 18px; padding-top: 8px; padding-bottom: 30px; border-radius: 10px; box-shadow: 0 4px 12px rgba(3,11,16,0.04) }
.list { margin: 0; padding-left: 1.1rem }
.list-unstyled {list-style: none;}
.list-item-with-room {margin-bottom: 16px;}

/* Footer */
footer { background-color: var(--footer-bg); color: var(--footer-text); padding: 14px 0; margin-top: 32px }
.footer-container { display:flex; gap:12px; align-items:center; justify-content:center }

a { color: var(--accent); text-decoration: none }
a:hover { text-decoration: underline }

/* Responsive */
@media (max-width:700px){
    .hero{ grid-template-columns: 140px 1fr }
    .site{ padding: 16px }
}
@media (max-width:520px){
    .hero{ grid-template-columns: 1fr; gap: 0px; grid-auto-rows: auto; text-align: center }
    .photo{ margin: 0 auto }
    .intro{ padding-top: 6px }
}

/* Moved inline styles from index.html */
.header-subtitle { margin-top: 8px; color: rgba(255,255,255,0.9); font-size: 0.95rem }
.quick-links { margin-top: 10px; color: var(--muted) }
.quick-link { line-height: 1.0; }
.orcid-link { vertical-align: top }
.orcid-icon { width: 28px; margin-inline-start: 0.5em; display:inline-block }