/* if you change css, it's recommend to not delete the line in the files, but overwrite it here.
For example, if somewhere is a line: .redButton{ background-color:#C33; }, you can overwrite it here to .redButton{ background-color:#999; } and leave the other line
this is easier for upgrading ¨*/

/* Modern type system — apply IBM Plex Sans to form controls too (they don't inherit by default) */
html,
body,
input,
select,
textarea,
button {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, Tahoma, Helvetica, sans-serif;
}

/* DUTH logo in the header — placed on a white plate so the official (black + blue) artwork stays legible on the dark header */
.duth-logo {
    float: left;
    display: block;
    background: #fff;
    border-radius: 6px;
    padding: 7px 11px;
    margin: 4px 14px 4px 5px;
    line-height: 0;
}

.duth-logo img {
    height: 64px;
    width: auto;
    display: block;
    border: none;
}

/* Site footer — professional, university-style contact band */
.site-footer {
    clear: both;
    background-color: #0a0b0d;
    color: #b8bec6; /* fixed light text — the footer is always dark in both themes */
    margin-top: 50px;
}

/* thin tricolor brand bar (the VCG green / orange / blue identity) */
.site-footer-accent {
    height: 3px;
    background: linear-gradient(90deg,
        var(--tile-green) 0 33.34%,
        var(--tile-orange) 33.34% 66.67%,
        var(--tile-blue) 66.67% 100%);
}

.site-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 36px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 40px;
}

.site-footer h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f3f4f6;
    margin: 0 0 14px 0;
}

.site-footer p {
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0 0 10px 0;
    color: #b8bec6;
}

.footer-tagline {
    max-width: 42ch;
}

.footer-affil {
    color: #8d949c;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 9px;
}

.site-footer a {
    color: #cdd2d8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--tile-orange);
}

.site-footer .footer-map-link {
    color: #b8bec6;
    border-bottom: 1px dotted #586069;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer .footer-map-link:hover {
    color: var(--tile-orange);
    border-bottom-color: var(--tile-orange);
}

.site-footer-bottom {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #8d949c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Floating "contact us" button, top-right */
#contact-float {
    position: fixed;
    top: 105px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--tile-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#contact-float:hover {
    transform: scale(1.08);
    background-color: var(--tile-orange);
    color: #fff;
}

#contact-float svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Homepage "Research" anchor tile — clean dark gradient (replaces the old wordcloud image) */
.tile.research-anchor {
    background:
        radial-gradient(130% 110% at 78% 12%, rgba(225, 90, 26, 0.45), transparent 60%),
        radial-gradient(120% 100% at 12% 95%, rgba(28, 111, 181, 0.40), transparent 55%),
        #14110d !important;
}

.tile.research-anchor .tileTitle {
    font-size: 30px;
}

.tile.research-anchor .tileDesc {
    color: #d8d0c2;
    line-height: 1.5;
}

/* Compact News/Events live tiles — smaller label + clamp the long real headlines cleanly */
.tile.live-mini .tileTitle {
    font-size: 17px;
    margin-top: 2px;
}

.tile.live-mini .livetile {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Welcome hero — clean headline + stats line (Layout B), no icon */
.tile.welcome-hero .tileTitle {
    font-size: 21px;
    line-height: 1.22;
    margin: 16px 18px 0 16px;
    max-width: 430px;
}

.tile.welcome-hero .tileDesc {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    opacity: 0.92;
}

.orange {
    color: var(--tile-orange);
}

.blue {
    color: var(--tile-blue);
}

.green {
    color: var(--tile-green);
}

/* Research page image styles */
figure.images {
    margin: 15px;
    border: 1px solid var(--tile-green);
    max-width: 30%;
}

figure.images img {
    width: 100%;
    display: block;
}

figure.images.float-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

figure.images.float-left {
    float: left;
    margin-right: 20px;
    margin-left: 0;
}

/* Clear floats after content sections */
hr {
    clear: both;
}

/* Research page text alignment */
#content p,
#content li {
    text-align: justify;
}

/* Publications slider styles */
.sliderWrapper {
    margin-bottom: 15px;
}

.sliderHead {
    cursor: pointer;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

.sliderHead:hover {
    background-color: #e9e9e9;
}

.sliderHead h2 {
    margin: 0;
    display: inline-block;
}

.sliderImage {
    vertical-align: middle;
    margin-right: 10px;
    transition: transform 0.3s;
}

.sliderContent {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-top: none;
}

.sliderContent ol {
    margin: 0;
    padding-left: 30px;
}

.sliderContent li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Modern Card Layout for News and Events */
.card-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for all breakpoints */
    gap: 25px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.card {
    background-color: var(--bg-page-content);
    border: 1px solid var(--border-color);
    padding: 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--tile-green); /* Green accent by default */
    opacity: 0.7;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
    border-color: var(--border-light);
}

.card-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    margin: 0 0 8px 0;
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);
}

.card-title a {
    color: var(--text-main);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--tile-green);
}

.card-meta {
    font-size: 1em; /* Increased font size */
    color: var(--text-content);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.card-date {
    color: var(--tile-green);
    font-weight: bold;
}

.card-content {
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--text-content);
    flex-grow: 1;
}

.card-content p {
    margin-bottom: 10px;
}

.card-content a {
    color: var(--tile-orange);
    text-decoration: none;
}

.card-content a:hover {
    text-decoration: underline;
}

/* Event specific styles */
.card.event-card::before {
    background-color: var(--tile-orange); /* Orange accent for events */
}

.card.event-card .card-date {
    color: var(--tile-orange);
}

.event-location-wrapper {
    margin-top: 10px;
    font-size: 1em; /* Increased font size */
    color: var(--text-content);
    display: flex;
    align-items: flex-start;
}

.event-location-icon {
    margin-right: 6px;
    color: var(--tile-orange);
}

.event-links {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* Member Card Styles */
.member-card {
    flex-direction: row; /* Image left, text right */
    align-items: center;
    gap: 20px;
}

.member-card::before {
    background-color: var(--tile-blue); /* Blue accent */
}

.member-image-wrapper {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tile-blue);
}

.member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    flex-grow: 1;
}

.member-name {
    font-size: 1.5em;
    color: var(--text-main);
    margin: 0 0 5px 0;
    font-weight: 600;
}

.member-role {
    font-size: 1.1em;
    color: var(--tile-orange);
    margin-bottom: 8px;
    font-style: italic;
}

.member-credentials {
    font-size: 0.95em;
    color: var(--text-content);
    margin-bottom: 10px;
}

.member-contact {
    font-size: 0.95em;
    color: var(--text-content);
}

.member-contact a {
    color: var(--tile-green);
    text-decoration: none;
}

/* Contact details are served as images (see scripts/generate_contact_images.py) so
   address-harvesting bots can't read them. Rendered larger than the surrounding
   text for legibility; the source PNGs are high-res, so they stay crisp. */
.contact-img {
    height: 1.45em;
    width: auto;
    vertical-align: middle;
}

/* The footer sits on a near-black background, so flip the dark ink to light there. */
.site-footer .contact-img {
    filter: invert(1);
}

.member-contact a:hover {
    text-decoration: underline;
}

/* Research Card Styles — the whole card is a link (clicking anywhere goes to
   that research area, same as "Read more") */
.card.research-card::before {
    background-color: var(--tile-blue); /* Blue accent */
}

a.card.research-card { text-decoration: none; color: inherit; cursor: pointer; }
.research-card .card-title { transition: color 0.15s ease; }
.research-card:hover .card-title { color: var(--tile-blue); }
.research-card .card-readmore { color: var(--tile-orange); }
.research-card:hover .card-readmore { text-decoration: underline; }

/* Publication Styles */
.publication-section {
    margin-bottom: 0;
}

.publication-list {
    list-style: decimal;
    padding-left: 3.2em;
    margin: 0;
}

/* Hidden by the year/author/text search */
.publication-item.is-hidden {
    display: none;
}

/* Sequential number per category — the <ol reversed> makes the newest paper
   show the category total (e.g. the top Journal shows 98). */
.publication-item::marker {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95em;
}

/* ===================== Publication bookmarks (tabs) =====================
   One bookmark per publication type. The selected one is the only list in the
   document, so the page is never an endless scroll through the journals. The
   active bookmark overlaps the strip's bottom rule by 1px so it reads as a
   folder tab attached to the panel below. */
.pub-tabs {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 4px;
    margin: 22px 0 0;
    padding: 10px 0 0;
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-color);
}

.pub-tab {
    position: relative;
    margin: 0;
    padding: 11px 20px 10px;
    background-color: transparent;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Coloured cap that only shows on the selected bookmark */
.pub-tab::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background-color: var(--tile-blue);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pub-tab:hover {
    background-color: rgba(255, 255, 255, 0.6);
    color: var(--text-main);
}

.pub-tab:focus-visible {
    outline: 2px solid var(--tile-blue);
    outline-offset: -3px;
}

.pub-tab.is-active {
    z-index: 1;
    margin-bottom: -1px;
    padding-bottom: 11px;
    background-color: var(--bg-page-content);
    border-color: var(--border-color);
    color: var(--text-main);
}

.pub-tab.is-active::before {
    opacity: 1;
}

.pub-tab-count {
    display: inline-block;
    min-width: 1.4em;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 20px;
    background-color: rgba(0, 0, 0, 0.07);
    color: var(--text-muted);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    vertical-align: 1px;
}

.pub-tab.is-active .pub-tab-count {
    background-color: var(--tile-blue);
    color: #fff;
}

/* A bookmark whose list has no matches left for the current search */
.pub-tab.is-empty:not(.is-active) {
    opacity: 0.45;
}

/* The folder the selected bookmark opens onto */
.pub-panel {
    background-color: var(--bg-page-content);
    border: 1px solid var(--border-color);
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 22px 24px 26px;
    margin-bottom: 40px;
}

/* The controls sit bare on the folder — no box, just the fields and a hairline
   separating them from the list. */
.pub-panel .searchform {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 0;
    padding: 0 0 18px;
    margin: 0 0 6px;
    gap: 10px 18px;
}

.pub-panel .searchform input[type="search"] {
    flex-grow: 0;
    width: 260px;
    min-width: 0;
}

.pub-empty {
    margin: 26px 0 10px;
    color: var(--text-muted);
    font-size: 14px;
}

/* --- The chronological "All" bookmark --- */
.pub-year-group.is-hidden {
    display: none;
}

/* Sticks under the bookmark strip so the year you are reading stays named while
   you scroll. --pub-tabs-h is measured in JS, with a sane fallback. */
.pub-year {
    position: sticky;
    top: var(--pub-tabs-h, 50px);
    z-index: 5;
    margin: 0;
    padding: 14px 0 8px;
    background-color: var(--bg-page-content);
    border-bottom: 2px solid var(--border-color);
    color: var(--text-main);
    font-size: 1.45em;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pub-year-group + .pub-year-group {
    margin-top: 18px;
}

.pub-list-plain {
    list-style: none;
    padding-left: 0;
}

/* Which kind of publication an entry is — the All list is grouped by year, so
   the type is the useful label there, standing in for the year badge. */
.publication-type {
    display: inline-block;
    min-width: 92px;
    margin-right: 10px;
    padding: 2px 9px;
    border-radius: 4px;
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    vertical-align: middle;
}

.pub-type--journal {
    background-color: var(--tile-green);
}

.pub-type--conference {
    background-color: var(--tile-blue);
}

.pub-type--book {
    background-color: var(--tile-orange);
}

.pub-type--other {
    background-color: #6c757d;
}

/* Inside the folder the entries read as a list rather than a stack of cards —
   at 154 conferences, boxed cards are far too much visual noise. */
.publication-item {
    padding: 16px 0 16px 14px;
    margin: 0;
    border-bottom: 1px solid var(--border-color);
    box-shadow: inset 3px 0 0 var(--tile-green);
    transition: background-color 0.15s ease;
}

.publication-item:last-child {
    border-bottom: 0;
}

.publication-item:hover {
    background-color: var(--box-content-bg);
}

.publication-year {
    display: inline-block;
    background-color: var(--tile-green);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;
}

.publication-content {
    font-size: 1.1em;
    color: var(--text-content);
    line-height: 1.6;
}

.publication-title {
    font-weight: bold;
    color: var(--text-main);
}

.publication-authors {
    color: var(--text-muted);
}

.publication-venue {
    font-style: italic;
    color: var(--tile-orange);
}

/* "Read here" link button under publications that have a URL/DOI */
.pub-read {
    margin-top: 10px;
}

.pub-read-link {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tile-blue);
    text-decoration: none;
    border: 1px solid var(--tile-blue);
    border-radius: 2px;
    padding: 4px 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pub-read-link:hover {
    background-color: var(--tile-blue);
    color: #fff;
}

/* ===================== Research-led landing (Direction A) ===================== */
/* Text top navigation */
#nav { float: right; margin-top: 14px; max-width: 680px; text-align: right; }
#nav .navItem {
    display: inline-block;
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#nav .navItem:hover { color: var(--text-main); }
#nav .navItem.navActive { color: var(--text-main); border-bottom-color: var(--nav-active-border); }

#vcg-landing { padding: 6px 0 24px; }

#vcg-landing .vcg-section { margin: 0 0 36px; }
#vcg-landing .vcg-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#vcg-landing .vcg-section-head h2 { font-size: 19px; font-weight: 600; color: var(--text-main); margin: 0; }
#vcg-landing .vcg-section-head a { font-size: 13px; color: var(--text-link); text-decoration: none; white-space: nowrap; }
#vcg-landing .vcg-section-head a:hover { color: var(--text-link-hover); }

/* Research areas is the homepage's main event: give its heading and carousel
   figure noticeably more presence than the other sections below it. */
#vcg-research .vcg-section-head h2 { font-size: 27px; letter-spacing: -0.01em; }
#vcg-research .vcg-section-head a { font-size: 14px; }

/* Research-area cards */
/* Research areas — figure + text carousel */
#vcg-landing .vcg-rcarousel { position: relative; }
#vcg-landing .vcg-rc-viewport { overflow: hidden; }
#vcg-landing .vcg-rc-track { display: flex; transition: transform 0.8s ease-in-out; }
/* The whole slide is one link (clicking anywhere — image, title, description —
   goes to the research area, same as "Read more") */
#vcg-landing .vcg-rc-slide { flex: 0 0 100%; display: flex; align-items: center; gap: 38px; padding: 4px 2px; color: inherit; text-decoration: none; cursor: pointer; }
#vcg-landing .vcg-rc-fig { flex: 0 0 44%; display: block; overflow: hidden; }
#vcg-landing .vcg-rc-fig img { display: block; width: 100%; height: 380px; object-fit: cover; transition: transform 0.25s ease; }
#vcg-landing .vcg-rc-slide:hover .vcg-rc-fig img { transform: scale(1.03); }
/* Text panel: pushed right of the image with generous breathing room, and a
   left accent rule so it reads as its own deliberate block rather than
   just "whatever space was left over". */
#vcg-landing .vcg-rc-text { flex: 1 1 auto; min-width: 0; display: block; padding-left: 30px; border-left: 2px solid var(--border-color); }
#vcg-landing .vcg-rc-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tile-blue); margin: 0 0 8px; }
#vcg-landing .vcg-rc-text h3 { font-size: 25px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); margin: 0 0 14px; transition: color 0.15s ease; }
#vcg-landing .vcg-rc-slide:hover .vcg-rc-text h3 { color: var(--text-link); }
#vcg-landing .vcg-rc-text p { font-size: 15px; line-height: 1.72; color: var(--text-content); margin: 0 0 18px; max-width: 54ch; }
#vcg-landing .vcg-rc-link { display: inline-block; font-size: 14px; font-weight: 500; color: var(--text-link); transition: color 0.15s ease; }
#vcg-landing .vcg-rc-slide:hover .vcg-rc-link { color: var(--text-link-hover); }
#vcg-landing .vcg-rc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
#vcg-landing .vcg-rc-dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(7, 98, 173, 0.3); transition: background 0.15s ease, transform 0.15s ease; }
#vcg-landing .vcg-rc-dot:hover { background: rgba(7, 98, 173, 0.55); }
#vcg-landing .vcg-rc-dot.is-active { background: #0762ad; transform: scale(1.15); }

/* Projects — slow continuous carousel */
#vcg-landing .vcg-marquee { overflow: hidden; padding: 16px 0; }
#vcg-landing .vcg-track { display: flex; width: max-content; animation: vcg-scroll 45s linear infinite; }
#vcg-landing .vcg-marquee:hover .vcg-track,
#vcg-landing .vcg-marquee:focus-within .vcg-track { animation-play-state: paused; }
#vcg-landing .vcg-track-set { display: flex; align-items: center; }
#vcg-landing .vcg-proj { display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 11px; width: 190px; padding: 0 20px; color: var(--text-muted); font-size: 12.5px; text-decoration: none; cursor: pointer; }
#vcg-landing .vcg-proj img { max-height: 66px; max-width: 154px; width: auto; object-fit: contain; }
#vcg-landing .vcg-proj span { text-align: center; line-height: 1.3; }
#vcg-landing .vcg-proj:hover { color: var(--text-main); }
@keyframes vcg-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* News + events */
#vcg-landing .vcg-news-grid { display: grid; grid-template-columns: minmax(0, 560px); justify-content: center; gap: 22px; }
#vcg-landing .vcg-news-col { border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 20px 16px; background: var(--bg-page-content); }
#vcg-landing .vcg-news-item { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border-color); text-decoration: none; }
#vcg-landing .vcg-news-item:last-child { border-bottom: 0; }
#vcg-landing .vcg-news-item time { flex: none; min-width: 88px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#vcg-landing .vcg-news-item span { font-size: 13.5px; line-height: 1.4; color: var(--text-content); }
#vcg-landing .vcg-news-item:hover span { color: var(--text-main); }
#vcg-landing .vcg-empty { font-size: 13px; color: var(--text-muted); }

@media (max-width: 760px) {
    #nav { float: none; text-align: left; margin-top: 8px; }
    #vcg-landing .vcg-rc-slide { flex-direction: column; align-items: stretch; gap: 16px; }
    #vcg-landing .vcg-rc-fig { flex-basis: auto; }
    #vcg-landing .vcg-rc-fig img { height: 210px; }
    #vcg-landing .vcg-rc-text { padding-left: 0; border-left: 0; }
    #vcg-landing .vcg-rc-text h3 { font-size: 20px; }
    #vcg-research .vcg-section-head h2 { font-size: 21px; }
    #vcg-landing .vcg-news-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #vcg-landing .vcg-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
    #vcg-landing .vcg-track-set { flex-wrap: wrap; justify-content: center; }
    #vcg-landing .vcg-track-set[aria-hidden="true"] { display: none; }
}

/* ===================== Wider, modern header ===================== */
#wrapper { margin: 0; }
#headerWrapper { position: relative; min-height: 78px; }
/* Full-width header: DUTH logo at the far left with the title right beside it, nav at the far right */
#header { max-width: none; margin: 0; padding: 0 30px; display: flex; align-items: center; gap: 14px; box-sizing: border-box; }
#contentWrapper { max-width: 1300px; }
/* Landing page gets a wider column than the rest of the site — it has room-filling
   sections (hero, carousel, marquee) rather than dense reading text. */
body.is-home { --vcg-home-width: 1650px; }
body.is-home #contentWrapper { max-width: var(--vcg-home-width); }

.duth-logo { position: static; transform: none; float: none; margin: 0; flex: none; }
.duth-logo img { height: 50px; display: block; }

#headerTitles { float: none; flex: none; }
#header h1 { margin: 0; line-height: 1; }
#header h1 a { font-size: 25px; font-weight: 600; white-space: nowrap; }

#nav { position: static; float: none; right: auto; bottom: auto; margin: 0 0 0 auto; border: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
#nav .navItem { height: auto; width: auto; min-width: 0; background-color: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin: 0; padding: 8px 12px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-content); }
#nav .navItem:hover { background-color: transparent; color: var(--text-main); }
#nav .navItem.navActive { color: var(--text-main); border-bottom: 2px solid var(--nav-active-border); padding-bottom: 8px; }

@media (max-width: 760px) {
    #header { flex-wrap: wrap; gap: 10px; padding: 6px 18px; }
    #nav { margin-left: 0; justify-content: flex-start; width: 100%; }
}

/* ===================== Landing members (current + alumni) ===================== */
#vcg-landing .vcg-members-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 14px; text-align: center; }
#vcg-landing .vcg-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
#vcg-landing .vcg-member { display: flex; flex-direction: column; align-items: center; width: 112px; text-decoration: none; }
#vcg-landing .vcg-member-photo { width: 84px; height: 84px; border-radius: 50%; background-size: cover; background-position: center top; background-color: var(--box-content-bg); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: border-color 0.15s ease, transform 0.15s ease; }
#vcg-landing .vcg-member:hover .vcg-member-photo { border-color: var(--tile-blue); transform: translateY(-2px); }
#vcg-landing .vcg-member-initials { font-size: 26px; font-weight: 600; color: var(--text-muted); }
#vcg-landing .vcg-member-name { margin-top: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--text-main); }
#vcg-landing .vcg-member:hover .vcg-member-name { color: var(--tile-blue); }
#vcg-landing .vcg-member-role { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--text-content); }
#vcg-landing .vcg-members-alumni { gap: 18px 14px; }
#vcg-landing .vcg-members-alumni .vcg-member { width: 96px; }
#vcg-landing .vcg-members-alumni .vcg-member-photo { width: 64px; height: 64px; }
#vcg-landing .vcg-members-alumni .vcg-member-initials { font-size: 20px; }

/* Anchored member on the members page sits a little below the very top */
.member-card { scroll-margin-top: 24px; }

/* Project logo grid — modern presentation of the real project logos */
.project-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0 40px 0;
}

.project-logo-card {
    background-color: #fff; /* logos read correctly on white in both themes */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 24px 18px 16px 18px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
}

.project-logo-card img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

.project-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #333;
}

/* Logo cards are clickable links to each project's detail page */
.project-logo-card,
.project-logo-card:hover {
    text-decoration: none;
    cursor: pointer;
}

/* Project detail page */
.project-back {
    margin: 0 0 4px 0;
    font-size: 13px;
}

.project-detail-logo {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 28px;
    margin: 16px 0 24px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 380px;
}

.project-detail-logo img {
    max-width: 100%;
    max-height: 130px;
    width: auto;
    object-fit: contain;
}

/* Research showcase (Autonomous Driving / Precision Agriculture) */
.ad-banner { margin: 18px 0 26px; overflow: hidden; }
.ad-banner img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
/* Autonomous-driving banner (the HAV car): capped to a comfortable centred size */
.ad-banner:not(.pa-banner) img { max-width: 820px; max-height: 340px; margin-left: auto; margin-right: auto; }
.ad-lead { font-size: 15px; line-height: 1.7; color: var(--text-content); max-width: 880px; margin: 18px 0 26px; }

/* Intro: lead text with the concept illustration floated beside it */
.ad-intro { margin-bottom: 30px; }
.ad-intro::after, .ad-topic::after { content: ""; display: table; clear: both; }

/* Floated figure beside text (same idea as the other research areas) */
.ad-aside { float: right; width: 42%; max-width: 460px; margin: 5px 0 16px 30px; }
.ad-aside .ad-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ad-aside figure { margin: 0; }
.ad-aside img { display: block; width: auto; max-width: 100%; height: auto; max-height: 360px; margin: 0 auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.ad-aside .ad-duo img { width: 100%; max-height: none; }
.ad-aside .ad-cap { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-top: 5px; }
.ad-aside.concept figcaption { font-size: 11.5px; font-style: italic; color: var(--text-muted); text-align: center; margin-top: 7px; }

.ad-topics { display: flex; flex-direction: column; gap: 30px; }
.ad-topic { padding-bottom: 30px; border-bottom: 1px solid var(--border-color); }
.ad-topic:last-child { border-bottom: none; padding-bottom: 0; }
.ad-topic h2 { font-size: 20px; font-weight: 600; color: var(--text-main); margin: 0 0 10px; }
.ad-topic p { font-size: 14px; line-height: 1.65; color: var(--text-content); margin: 0 0 12px; max-width: 880px; }
.ad-topic .ad-pub { display: flow-root; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); background: var(--box-content-bg); border-left: 3px solid var(--tile-blue); padding: 10px 13px; border-radius: 0 4px 4px 0; margin: 16px 0 0; max-width: 860px; }
.ad-pub-label { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700; color: var(--tile-blue); margin-bottom: 4px; }
.ad-topic .ad-pub a { color: var(--tile-blue); font-weight: 600; }

/* Full-width figures (wide diagrams / comparisons), cleared below any float */
.ad-figs { display: flex; flex-direction: column; gap: 16px; align-items: center; clear: both; margin-top: 18px; }
.ad-figs figure { margin: 0; width: 100%; display: flex; justify-content: center; }
.ad-figs img { display: block; width: auto; max-width: 100%; max-height: 460px; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.13); }

/* Full-width grids (orthomap 2x2 / vegetation pairs / synthetic) */
.ad-grid { display: grid; gap: 16px; clear: both; margin-top: 16px; }
.ad-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.ad-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ad-grid figure { margin: 0; }
.ad-grid img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.13); }
.ad-grid .ad-cap { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* Precision Agriculture banner: the source photo is a near-square drone shot, so it is
   capped to a comfortable centred size at its own aspect ratio (no forced wide crop —
   the drone and the ground both stay fully in frame at every screen width) */
.pa-banner { margin: 18px auto 26px; max-width: 620px; }
.pa-banner img { width: 100%; height: auto; aspect-ratio: 2240 / 1918; object-fit: cover; object-position: center; }

@media (max-width: 820px) {
    .ad-aside { float: none; width: auto; max-width: 540px; margin: 14px auto; }
}
@media (max-width: 480px) {
    .ad-grid.cols-2, .ad-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Project cards on the Projects list (research-style layout + logo) */
.project-card {
    flex-direction: row;
    align-items: center;
    gap: 22px;
}

.project-card::before {
    background-color: var(--tile-blue);
}

.project-card-logo {
    flex-shrink: 0;
    width: 150px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-logo img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.project-card-body {
    flex-grow: 1;
}

.project-card .card-header {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

.project-card .card-title a:hover {
    color: var(--tile-blue);
}

.project-card .card-content a,
.project-visit a {
    color: var(--tile-blue);
    font-weight: 600;
}

.project-visit {
    margin-top: 8px;
}

@media (max-width: 600px) {
    .project-card {
        flex-direction: column;
        text-align: center;
    }
    .project-card-logo {
        width: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .member-card {
        flex-direction: column;
        text-align: center;
    }
    .member-info {
        width: 100%;
    }
}

/* Contact Details Styles */
.contact-details {
    max-width: 700px;
    margin: 30px auto;
    padding: 40px;
    background-color: var(--bg-page-content);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Darker shadow for dark mode */
    border: 1px solid var(--border-color);
}

.contact-details > p {
    margin-top: 0;
    font-size: 1.15rem;
    color: var(--text-main);
}

.contact-list {
    margin: 25px 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 14px 28px;
    align-items: baseline;
}

.contact-list dt {
    font-weight: 600;
    color: var(--text-main);
    opacity: 0.6;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.contact-list dd {
    margin: 0;
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1.5;
}

.contact-list a {
    color: var(--nav-active-border);
    text-decoration: none;
}

.contact-list a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .contact-list {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    .contact-list dd {
        margin-bottom: 14px;
    }
}

.contact-details {
    background-color: #fff;
    border-color: #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

#response {
    margin-top: 20px;
}

/* Search Form Styles */
.searchform {
    background-color: var(--bg-page-content);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.searchform label {
    font-weight: 600;
    color: var(--text-main);
    margin-right: 5px;
}

.searchform select,
.searchform input[type="search"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.searchform select:focus,
.searchform input[type="search"]:focus {
    border-color: var(--tile-green); /* Green accent */
    box-shadow: 0 0 0 2px rgba(120, 150, 0, 0.2);
}

.searchform input[type="search"] {
    flex-grow: 1;
    min-width: 200px;
}

.searchform button {
    /* If there's a button, style it too, though the HTML didn't show one explicitly in the user snippet, 
       but the inline style referenced one. */
    width: 27px;
    height: 24px;
    background: transparent url("/img/pages/search-button.png");
    padding: 0;
    border: 1px solid #cacaca;
    vertical-align: middle;
}

.highlight {
    background-color: #f90;
    color: black;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .searchform {
        flex-direction: column;
        align-items: stretch;
    }

    .searchform label {
        margin-bottom: 5px;
    }

    .searchform select,
    .searchform input[type="search"] {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ====================================
   CSS View Transitions - Fade Effect
   ==================================== */

/* Enable cross-document view transitions */
@view-transition {
    navigation: auto;
}

/* Root fade transition */
::view-transition-old(root) {
    animation: vt-fade-out 300ms ease-out both;
}

::view-transition-new(root) {
    animation: vt-fade-in 500ms ease-in both;
    animation-delay: 250ms;
    opacity: 0; /* Start invisible until animation begins */
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Content area: slightly longer transition */
#content {
    view-transition-name: page-content;
}

::view-transition-old(page-content) {
    animation: vt-fade-out 300ms ease-out both;
}

::view-transition-new(page-content) {
    animation: vt-fade-in 500ms ease-in both;
    animation-delay: 250ms;
    opacity: 0; /* Start invisible until animation begins */
}

/* Keep header stable during transition */
#headerWrapper {
    view-transition-name: header;
}

::view-transition-old(header),
::view-transition-new(header) {
    animation: none;
    mix-blend-mode: normal;
}

/* Keep subnav stable during transition */
#subNavWrapper {
    view-transition-name: subnav;
}

::view-transition-old(subnav),
::view-transition-new(subnav) {
    animation: none;
    mix-blend-mode: normal;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(page-content),
    ::view-transition-new(page-content) {
        animation-duration: 0.01ms !important;
    }
}

/* =====================================================================
   Phones

   The metro-era stylesheet pinned the document to a 400px minimum width
   with horizontal scrolling switched off (main.css), so on any narrower
   handset the right-hand edge of every page was cut off and unreachable.
   Releasing that minimum is what actually makes the site usable on a
   phone; the rest below is sizing so the content reads well once it fits.
   ===================================================================== */
@media (max-width: 760px) {
    html {
        min-width: 0;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    #contentWrapper {
        min-width: 0;
        padding-left: 14px;
        padding-right: 14px;
    }

    #header {
        padding: 8px 14px;
    }

    #header h1 a {
        font-size: 20px;
        white-space: normal;
    }

    .duth-logo img {
        height: 38px;
    }

    #nav .navItem {
        padding: 7px 10px;
        font-size: 13px;
    }

    #subNav {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Long DOIs and venue names must wrap rather than push the page wide */
    #content {
        overflow-wrap: break-word;
    }
}

/* --- Publications on a phone ---
   Four folder tabs cannot fit across a 390px screen, so below this width the
   bookmarks become a single swipeable row with an underline indicator — the
   same navigation, in the shape phones expect. */
@media (max-width: 600px) {
    .pub-tabs {
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 16px;
        padding: 4px 0 0;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .pub-tabs::-webkit-scrollbar {
        display: none;
    }

    .pub-tab {
        flex: 0 0 auto;
        padding: 10px 14px;
        border-radius: 0;
        font-size: 13.5px;
    }

    /* Underline indicator instead of the folder outline */
    .pub-tab::before {
        top: auto;
        bottom: 0;
        left: 4px;
        right: 4px;
        height: 3px;
        border-radius: 3px 3px 0 0;
    }

    .pub-tab.is-active {
        margin-bottom: 0;
        padding-bottom: 10px;
        background-color: transparent;
        border-color: transparent;
    }

    .pub-tab:hover {
        background-color: transparent;
    }

    .pub-tab-count {
        margin-left: 5px;
        padding: 1px 6px;
        font-size: 10.5px;
    }

    .pub-panel {
        border-top: 1px solid var(--border-color);
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        padding: 16px 0 20px;
        margin-bottom: 28px;
    }

    .pub-panel .searchform {
        padding-bottom: 14px;
    }

    .pub-panel .searchform input[type="search"] {
        width: 100%;
    }

    .publication-list {
        padding-left: 1.9em;
    }

    .publication-item {
        padding: 14px 0 14px 10px;
    }

    .publication-content {
        font-size: 1em;
        line-height: 1.55;
    }

    .publication-year {
        margin-right: 7px;
    }

    .pub-year {
        padding: 11px 0 7px;
        font-size: 1.25em;
    }

    .publication-type {
        min-width: 0;
        margin-right: 7px;
        font-size: 0.75em;
    }
}