/* Text wordmarks for Stanford and Cambridge.
   Both universities forbid students from using their logos or crests on personal
   websites, and forbid modified or look-alike marks. So these are the names set in
   a free serif (Source Serif 4) in each brand colour: Stanford Cardinal #8C1515,
   Cambridge Dark Blue #133844 with Cambridge Blue #8EE8D8. No crests, no emblems,
   no copied letterforms or lockups. */

.wordmark {
    --wm-size: 18px;
    --wm-color: #1a1a1a;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-optical-sizing: auto;
    font-size: var(--wm-size);
    line-height: 1.04;
    letter-spacing: 0.01em;
    color: var(--wm-color);
    white-space: nowrap;
    text-decoration: none;
    text-align: left;
}

.wordmark .wm-light {
    font-weight: 400;
}

.wordmark .wm-strong {
    font-weight: 600;
    letter-spacing: 0;
}

.wordmark--stanford {
    --wm-color: #8C1515;
}

.wordmark--cambridge {
    --wm-color: #133844;
}

/* Stanford carries its colour in the text. Cambridge Blue is too light for text
   on white, so it sits in a thin rule under the name, with the text in Dark Blue. */
.wordmark .wm-strong {
    padding-bottom: 0.06em;
    border-bottom: 0.1em solid transparent;
}

.wordmark--cambridge .wm-strong {
    border-bottom-color: #8EE8D8;
}

/* Nav: sits beside the JSI mark */
.nav-org-logo .wordmark {
    --wm-size: 22px;
    transition: font-size 0.3s ease, color 0.3s ease;
}

/* Hairline between the text marks so they read as two names, not one block */
.nav-logos .nav-org-logo + .nav-org-logo:has(.wordmark) {
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.22);
}

nav.scrolled .nav-logos .nav-org-logo + .nav-org-logo:has(.wordmark) {
    padding-left: 14px;
    border-left-color: rgba(0, 0, 0, 0.14);
}

nav:not(.scrolled) .nav-org-logo .wordmark {
    --wm-color: #ffffff;
}

nav:not(.scrolled) .nav-org-logo .wordmark--cambridge .wm-strong {
    color: #8EE8D8;
}

nav:not(.scrolled) .nav-org-logo .wordmark .wm-strong {
    border-bottom-color: transparent;
}

nav.scrolled .nav-org-logo .wordmark {
    --wm-size: 14px;
}

a.nav-org-logo,
a.nav-org-logo:hover {
    text-decoration: none;
}

/* "Collaborating with" strip: the span also carries .trusted-logo, so it gets the
   same opacity, greyscale and hover treatment as the image logos */
.trusted-logos .wordmark {
    --wm-size: 20px;
    max-width: none;
    max-height: none;
}

/* Project card panel (Optimas) */
.project-image .wordmark-panel {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.project-image .wordmark-panel .wordmark {
    --wm-size: 44px;
}

.project-card:hover .project-image .wordmark-panel,
.project-item:hover .project-image .wordmark-panel {
    transform: scale(1.05);
}

@media (max-width: 1400px) {
    .nav-org-logo .wordmark {
        --wm-size: 19px;
    }

    nav.scrolled .nav-org-logo .wordmark {
        --wm-size: 13px;
    }
}

@media (max-width: 768px) {
    /* scale with the 4-column phone grid so the nowrap lines fit their cell */
    .trusted-logos .wordmark {
        --wm-size: clamp(10.5px, 3.1vw, 13px);
    }

    .trusted-logos img.trusted-logo {
        max-width: 100%;
    }

    .project-image .wordmark-panel .wordmark {
        --wm-size: 36px;
    }
}