/* ==========================================================================
   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-dark:   #e2be1c;
    --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.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 320px auto;
    padding: 10% 8%;
    min-height: 300px;
}

.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; }

/* ---------- 7d-2. Collaborator grid — circular photo + name + affiliation ----
   Photos are optional: a card with no <img> falls back to the initials in
   data-initials, so the grid stays even while headshots trickle in.
   -------------------------------------------------------------------------- */
.collab-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 45px 24px;
    margin: 0 0 50px;
}

.collab-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: inherit;
    text-decoration: none;
}

.collab-photo {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #464b58;
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    /* the hover ring is an outline so it sits outside the circle and never
       crops the photo the way a border would */
    outline: 3px solid transparent;
    outline-offset: 5px;
    transition: transform 220ms ease, outline-color 220ms ease, box-shadow 220ms ease;
}
/* initials placeholder — painted under the photo, so it only shows through
   when the card has no <img> at all */
.collab-photo::before {
    content: attr(data-initials);
    font-weight: 700;
    font-size: 2.4em;
    letter-spacing: 1px;
    color: var(--yellow);
    opacity: 0.8;
}
.collab-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
a.collab-card:hover .collab-photo {
    transform: translateY(-4px);
    outline-color: var(--yellow);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
}

.collab-name {
    font-weight: 700;
    font-size: 1.15em;
    line-height: 1.3;
    /* plain-text cards (most alumni) stay light; yellow is reserved for the
       ones that actually link somewhere, matching the old bullet lists */
    color: var(--light);
    margin-bottom: 3px;
    transition: color 0.3s ease;
}
a.collab-card .collab-name { color: var(--yellow); }
a.collab-card:hover .collab-name {
    color: var(--yellow-hover);
    text-decoration: underline;
}

.collab-affil {
    font-size: 0.95em;
    line-height: 1.4;
    color: #c4c9d2;
}

/* ---------- 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;
}
/* whole card is clickable (JS follows the first link) */
.pub-entry-clickable { cursor: pointer; }

.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; }

    /* collaborators: 4 -> 3 across */
    .collab-grid { grid-template-columns: repeat(3, 1fr); }

    .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; }

    .collab-grid { grid-template-columns: repeat(2, 1fr); gap: 35px 20px; }
}

@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; }

    .collab-photo { max-width: 130px; }
    .collab-name { font-size: 1.05em; }
}

/* ==========================================================================
   11. Dark mode — automatic, follows the visitor's OS setting
   --------------------------------------------------------------------------
   Pure CSS, no HTML/JS. The brand yellow (hero, page-hero, footer accent,
   member names) is intentionally kept as-is so the identity survives.
   Notes for future edits: the --dark / --white / --light tokens are named
   by literal color and are used as BOTH ink and surfaces, so they are NOT
   flipped here — instead the text-only gray tokens are lightened (covering
   most body copy automatically) and the specific dark surfaces + dark-ink
   headings are re-pointed explicitly below.
   ========================================================================== */
@media (prefers-color-scheme: dark) {

    /* --- text-only tokens: safe to lighten globally --- */
    :root {
        --text-gray:      #b6bdc7;
        --text-dark-gray: #b6bdc7;
        --link-blue:      #5aa7e6;
        --notice-navy:    #a9c9ff;   /* used as ink almost everywhere; hover-bg override below */
        /* soften every brand yellow (hero banners, member names, footer accent,
           pub border, nav-current, link hovers) so nothing glares on a dark page */
        --yellow:         var(--yellow-dark);
        --yellow-hover:   var(--yellow-dark);
    }

    /* --- page + section surfaces --- */
    body                 { background-color: #121317; }
    .section.light       { background-color: #15171c; }
    /* dim the white hero words ("THE"/"LAB") a touch on the darker yellow banner */
    .hero-title .word-white { color: #e0e0e0; }
    /* blurb icons are <img> SVGs (CSS vars can't reach inside); nudge their baked-in
       brand yellow ~10% darker to match --yellow-dark */
    .blurb-icon img { filter: brightness(0.9); }
    .join-page-body,
    .join-spacer         { background-color: #15171c; }
    .join-chapel-section { box-shadow: inset 0 -200px 0 0 #15171c; }
    .join-text-box       { background-color: #1d2028; box-shadow: 0 15px 45px rgba(0,0,0,0.5); }

    /* --- header + dropdown --- */
    .site-header { background-color: #1a1d23; box-shadow: 0 2px 50px rgba(0,0,0,0.55); }
    .logo img    { filter: invert(1); }   /* black silhouette -> white on dark header */
    .menu-toggle span { background: #ffffff; }   /* burger lines white on dark header */
    .submenu           { background: #22252d; box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.4); }
    .submenu::before   { background: #22252d; box-shadow: -2px -2px 4px rgba(0,0,0,0.2); }
    .submenu li a:hover { background-color: #2b2f39; }

    /* --- dark-ink headings/nav that now sit on dark surfaces --- */
    .main-nav > ul > li > a,
    .submenu li a,
    .blurb h3,
    .member-role,
    .pub-category-title,
    .pub-title,
    .pub-journal,
    .news-title-p,
    .arcethos-content,
    .arcethos-section-title { color: #e7e9ed; }

    /* --- publications cards --- */
    .pub-entry        { background: #1d2028; box-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    .pub-entry:hover  { background: #262a33; box-shadow: 0 8px 24px rgba(0,0,0,0.55); }

    /* --- notice box --- */
    .notice { border-color: #454b57; box-shadow: 0 0 80px 12px rgba(0,0,0,0.6); }
    .notice .notice-link:hover { background-color: #274a8c; color: var(--white); }

    /* --- hairline dividers --- */
    .member,
    .news-row { border-bottom-color: #2a2d35; }
}

/* mobile flyout nav (its own translucent-white bg only exists at ≤767px) */
@media (max-width: 767px) and (prefers-color-scheme: dark) {
    .main-nav { background: rgba(18,19,23,0.97); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
}