/* 1. Local Font Implementation */
@font-face {
    font-family: 'Inferi';
    src: url('fonts/Inferi-Normal.woff2') format('woff2'),
         url('fonts/Inferi-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inferi-Light';
    src: url('fonts/Inferi-Light.woff2') format('woff2'),
         url('fonts/Inferi-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* IBM Plex Mono via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&display=swap');

:root {
    --bg-color: #f2f0ec;
    --text-color: #1a2421; 
    --accent-red: #ff3c2d;
    --accent-green: #696E53; 
    --font-primary: tt-commons-pro, sans-serif;
    --font-secondary: 'Inferi', serif;
    --font-secondary-light: 'Inferi-Light', serif;
    --font-mono: 'IBM Plex Mono', monospace;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary), serif;
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 8rem 3rem; 
}

/* --- Background Layer --- */
#sandCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* --- Fixed Navigation --- */
.main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 2.5rem;
    padding: 3rem;
    font-family: var(--font-secondary);
    background-color: rgba(242, 240, 236, 0.7); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000;
}

.main-nav a {
    text-decoration: none;
    color: var(--text-color);
    border-bottom: 1px dotted transparent;
    padding-bottom: 2px;
    /* Slow, gentle drift */
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.main-nav a:hover, 
.main-nav a.active {
    color: var(--accent-red);
    border-bottom: 1px dotted var(--accent-red);
}

/* --- Main Content Area --- */
.content {
    max-width: 600px;
    margin-top: 2rem;
    position: relative;
    z-index: 10;
}

.content-icon {
    display: block;
    max-width: 60px;
    height: auto;
    margin-bottom: 2rem;
}

.sheridan-logo-icon {
    display: block;
    max-width: 120px;
    height: auto;
    margin-bottom: 1rem;
}

.content p {
    margin-bottom: 1.8rem;
    font-size: .95rem;
    letter-spacing:.02em;
    line-height: 1.5;
}

/* Content Link Styling - Slow Drift */
.content a {
    color: var(--accent-red);
    text-decoration: none; 
    border-bottom: 1px dotted rgba(255, 60, 45, 0.3);
    padding-bottom: 2px;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content a:hover {
    color: var(--accent-red);
    border-bottom: 1px dotted var(--accent-red);
    opacity: 0.7;
    padding-bottom: 5px; /* Subtle physical 'dip' */
}

/* --- Project Specifics --- */
.project-entry {
    margin-bottom: 6rem;
}

.project-id {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: var(--text-color);
    opacity: 0.8;
}

.project-entry h3 {
    font-family: var(--font-secondary-light);
    font-weight: 300;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--accent-red);
}

.project-image-container {
    width: 75%;
    margin-bottom: 2rem;
    background-color: rgba(26, 36, 33, 0.03);
    border: 1px dotted rgba(255, 60, 45, 0.3);
}

.project-placeholder {
    width: 100%;
    height: auto;
    display: block;
    border: 1px dotted rgba(255, 60, 45, 0.3);
    cursor: pointer;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                box-shadow 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-placeholder:hover {
    transform: translateY(-8px) translateX(-4px);
    box-shadow: 
        1px 1px 0px rgba(26, 36, 33, 0.05),
        2px 2px 0px rgba(26, 36, 33, 0.05),
        3px 3px 0px rgba(26, 36, 33, 0.05),
        4px 4px 0px rgba(26, 36, 33, 0.05),
        5px 5px 0px rgba(26, 36, 33, 0.05),
        6px 6px 0px rgba(26, 36, 33, 0.05),
        10px 10px 20px rgba(26, 36, 33, 0.1);
}

/* --- Typography Classes --- */
.category-header {
    font-family: 'Inferi-Light', serif !important;
    font-size: 3.5rem; 
    font-weight: normal;
    color: var(--accent-green);
    margin-bottom: 3rem;
    padding-bottom: 1rem;
    letter-spacing: -0.02rem;
    text-transform: none;
    line-height: 1;
}

.p-inferi {
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    font-weight: normal;
    font-style: normal;
}

.p-inferi-light, span.call-out-large {
    font-weight: 300;
    font-size: 1rem;
    font-family: var(--font-secondary);
    color: var(--accent-red);
}



/* --- Lab / About Layout --- */
.about-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
    max-width: 1000px;
    align-items: start;
}

.right-col {
    margin-top: 6rem;
}

.research-group {
    margin-bottom: 3rem;
}

.research-group h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    margin-bottom: 1rem;
    color: var(--accent-green);
}

.research-group p {
    font-family: var(--font-secondary);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
    line-height: 1.2;
}

.institutional-context {
    margin-top: 3rem;
    font-family: var(--font-secondary);
    font-size: 1rem;
    line-height: 1.8;
}

/* --- UI Elements --- */
.button-container {
    margin-top: 2rem;
}


.register-button {
    /* Basic Setup */
    display: inline-block;
    background-color: var(--accent-green);
    color: #ffffff !important;
    text-decoration: none;
    
    /* Typography */
    font-family: var(--font-primary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    text-indent: 0.15rem; /* Offsets the gap after the last letter */
    
    /* THE VERTICAL CENTER FIX */
    /* 1. Set a fixed height */
    height: 3.5rem; 
    /* 2. Set line-height to match the height EXACTLY */
    line-height: 3.5rem; 
    /* 3. Ensure no padding is fighting the line-height */
    padding: 0 2.5rem; 
    
    /* 4. THE VISUAL NUDGE:
       If the text still hangs low, use a small negative margin 
       or a relative position nudge. */
    position: relative;
    top: -2px; /* Moves the text up 2 pixels visually */
    
    border: none;
    cursor: pointer;
}

.register-button:hover {
    background-color: var(--accent-red);
    /* Simple lifting effect */
    transform: translateY(-2px);
    box-shadow: 0px 4px 10px rgba(26, 36, 33, 0.15);
}
/* --- Matter Page Specifics --- */
.resource-list {
    margin-top: 4rem;
}

.resource-item {
    margin-bottom: 3.5rem;
    max-width: 550px;
}

.resource-item h3 {
    font-family: var(--font-secondary-light);
    font-weight: 300;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
}

.resource-item h3 a {
    color: var(--accent-red);
    text-decoration: none;
    transition: all 0.3s ease;
}

.resource-item h3 a:hover {
    opacity: 0.8;
}

/* --- Dynamic Recap / Gatherings Layout --- */
.recap-container {
    max-width: 1100px;
    margin: 4rem 0; /* Anchored left */
}

.recap-block {
    margin-bottom: 12rem;
    display: flex;
    flex-direction: column;
}

.recap-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2rem;
    margin-top: 4rem;
}

.image-group-triple {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.image-sub-group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 35%;
}

.image-group-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.asymmetric-reversed {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 4rem;
    align-items: start;
}

.size-large { width: 65%; }

/* --- Fixed Footer Branding --- */
.branding {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 3rem;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 1000;
    pointer-events: none; 
}

.lab-logo {
    max-width: 280px;
    height: auto;
    width: 100%;
    pointer-events: auto;
}

/* --- Responsive Adjustments --- */
@media (max-width: 850px) {
    .about-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .right-col {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    body {
        padding: 6rem 1.5rem;
    }
    
    .main-nav {
        padding: 1.5rem;
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .branding {
        padding: 1.5rem;
    }

    .lab-logo {
        max-width: 180px;
    }

    .category-header {
        font-size: 2.5rem;
    }

    .image-group-triple, 
    .image-group-double, 
    .asymmetric-reversed {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .image-sub-group { width: 100%; }
    .size-large { width: 100%; }
    .recap-block { margin-bottom: 6rem; }
    .recap-gallery { grid-template-columns: 1fr; }
}

hr.section-divider {
    border: none;
    border-top: 1px solid rgba(26, 36, 33, 0.5);
    margin: 6rem 0;
}

p.caption {
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    color: var(--accent-green);
    margin-top: 0.5rem;
}