/* ==========================================================================
   The Subjectivity Lab — Vanilla replica of subjectivity.sites.northeastern.edu
   Edit freely. Colors live in :root. Section order:
   1. Reset & tokens
   2. Base typography
   3. Layout helpers (container)
   4. Header / navigation
   5. Hero
   6. Light section (notice, lead, blurb grid)
   7. Dark section
   8. Footer
   9. Scroll-triggered animations
   10. Responsive
   ========================================================================== */

/* ---------- 0. Self-hosted fonts ---------- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('fonts/montserrat-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 1. Reset & design tokens ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --yellow:        #FCD21D;
    --yellow-hover:  #fcce00;
    --dark:          #353740;
    --white:         #ffffff;
    --light:         #f7f7f7;
    --text-gray:     #6b7480;   /* 4.7:1 on white — WCAG AA */
    --text-dark-gray:#6b7178;   /* 4.7:1 on the #fafafa pub cards — WCAG AA */
    --link-blue:     #006eb5;
    --footer-blue:   #99ccff;
    --notice-blue:   rgba(81, 166, 232, 0.49);
    --notice-navy:   #000080;

    --font-sans: 'Montserrat', Helvetica, Arial, Lucida, sans-serif;
    --content-max: 1080px;
    --header-h: 80px;       /* approx height of the fixed header */
}

/* ---------- 2. Base typography ---------- */
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background-color: var(--yellow);   /* shows at page edges */
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 14px;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }

/* ---------- 3. Layout helpers ---------- */
.container {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 30px;
}

/* ---------- 4. Header / navigation ---------- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background-color: var(--white);
    box-shadow: 0 2px 50px rgba(0, 0, 0, 0.12);
    transition: opacity 0.5s ease, margin-top 0.5s ease;
}
/* hide on scroll down / show on scroll up — toggled by script.js */
.site-header.hide-header { opacity: 0; margin-top: -200px; }
.site-header.show-header { opacity: 1; margin-top: 0; }

.header-inner {
    display: flex;
    align-items: center;
    justify-content: center;   /* nav sits dead-center in the header */
    position: relative;
    padding: 0 30px;
    min-height: var(--header-h);
}

.logo {
    position: absolute;        /* pin to the extreme left, out of the flex flow */
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding: 1vw 1vw 1vw 0;
}
.logo img { width: 50px; height: 50px; }
.main-nav > ul {
    display: flex;
    align-items: center;
}

.main-nav > ul > li { position: relative; }

.main-nav > ul > li > a {
    display: block;
    padding: 1.6vw 20px 1.4vw;
    font-weight: 600;
    font-size: 20px;
    color: var(--dark);
    letter-spacing: 0.3px;
    transition: color 300ms ease;
}
.main-nav > ul > li > a:hover,
.main-nav > ul > li.current > a {
    color: var(--yellow-hover);
}

/* dropdown submenu — floating white card with soft shadow and a yellow accent bar on hover */
.submenu {
    position: absolute;
    top: calc(100% + 10px);                /* small gap so it reads as a separate card */
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 340px;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
}
/* little arrow pointing up to the parent nav item */
.submenu::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--white);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.04);
}
.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.submenu li a {
    display: block;
    padding: 10px 18px 10px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--dark);
    border-left: 4px solid transparent;
    transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.submenu li a:hover {
    border-left-color: var(--yellow);
    color: var(--yellow-hover);
    background-color: #fafafa;
}

/* mobile burger — hidden on desktop; pinned to the right on mobile */
.menu-toggle {
    display: none;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
}
.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background: var(--dark);
    transition: all 300ms ease;
}

/* ---------- 5. Hero ---------- */
.hero {
    background-color: var(--yellow);
    padding-top: var(--header-h);   /* clear the fixed header */
}
.hero-row {
    background-color: var(--yellow);
    background-image: url('images/half-black-bust-transparent.webp');
    background-position: right 0 bottom 0;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 10% 8%;
    min-height: 500px;
}

.hero-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 4.7em;
    line-height: 1.3em;
    letter-spacing: 1px;
    margin-bottom: 60px;
    text-align: center;
}
.hero-title .word-white { color: var(--white); }
.hero-title .word-dark  { color: var(--dark); }

.hero-tagline {
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.2em;
    color: var(--dark);
    letter-spacing: 3px;
    text-align: center;
    margin-top: -50px;
    padding-bottom: 150px;
}

/* ---------- 6. Light section ---------- */
.section.light {
    background-color: var(--white);
    padding: 70px 0;
}

/* "Our lab is moving!" notice */
.notice {
    max-width: 700px;
    margin: 0 auto;
    padding: 5%;
    background-color: var(--notice-blue);
    border: 7px solid var(--dark);
    box-shadow: 0 0 80px 12px var(--dark);
    color: var(--text-gray);
    font-size: 24px;
    line-height: 1.8em;
    text-align: center;
}
.notice p + p { margin-top: 1em; }
.notice .notice-headline { color: var(--notice-navy); font-weight: 700; }
.notice .notice-link,
.notice .notice-link strong { color: var(--notice-navy); text-decoration: underline; }
.notice .notice-link:hover { background-color: var(--notice-navy); color: var(--white); text-decoration: none; }

/* big lead paragraph below the notice */
.lead {
    max-width: 700px;
    margin: 5% auto 0;
    text-align: center;
    font-size: 24px;
    line-height: 1.8em;
    color: var(--text-gray);
}
.lead-dark { color: var(--light); }
.lead a { text-decoration: underline; }
.lead a:hover { color: var(--yellow-hover); }

/* blurb grid (3 columns) */
.blurb-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 25px 0;
}
/* blurb grid (4 columns) */
.blurb-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 25px 0;
}
.blurb {
    padding: 30px;
    text-align: center;
    font-size: 16px;
    line-height: 1.8em;
    color: var(--text-gray);
}
.blurb-icon {
    width: 50%;
    margin: 0 auto 1em;
}
.blurb-icon img { height: auto; }
.blurb h3 {
    font-weight: 700;
    font-size: 22px;
    line-height: 1.4em;
    color: var(--dark);
    margin-bottom: 0.5em;
}
.blurb p { line-height: 1.8em; }

/* ---------- 7. Dark section ---------- */
.section.dark {
    background-color: var(--dark);
    padding: 70px 0;
}
.blurb-dark { color: var(--light); }
.blurb-dark h3 { color: var(--white); }

/* ---------- 7b. Sub-page hero (yellow banner with a single page title) ---------- */
.page-hero {
    background-color: var(--yellow);
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 60px;
    text-align: center;
}
.page-hero-title {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 4.7em;
    line-height: 1.3em;
    letter-spacing: 1px;
    color: var(--dark);
}

/* ---------- 7c. Team page — members ---------- */
.team-section { padding: 40px 0; }

.member {
    display: grid;
    grid-template-columns: minmax(220px, 280px) 1fr;
    gap: 50px;
    align-items: start;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}
.member:last-of-type { border-bottom: none; }

.member-photo img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 2px 58px rgba(0, 0, 0, 0.3);
}

.member-name {
    font-weight: 700;
    font-size: 3em;
    line-height: 1.1;
    color: var(--yellow);
    margin-bottom: 0.2em;
}

/* inline icon(s) inside a member-role line */ 
.member-role .member-links {
    display: inline-flex;
    vertical-align: top;
    margin-bottom: 0em; 
}

.member-link-icon {
    display: inline;
    height: 1.25em;    
    width: auto;
}

.member-role {
    font-weight: 600;
    font-size: 1.4em;
    color: var(--dark);
    margin-bottom: 1.2em;
}
.member-bio {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-gray);
    text-align: left;
    margin-bottom: 1.4em;
}
.member-bio a { color: var(--link-blue); }
.member-bio a:hover { color: var(--yellow-hover); }

/* row of circular social-link icons */
.member-links, .member-email {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 1em;
}
/* gap fallback for Safari ≤ 14.0 */
.member-links a, .member-email a { margin-right: 14px; }
@supports (gap: 14px) {
    .member-links a, .member-email a { margin-right: 0; }
}
.member-links a img, .member-email a img {
    width: 36px;
    height: 36px;
    transition: transform 200ms ease, filter 200ms ease;
}
.member-links a:hover img, .member-email a:hover img {
    transform: scale(1.1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}
/* the text part of the email line (second link, after the icon link) */
.member-email a + a {
    color: var(--text-gray);
    font-size: 16px;
}
.member-email a + a:hover { color: var(--link-blue); }
.member-email a.email-neu:hover { color: #CC0000; }

/* ---------- 7d. Team page — collaborators & alumni (dark section) ---------- */
.people-list-section { padding: 70px 0 90px; }

.people-list-title {
    font-weight: 700;
    font-size: 2.5em;
    color: var(--light);
    margin: 30px 0 20px;
}
.people-list-title:first-of-type { margin-top: 0; }

.people-list {
    list-style: disc outside;
    color: var(--light);
    font-size: 1.15em;
    line-height: 1.4;
    margin-left: 20px;
    margin-bottom: 30px;
}
/* hanging indent: text-indent cancels padding-left on the first line only,
   so the bullet stays put and just the wrapped line shifts right.
   line-height is kept tight (controls wrap-to-wrap spacing) and li padding
   adds the extra breathing room between separate bullets. */
.people-list li {
    padding: 2px 5px;
    padding-left: 20px;
    text-indent: -10px;
}
.people-list a { color: var(--yellow); transition: color 0.3s ease; }
.people-list a:hover { color: var(--yellow-hover); text-decoration: underline; }

/* ---------- 7e. Publications page ---------- */
.section.pub-section {
    padding: 60px 0 80px;
    /* background-color: var(--dark); */
}

.pub-category { margin-bottom: 60px; }
.pub-category:last-child { margin-bottom: 0; }

.pub-category-title {
    font-weight: 700;
    font-size: 1.75em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--dark);
    padding-bottom: 0;
    margin-bottom: 30px;
}

.pub-list { list-style: none; }

.pub-entry {
    padding: 20px 24px;
    margin-bottom: 30px;
    background: #fafafa;
    border-left: 4px solid var(--yellow);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.30);
    font-size: 1.4em;
    line-height: 1.75;
    color: var(--text-dark-gray);
    transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease;
}
.pub-entry:last-child { margin-bottom: 0; }
.pub-entry:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    background: #ffffff;
}

.pub-author {
    font-weight: normal;
    color: var(--text-dark-gray);
}
.pub-title {
    font-weight: 500;
    color: var(--dark);
    font-size: 1.2em;
}

.pub-journal {
    font-weight: 400;
    font-style: italic;
    color: var(--dark);
}

.pub-links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 7px;
}
/* gap fallback for Safari ≤ 14.0 */
.pub-links .pub-badge { margin-right: 5px; margin-bottom: 5px; }
@supports (gap: 5px) {
    .pub-links .pub-badge { margin-right: 0; margin-bottom: 0; }
}

.pub-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    background: var(--dark);
    color: var(--white);
    transition: background 200ms ease, color 200ms ease;
    line-height: 1.6;
}
/* .pub-badge:hover         { background: var(--yellow); color: var(--dark); } */
.pub-badge-pdf           { background: #c03a2bbb; }
.pub-badge-pdf:hover     { background: #c03a2b; }
.pub-badge-doi           { background: #16a085bb; }
.pub-badge-doi:hover     { background: #16a085; }
.pub-badge-osf           { background: #1a7dbfbb; }
.pub-badge-osf:hover     { background: #1a7dbf; }
.pub-badge-github        { background: #444b; }
.pub-badge-github:hover  { background: #444; }
.pub-badge-demo          { background: #27ae60bb; }
.pub-badge-demo:hover    { background: #27ae60; }
.pub-badge-related       { background: #777b; }
.pub-badge-related:hover { background: #777; }
.pub-badge-html          { background: #9d58d6bb; }
.pub-badge-html:hover    { background: #9d58d6; }

/* ---------- 7f. News page ---------- */
.news-section { padding: 0 0 80px; }

/* two-column row: text | image  OR  image | text */
.news-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0 40px;
    padding: 54px 0;
    border-bottom: 1px solid #eee;
}
.news-row:last-child { border-bottom: none; }

/* large bold title (mirrors Divi text module <p>) */
.news-title-p {
    font-weight: 700;
    font-size: 26px;
    line-height: 1.4;
    color: var(--dark);
    margin-bottom: 12px;
}

/* category label (mirrors Divi CTA h2) */
.news-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--text-gray);
    margin-bottom: 10px;
}

/* description body */
.news-body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-gray);
    margin-bottom: 14px;
}
.news-body a { color: var(--link-blue); text-decoration: underline; }
.news-body a:hover { color: var(--yellow-hover); text-decoration: none; }

/* Divi-style promo button */
.news-btn {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--link-blue);
    border: 2px solid var(--link-blue);
    padding: 0.4em 1.4em;
    margin-top: 6px;
    transition: background 200ms ease, color 200ms ease;
}
.news-btn:hover { background: var(--link-blue); color: var(--white); }

/* media column */
.news-col-media { width: 100%; }
.news-col-media > img,
.news-col-media > video { width: 100%; height: auto; display: block; }
.news-col-media .news-img-75 { width: 75%; margin: auto; }

/* gallery grid for multi-photo items (VSS, Windows, ASSC) */
.news-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.news-gallery img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4/3; display: block; }
.news-gallery.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 980px) {
    .news-row { grid-template-columns: 1fr; gap: 24px 0; }
    /* media always appears above text on mobile */
    .news-col-media { order: -1; }
    .news-title-p { font-size: 22px; }
}

/* ---------- 7g. Join Us page ---------- */

/* White body below hero — padding-top keeps the gap white (margin would collapse) */
.join-page-body {
    background-color: #ffffff;
    padding-top: 5%;
}

/* Chapel section: inset 10% on sides; top spacing handled by parent padding */
.join-chapel-section {
    background-image: url('images/sunrise-chapel-quad.webp');
    background-size: cover;
    background-position: center top;
    margin: 0 10%;
    box-shadow: inset 0px -200px 0px 0px #ffffff;
}

/* Row: 3/5 text col + 2/5 empty col */
.join-content-row {
    display: grid;
    grid-template-columns: 3fr 2fr;
    padding-top: 11px;
}

/* Both columns: 20% top padding reveals chapel image above the text card */
.join-col-text,
.join-col-empty {
    padding-top: 20%;
}

/* Text card: centered in its column, 85% wide at desktop */
.join-text-box {
    background-color: var(--light);
    padding: 9.6% 10% 10%;
    box-shadow: 0px 15px 45px 0px rgba(0, 0, 0, 0.15);
    max-width: 72%;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.9em;
    color: var(--text-gray);
}

.join-text-box h2 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 3em;
    line-height: 1.3em;
    text-align: center;
    color: var(--notice-navy);
    margin-bottom: 0.6em;
}

.join-text-box p { line-height: 1.9em; }

.join-text-box p.navy {
    font-size: 18px;
    color: var(--notice-navy);
}

/* White spacer between chapel and footer */
.join-spacer { padding: 60px 0; background-color: #ffffff; }

@media (max-width: 980px) {
    .join-chapel-section { margin: 0 5%; }
    .join-text-box { max-width: 100%; }
}

@media (max-width: 767px) {
    .join-chapel-section { margin: 0; }
    .join-content-row { grid-template-columns: 1fr; }
    .join-col-empty { display: none; }
    .join-col-text { padding-top: 10%; }
    .join-text-box { max-width: 94%; }
    .join-text-box h2 { font-size: 2.2em; }
}

/* ---------- 7h. ARC-ETHOS research page ---------- */

.arcethos-hero {
    position: relative;
    height: 35em;
    max-height: 500px;
    background-image: url('images/arcethos-hero.avif');
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #000;
    display: flex;
    align-items: center;
    padding-top: var(--header-h);
}

.arcethos-hero-overlay {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.44);
    padding: 20px 30px;
    text-align: center;
}

.arcethos-hero-overlay h1 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 54px;
    color: #F7F7F7;
    line-height: 1.3em;
    max-width: var(--content-max);
    margin: 0 auto;
}

.arcethos-content {
    padding-top: 50px;
    padding-bottom: 60px;
    font-size: 1.4em;
    color: var(--dark);
}

.arcethos-content p,
.arcethos-content ul { margin-bottom: 1.2em; }

.arcethos-section-title {
    font-weight: 700;
    font-size: 32px;
    text-align: center;
    color: var(--dark);
    margin: 0.6em 0 1em;
}

.arcethos-body {
    font-size: 21px;
    text-align: justify;
    hyphens: auto;
    font-weight: 400;
    line-height: 1.5;
}

.arcethos-content a { color: var(--link-blue); text-decoration: underline; }
.arcethos-content a:hover { color: var(--yellow-hover); text-decoration: none; }

.arcethos-content ul { list-style: disc; padding-left: 1.4em; }

@media (max-width: 980px) {
    .arcethos-hero-overlay h1 { font-size: 49px; }
}

@media (max-width: 767px) {
    .arcethos-hero { height: auto; min-height: 35em; }
    .arcethos-hero-overlay h1 { font-size: 32px; }
    .arcethos-content { font-size: 1.2em; }
}

/* ---------- 8. Footer ---------- */
.site-footer {
    background-color: var(--dark);
     box-shadow: 0 -1px 32px 0 var(--yellow), 0 20px 50px rgba(0, 0, 0, 0.12);
    position: relative;
    z-index: 1;
}
.footer-inner {
    padding: 30px;
    text-align: center;
    color: var(--light);
}
.footer-title {
    font-weight: 700;
    font-size: 1.8em;
    color: var(--yellow);
    padding: 20px;
}
.footer-address {
    font-size: 1.2em;
    line-height: 1.6;
    padding-bottom: 25px;
}
.footer-address p { padding: 4px 0; }
.footer-address a { color: var(--light); transition: color 0.3s ease; }
.footer-address a:hover { color: var(--yellow); }
.footer-address .dot { color: var(--light); margin: 0 4px; }
.footer-soon, .footer-soon strong { color: var(--footer-blue); }
.footer-soon:hover { text-decoration: underline; }
.footer-address a.footer-uni { color: var(--footer-blue); font-weight: 400; }
/* fake the bold on hover with a same-color text-shadow.
   Text width stays identical to the non-hover state, so the surrounding dots don't shift. */
.footer-address a.footer-uni:hover {
    color: var(--footer-blue);
    font-weight: 400;
    text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}

/* ---------- 9. Scroll-triggered animations ---------- */
/* Elements start hidden, become .visible via IntersectionObserver in script.js */
.animate {
    opacity: 0;
    transition: opacity 1000ms ease-in-out, transform 1000ms ease-in-out;
    transition-delay: var(--delay, 150ms);
    will-change: opacity, transform;
}
.animate.fade        { /* opacity only */ }
.animate.slide-top   { transform: translateY(-30px); }
.animate.slide-bottom{ transform: translateY(30px); }
.animate.zoom        { transform: scale(0.96); }
.animate.zoom-top    { transform: translateY(-20px) scale(0.96); }

.animate.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Allow users with reduced-motion preference to skip animations */
@media (prefers-reduced-motion: reduce) {
    .animate { opacity: 1; transform: none; transition: none; }
}

/* ---------- 10. Responsive ---------- */
@media (max-width: 980px) {
    .hero-title { font-size: 3em; }
    .hero-tagline { font-size: 1em; padding-bottom: 80px; margin-top: -20px; }
    .hero-row { background-image: none; padding-top: 100px; }

    .blurb-grid-3 { grid-template-columns: 1fr; gap: 0; }
    .blurb-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .blurb { max-width: 600px; margin: 0 auto; }

    .lead, .notice { font-size: 20px; }

    /* team page: stack photo above bio */
    .member { grid-template-columns: 1fr; gap: 25px; }
    .member-photo { max-width: 280px; margin: 0 auto; }
    .member-name { font-size: 2.4em; text-align: center; }
    .member-role { text-align: center; }
    .member-links, .member-email { justify-content: flex-start; }

    .page-hero-title { font-size: 3em; }
}

@media (max-width: 767px) {
    .menu-toggle { display: block; }
    .logo { border-right: none; }

    .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        padding: 10px 20px;
    }
    .main-nav.open { display: block; }
    .main-nav > ul { flex-direction: column; align-items: stretch; }
    .main-nav > ul > li > a { padding: 12px 16px; }

    /* submenu inline on mobile rather than dropdown */
    .submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        padding-left: 18px;
        min-width: 0;
    }

    .hero-title { font-size: 2.2em; }
    .hero-tagline { display: none; }
    .hero-row { min-height: auto; padding: 15% 6% 20px; }

    .footer-address { font-size: 1em; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.8em; letter-spacing: 1px; }
    .blurb-grid-4 { grid-template-columns: 1fr; }
    .lead, .notice { font-size: 18px; }
}