/* @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap'); */

:root { 
    --ink: #17232d; 
    --muted: #6b7780; 
    --paper: #f5f3ee; 
    --surface: #fffdf8; 
    --line: #d9d8d1; 
    --accent: #d85b3f; 
    --accent-dark: #a83d2b; 
    --teal: #2d7771; 
    --shadow: 0 18px 45px rgba(35, 45, 49, .09); 
}

* { box-sizing: border-box; }
body {
    margin: 0; 
    color: var(--ink);
    background: radial-gradient(circle at 85% 0%, #f4d7bd 0, transparent 26%), var(--paper); 
    font-family: 'DM Sans', sans-serif; 
    line-height: 1.5; 
}

h1, h2, h3, .brand-mark {
    font-family: 'Space Grotesk', sans-serif; 
}

.site-navbar {
    align-items: center; 
    background: var(--ink); 
    display: flex; 
    justify-content: space-between; 
    padding: 18px max(5vw, 24px); 
}

.brand-mark, .nav-link { 
    color: #fffdf8; 
    text-decoration: none; 
}

.brand-mark { 
    font-size: 1.1rem; 
    font-weight: 700;
}

.nav-links { 
    display: flex; 
    gap: 8px; 
}

.nav-link { 
    border-bottom: 2px solid transparent; 
    padding: 7px 12px; 
    font-size: .9rem; 
}

.nav-link:hover, .nav-link-active { 
    border-color:#eaa27e; 
    color:#f5c6a9; 
}

.page-shell { 
    margin: 0 auto; 
    max-width: 1120px; 
    padding: 64px 24px 90px; 
}

.page-heading { 
    margin-bottom: 38px;
    max-width: 680px; 
}

.eyebrow, .profile-label { 
    color: var(--accent-dark); 
    font-size: .76rem; 
    font-weight: 700; 
    letter-spacing: .08em;
    margin: 0 0 8px; 
    text-transform: uppercase; 
}

h1 { 
    font-size: clamp(2.2rem, 5vw, 4.2rem); 
    border: 1px solid rgba(217, 216, 209, .8); 
    box-shadow: var(--shadow); 
}

.form-section { 
    border-bottom: 1px solid var(--line);
    padding: 32px; 
}

.section-heading { 
    align-items: flex-start;
    display: flex; 
    gap: 15px; 
    margin-bottom: 28px; 
}

.section-number { 
    color: var(--accent); 
    font-family: 'Space Grotesk', sans-serif; 
    font-weight: 700; 
}

.section-heading h2 { 
    font-size: 1.35rem;
    margin: 0 0 3px; 
}

.section-heading p { 
    color: var(--muted);
    font-size: .9rem;
    margin: 0; 
}

.form-grid { 
    display: grid;
    gap: 20px; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
}

.field-wide { 
    grid-column: 1 / -1; 
}

.field-group { 
    border: 0; 
    display: flex; 
    flex-direction: column;
    gap: 7px; 
    margin: 0; 
    min-width: 0; 
    padding: 0; 
}

.field-group > span, .field-group legend { 
    font-size: .84rem; 
    font-weight: 700; 
}

.text-input, .select-input, .textarea-input { 
    background: #fff; 
    border: 1px solid var(--line);
    border-radius: 4px; 
    color: var(--ink);
    font: inherit; 
    padding: 12px 13px; 
    width: 100%; 
}

.text-input:focus, .select-input:focus, .textarea-input:focus { 
    border-color: var(--teal); 
    box-shadow: 0 0 0 3px rgba(45, 119, 113, .13); 
    outline: none; 
}

.textarea-input { 
    resize: vertical; 
}

.choice-group, .checklist-group { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    gap: 10px 18px; 
}

.choice-group legend, .checklist-group legend { 
    flex-basis: 100%; 
}

.choice-option { 
    color: var(--muted); 
    font-size: .9rem; 
}

.choice-option input { 
    accent-color: var(--teal); 
    margin-right: 5px; 
}

.education-list { 
    display: grid; 
    gap: 18px; 
}

.education-row { 
    align-items: end; 
    display: grid; 
    gap: 14px; 
    grid-template-columns: 52px 1.6fr 1fr 1fr; 
}

.education-row strong { 
    color: var(--teal); 
    padding-bottom: 12px; 
}

.form-actions { 
    display: flex; 
    gap: 12px; 
    justify-content: flex-end; 
    padding: 24px 32px; 
}

.button { 
    border: 0; 
    border-radius: 4px; 
    cursor: pointer; 
    font: 700 .9rem 'DM Sans', sans-serif; 
    padding: 13px 20px; 
}

.button-primary { 
    background: var(--accent); 
    color: #fff; 
}

.button-primary:hover { 
    background: var(--accent-dark); 
}

.button-secondary { 
    background: #e7e5dd; 
    color: var(--ink); 
}

.table-section, .profile-section { 
    padding: 30px; 
}

.table-toolbar { 
    align-items: center; 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 18px; 
}

.table-toolbar h2 { 
    font-size: 1.25rem; 
    margin: 0; 
}

.table-count { 
    color: var(--teal); 
    font-size: .85rem; 
    font-weight: 700; 
}

.table-wrapper { 
    overflow-x: auto; 
}

.participant-table { 
    border-collapse: collapse; 
    min-width: 650px; 
    width: 100%; 
}

.participant-table th, .participant-table td { 
    border-bottom: 1px solid var(--line); 
    padding: 15px 12px; 
    text-align: left; 
}

.participant-table th { 
    color: var(--muted); 
    font-size: .78rem; 
    text-transform: uppercase; 
}

.participant-table td:first-child { 
    color: var(--muted); 
    font-weight: 700; 
}

.participant-link { 
    color: var(--accent-dark); 
    font-weight: 700; 
    text-decoration: none; 
}

.participant-link:hover { 
    text-decoration: underline; 
}

.profile-header { 
    align-items: center; 
    border-bottom: 1px solid var(--line); 
    display: flex; 
    gap: 16px; 
    padding-bottom: 24px; 
}

.profile-avatar { 
    align-items: center; 
    background: var(--teal); 
    border-radius: 50%; 
    color: #fff; 
    display: flex; 
    font: 700 1.5rem 'Space Grotesk', sans-serif; 
    height: 58px; 
    justify-content: center; 
    width: 58px; 
}

.profile-header h2 { 
    font-size: 1.8rem; 
    margin: 0; 
}

.profile-major { 
    color: var(--muted); 
    margin: 2px 0 0; 
}

.detail-grid { 
    display: grid; 
    gap: 30px; 
    grid-template-columns: repeat(3, 1fr); 
    padding-top: 28px; 
}

.detail-block h3 { 
    font-size: 1rem; 
    margin: 0 0 15px; 
}

.detail-list { 
    margin: 0; 
}

.detail-list dt { 
    color: var(--muted); 
    font-size: .78rem; 
    margin-top: 13px; 
}

.detail-list dd { 
    margin: 2px 0 0; 
}

@media (max-width: 720px) {
    .site-navbar, .table-toolbar { 
        align-items: flex-start; 
        flex-direction: column; 
        gap: 14px; 
    } 
    
    .nav-links { 
        flex-wrap: wrap; 
    } 
    
    .page-shell { 
        padding-top: 42px; 
    }
     
    .form-grid, .detail-grid { 
        grid-template-columns: 1fr; 
    } 
    
    .education-row { 
        align-items: stretch; 
        grid-template-columns: 1fr; 
    }
    
    .education-row strong { 
        padding: 0; 
    }
    
    .form-section, .table-section, .profile-section { 
        padding: 22px; 
    }
    
    .form-actions { 
        padding: 20px 22px; 
    }
    
    .button { 
        flex: 1; 
    } 
}