/* ==========================================================
   NAVIGATION
   ========================================================== */

/* nav, main { max-width: 700px; margin: 2rem auto; } */
nav, main { max-width: 60rem; margin: 2rem auto; }

nav {
    gap: 2rem;
    display: flex;
    justify-content: flex-end;
}

nav a { color: var(--text); font-weight: 500; }
nav a:hover { color: var(--accent); }

/* ==========================================================
   HERO
   ========================================================== */

.hero {
    background: var(--hero-bg);
    color: var(--hero-text);
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    gap: 2rem;
    align-items: center;
    margin: 0 0 4rem;
}

.hero-photo {
    width: 10rem;
    height: 10rem;
    border-radius: 1.25rem;
    object-fit: cover;
    flex-shrink: 0;
}

.hero-name { color: var(--hero-text); margin: 0 0 0; }
.hero-affiliation { color: var(--hero-text); font-weight: 400; margin: 0.5rem 0 0; }
.hero-location { opacity: 0.85; margin: 0.5rem 0 0; }

.hero-links { font-family: var(--font-mono); margin: 1.0rem 0 0; }
.hero-links a { color: var(--hero-text); opacity: 0.9; }
.hero-links a:hover { opacity: 1; }

/* ==========================================================
   TIMELINE
   ========================================================== */

.timeline {
   display: grid;
   grid-template-columns: max-content 1fr;
   column-gap: 2rem;
   row-gap: 2rem;
   align-items: start;
}

.timeline-year {
   font-family: var(--font-mono);
   color: var(--muted); 
}

.timeline-year-list { 
   display: flex;
   flex-direction: column;
   gap: 2rem;
}

.timeline-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.timeline-item-title { margin: 0 0 0; }
.timeline-item-authors { color: var(--muted); }
.timeline-item-meta { font-family: var(--font-mono); color: var(--muted); }

/* ==========================================================
   SIMPLE LISTS
   ========================================================== */

.simple-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.simple-list li { margin-bottom: 0.9rem; }

/* ==========================================================
   FOOTER
   ========================================================== */

.footer-note { text-align: center; }

/* ==========================================================
   PROPERTY TESTING
   ========================================================== */

.property-testing { margin-top: 1.5rem; }

.property-testing summary {
    cursor: pointer;
    font-family: var(--font-mono);
    color: var(--muted);
}

.property-testing[open] summary { margin-bottom: 0.75rem; }