/*
 * Shared editorial mockup layer for the internal pages.
 * It deliberately sits on top of the original styles so the mockup keeps
 * the real page content, links, images, embeds, and interaction scripts.
 */

:root {
    --mock-ink: #151515;
    --mock-muted: #6c6c68;
    --mock-line: #e5e5e1;
    --mock-soft: #f7f7f5;
    --mock-accent: #b8c9d5;
    --mock-max: 1160px;
}

/* Local-page baseline ----------------------------------------------------
   The mockup pages are also opened directly as file:// documents. In that
   mode a browser may block the parent-directory style.css/refined.css links,
   so keep the small structural baseline here as well. This prevents a page
   from falling back to unstyled navigation, default margins, and visible skip
   links while preserving the original source files for normal web hosting. */
.mockup-page,
.mockup-page *,
.mockup-page *::before,
.mockup-page *::after {
    box-sizing: border-box;
}

.mockup-page {
    margin: 0;
    min-height: 100%;
    background: #fff;
    color: var(--mock-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

.mockup-page h1,
.mockup-page h2,
.mockup-page h3,
.mockup-page p,
.mockup-page figure,
.mockup-page ul,
.mockup-page ol {
    margin: 0;
    padding: 0;
}

.mockup-page img,
.mockup-page video,
.mockup-page iframe {
    max-width: 100%;
}

.mockup-page button,
.mockup-page input,
.mockup-page textarea,
.mockup-page select {
    font: inherit;
}

.mockup-page a {
    color: inherit;
}

.mockup-page [hidden] {
    display: none !important;
}

.mockup-page .skip-link {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 2000;
    transform: translateY(-150%);
    padding: .6rem .9rem;
    background: var(--mock-ink);
    color: #fff;
    text-decoration: none;
}

.mockup-page .skip-link:focus {
    transform: translateY(0);
}

.mockup-page .navbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    width: 100%;
    padding: .7rem 2rem;
    border-bottom: 1px solid var(--mock-line);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(8px);
}

.mockup-page .nav-container {
    width: min(100%, var(--mock-max));
    max-width: none;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mockup-page .lab-logo {
    flex-shrink: 0;
    margin-right: auto;
}

.mockup-page .lab-logo img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.mockup-page .nav-links {
    display: flex;
    align-items: center;
    gap: 2.15rem;
}

.mockup-page .nav-link {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    color: var(--mock-muted);
    font-size: .95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.mockup-page .nav-link:hover,
.mockup-page .nav-link.nav-active {
    border-bottom-color: var(--mock-ink);
    color: var(--mock-ink);
}

.mockup-page .mobile-fixed-logo {
    display: none;
}

.mockup-page .menu-toggle,
.mockup-page .menu-overlay {
    display: none;
}

.mockup-page {
    color: var(--mock-ink);
    background: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

.mockup-page .navbar {
    padding: .7rem 2rem;
    border-bottom-color: var(--mock-line);
    background: rgba(255, 255, 255, .96);
}

.mockup-page .nav-container {
    width: min(100%, var(--mock-max));
    max-width: none;
}

.mockup-page .nav-links {
    gap: 2.15rem;
}

.mockup-page .nav-link {
    color: var(--mock-muted);
    font-size: .95rem;
    letter-spacing: -.01em;
}

.mockup-page .nav-link:hover,
.mockup-page .nav-link.nav-active {
    color: var(--mock-ink);
}

.mockup-page .nav-active {
    border-bottom-color: var(--mock-ink);
}

.mockup-page main {
    width: min(100%, var(--mock-max));
    max-width: none;
    margin: 64px auto 0;
    padding: 0 2.25rem;
}

.mockup-page main.container {
    width: min(100%, var(--mock-max));
    padding: 0 2.25rem;
}

.mockup-page main > .container {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

.mockup-page .page-header {
    display: block;
    padding: 3.2rem 0 1.8rem;
    margin: 0 0 2.4rem;
    border-bottom: 1px solid var(--mock-line);
    text-align: left;
}

.mockup-page .page-title,
.mockup-page .page-header h1 {
    max-width: 860px;
    margin: 0 0 .8rem;
    color: var(--mock-ink);
    font-size: clamp(2.35rem, 5vw, 4.35rem);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: .98;
}

.mockup-page .page-subtitle,
.mockup-page .page-header .subtitle {
    max-width: 760px;
    margin: 0;
    color: #444540;
    font-size: 1.03rem;
    line-height: 1.7;
}

.mockup-page .chn-text {
    max-width: 820px;
    margin: 1rem 0 0;
    padding: .15rem 0 .15rem 1rem;
    border-left: 2px solid var(--mock-accent);
    color: var(--mock-muted);
    font-size: .95rem;
    line-height: 1.7;
}

/* Research metrics: a quiet evidence panel that sits alongside the page introduction. */
.mockup-research .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
    align-items: start;
    gap: 2.5rem;
}

.mockup-research .research-header-copy {
    min-width: 0;
}

.mockup-research .research-metrics {
    align-self: start;
    padding: 1.05rem 1.15rem 1rem;
    border: 1px solid var(--mock-line);
    border-radius: 12px;
    background: #fff;
}

.mockup-research .research-metrics-heading {
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--mock-line);
    color: var(--mock-ink);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mockup-research .research-metrics-heading span {
    color: var(--mock-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.mockup-research .research-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
    padding: 1rem 0 .85rem;
}

.mockup-research .research-metric {
    min-width: 0;
}

.mockup-research .research-metric + .research-metric {
    padding-left: .9rem;
    border-left: 1px solid var(--mock-line);
}

.mockup-research .research-metric strong {
    display: block;
    color: var(--mock-ink);
    font-size: clamp(1.85rem, 3.2vw, 2.55rem);
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: 1;
}

.mockup-research .research-metric span {
    display: block;
    margin-top: .45rem;
    color: var(--mock-muted);
    font-size: .72rem;
    line-height: 1.45;
}

.mockup-research .research-metrics-meta {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    padding-top: .75rem;
    border-top: 1px solid var(--mock-line);
    color: var(--mock-muted);
    font-size: .67rem;
    line-height: 1.4;
}

.mockup-research .research-metrics-meta time {
    text-align: right;
}

.mockup-research .research-metrics-links {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: .8rem;
}

.mockup-research .research-metrics-links a {
    color: var(--mock-ink);
    font-size: .71rem;
    text-decoration: underline;
    text-decoration-color: #bfc0ba;
    text-underline-offset: 3px;
}

.mockup-research .research-metrics-links a:hover {
    text-decoration-color: var(--mock-ink);
}

.mockup-page .section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 3rem 0 1.1rem;
    padding: 0 0 .7rem;
    border-bottom: 1px solid var(--mock-line);
    color: var(--mock-ink);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -.035em;
}

.mockup-page .section-header small {
    color: var(--mock-muted);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: 0;
}

.mockup-page .footer {
    width: min(100%, var(--mock-max));
    margin: 4rem auto 0;
    padding: 1.6rem 2.25rem 2rem;
    border-top-color: var(--mock-line);
    color: var(--mock-muted);
    text-align: left;
}

/* Shared surfaces: quiet borders, no competing shadows. */
.mockup-page .team-card,
.mockup-page .collab-card,
.mockup-page .student-card,
.mockup-page .category,
.mockup-page .papers-category,
.mockup-page .page-expander,
.mockup-page .link-card,
.mockup-page .video-card,
.mockup-page .manual-content,
.mockup-page .product-facts div {
    border-color: var(--mock-line);
    border-radius: 10px;
    box-shadow: none;
}

.mockup-page .team-card:hover,
.mockup-page .collab-card:hover,
.mockup-page .student-card:hover,
.mockup-page .category:hover,
.mockup-page .link-card:hover,
.mockup-page .video-card:hover {
    border-color: #c6c8c3;
    box-shadow: 0 16px 30px -25px rgba(0, 0, 0, .35);
    transform: translateY(-2px);
}

/* People: two feature profiles followed by lighter archive rows. */
.mockup-people .team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0 0 3.5rem;
}

.mockup-people .team-card {
    display: grid;
    grid-template-columns: 9.5rem minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    gap: .25rem 1.25rem;
    padding: 1.2rem;
    text-align: left;
    background: #fff;
}

.mockup-people .team-card .photo-placeholder {
    grid-column: 1;
    grid-row: 1 / span 4;
    width: 9.5rem;
    height: 12rem;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: var(--mock-soft);
}

.mockup-people .team-name {
    grid-column: 2;
    margin: 0;
    color: var(--mock-ink);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -.03em;
}

.mockup-people .default-bio {
    grid-column: 2;
    color: var(--mock-muted);
    font-size: .82rem;
    line-height: 1.5;
}

.mockup-people .member-extra {
    grid-column: 2;
    margin-top: .8rem;
    padding-top: .8rem;
    border-top-color: var(--mock-line);
}

.mockup-people .member-bio {
    color: #454641;
    font-size: .83rem;
    line-height: 1.65;
}

.mockup-people .collaborators-grid,
.mockup-people .students-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .8rem;
    margin: 0 0 3.2rem;
}

.mockup-people .students-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mockup-people .collab-card,
.mockup-people .student-card {
    min-width: 0;
    max-width: none;
    padding: 1rem;
    background: #fff;
    text-align: center;
}

.mockup-people .collab-card .card-link,
.mockup-people .student-card .card-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.mockup-people .collab-avatar,
.mockup-people .student-avatar {
    width: 4.3rem;
    height: 4.3rem;
    margin: 0 0 .8rem;
    border-radius: 50%;
    background: var(--mock-soft);
}

.mockup-people .collab-card .collab-avatar,
.mockup-people .student-card .student-avatar {
    margin: 0 auto .8rem;
}

.mockup-people .collab-name,
.mockup-people .student-name {
    color: var(--mock-ink);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.35;
}

.mockup-people .collab-card .collab-name,
.mockup-people .student-card .student-name {
    width: 100%;
    text-align: center;
}

.mockup-people .collab-title,
.mockup-people .student-title,
.mockup-people .collab-year,
.mockup-people .student-year {
    color: var(--mock-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.mockup-people .collab-card .collab-title,
.mockup-people .student-card .student-title {
    width: 100%;
    margin-top: .35rem;
    text-align: center;
}

.mockup-people .collab-card .collab-year,
.mockup-people .student-card .student-year {
    width: 100%;
    margin-top: auto;
    padding-top: .35rem;
    text-align: center;
}

/* Showcase: every project is an image-led editorial card. */
.mockup-showcase .showcase-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
    margin: -1rem 0 2rem;
    padding: 0 0 1.2rem;
    border-bottom: 1px solid var(--mock-line);
}

.mockup-showcase .filter-btn {
    border-color: var(--mock-line);
    border-radius: 999px;
    background: #fff;
    color: var(--mock-muted);
    font-size: .76rem;
}

.mockup-showcase .filter-btn.active,
.mockup-showcase .filter-btn:hover {
    border-color: var(--mock-ink);
    background: var(--mock-ink);
    color: #fff;
}

.mockup-showcase .category {
    display: flex;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    background: #fff;
}

.mockup-showcase .category-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 8.8rem;
    padding: 1.15rem 1.15rem .7rem;
    border: 0;
    background: #fff;
    cursor: pointer;
}

.mockup-showcase .category-header .toggle-btn {
    display: inline-flex;
    width: auto;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 .65rem;
    border-color: var(--mock-line);
    border-radius: 999px;
    color: var(--mock-muted);
    font-size: .68rem;
    white-space: nowrap;
}

.mockup-showcase .category-header .toggle-btn::after {
    content: 'View';
    margin-left: .3rem;
}

.mockup-showcase .category.expanded .category-header .toggle-btn::after {
    content: 'Close';
}

.mockup-showcase .category-header:hover {
    background: var(--mock-soft);
}

.mockup-showcase .category-title {
    color: var(--mock-ink);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.mockup-showcase .category-desc {
    margin: .35rem 0 0;
    color: var(--mock-muted);
    font-size: .78rem;
    line-height: 1.45;
}

.mockup-showcase .tags-container {
    gap: .3rem;
    margin-top: .65rem;
}

.mockup-showcase .tag {
    padding: .15rem .45rem;
    border: 1px solid var(--mock-line);
    border-radius: 999px;
    background: var(--mock-soft);
    color: var(--mock-muted);
    font-size: .62rem;
}

.mockup-showcase .category-content {
    display: block;
    padding: 0 1.15rem 1.15rem;
    background: #fff;
}

.mockup-showcase .carousel-wrapper {
    margin: 0;
}

.mockup-showcase .carousel-media {
    aspect-ratio: 4 / 3;
    height: auto;
    padding-bottom: 0;
    border-radius: 4px;
    background: var(--mock-soft);
}

.mockup-showcase .carousel-image,
.mockup-showcase .carousel-video {
    border: 0;
    border-radius: 4px;
}

/* Video-led projects still show their lightweight still-image fallback before
   JavaScript finishes initializing the carousel. */
.mockup-showcase .category:not(.expanded) .carousel-video + .carousel-image {
    display: block;
}

.mockup-showcase .carousel-btn,
.mockup-showcase .carousel-pagination,
.mockup-showcase .carousel-thumbnails {
    display: none;
}

.mockup-showcase .media-caption {
    margin-top: .85rem;
}

.mockup-showcase .caption-title {
    margin: 0;
    color: var(--mock-ink);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.35;
}

.mockup-showcase .caption-text,
.mockup-showcase .project-meta {
    display: none;
}

/* Open projects become an editorial two-column detail panel. */
.mockup-showcase .category.expanded {
    grid-column: 1 / -1;
}

.mockup-showcase .category.expanded .category-header {
    min-height: 0;
    padding: 1.35rem 1.4rem 1rem;
    border-bottom: 1px solid var(--mock-line);
}

.mockup-showcase .category.expanded .category-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .85fr);
    align-items: start;
    gap: 1.5rem;
    padding: 1.35rem 1.4rem 1.45rem;
}

.mockup-showcase .category.expanded .carousel-wrapper {
    grid-column: 1;
    grid-row: 1;
}

.mockup-showcase .category.expanded .carousel-pagination {
    grid-column: 1;
    grid-row: 2;
}

.mockup-showcase .category.expanded .carousel-thumbnails {
    grid-column: 1;
    grid-row: 3;
}

.mockup-showcase .category.expanded .media-caption {
    grid-column: 2;
    grid-row: 1 / span 3;
    min-width: 0;
    margin-top: 0;
    padding-top: .15rem;
}

.mockup-showcase .category.expanded .carousel-media {
    aspect-ratio: 16 / 10;
}

.mockup-showcase .category.expanded .carousel-btn {
    display: inline-flex;
}

.mockup-showcase .category.expanded .carousel-pagination {
    display: block;
    color: var(--mock-muted);
    font-size: .72rem;
}

.mockup-showcase .category.expanded .carousel-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    justify-content: center;
}

.mockup-showcase .category.expanded .caption-text {
    display: block;
    margin-top: .8rem;
    font-size: .88rem;
    line-height: 1.7;
}

.mockup-showcase .category.expanded .caption-title {
    font-size: 1rem;
    line-height: 1.45;
}

.mockup-showcase .category.expanded .project-meta {
    display: flex;
}

.mockup-showcase main > .container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.mockup-showcase main > .container > .page-header,
.mockup-showcase main > .container > .showcase-filters {
    grid-column: 1 / -1;
}

/* Research: full publication index instead of nested accordion cards. */
.mockup-research .research-tools {
    display: grid;
    grid-template-columns: auto minmax(220px, 440px);
    align-items: center;
    gap: 1rem;
    margin: 0 0 2.5rem;
    padding: 0 0 1.3rem;
    border-bottom: 1px solid var(--mock-line);
}

.mockup-research .research-tools label {
    color: var(--mock-ink);
    font-size: .86rem;
    font-weight: 500;
}

.mockup-research .research-tools input {
    width: 100%;
    max-width: none;
    border: 0;
    border-bottom: 1px solid #c7c9c4;
    border-radius: 0;
    padding: .5rem 0;
    color: var(--mock-ink);
    font-size: .9rem;
}

.mockup-research .papers-category {
    margin: 0;
    border-width: 1px 0 0;
    border-radius: 0;
    background: #fff;
}

.mockup-research .papers-category:last-of-type {
    border-bottom: 1px solid var(--mock-line);
}

.mockup-research .papers-category .section-header {
    margin: 0;
    padding: 1.15rem 0;
    border-bottom: 0;
}

.mockup-research .papers-category .toggle-btn,
.mockup-research .collapse-bottom-btn-container {
    display: none !important;
}

.mockup-research .paper-list-wrapper {
    max-height: none !important;
    overflow: visible;
    border-top: 1px solid var(--mock-line);
}

.mockup-research .paper-list {
    margin: 0;
}

.mockup-research .papers-category .paper-item {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1.25fr) minmax(17rem, .85fr);
    grid-template-rows: auto auto 1fr;
    gap: .3rem 1.45rem;
    align-items: start;
    margin: 0;
    padding: 1.2rem 0;
    border-bottom: 1px solid var(--mock-line);
}

.mockup-research .publication-cover {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: relative;
    display: flex;
    width: 5.2rem;
    min-height: 7rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: .55rem;
    border: 1px solid rgba(21, 21, 21, .14);
    border-radius: 2px;
    color: #fff;
    box-shadow: 0 8px 18px -16px rgba(0, 0, 0, .55);
}

.mockup-research .publication-cover::before {
    content: "";
    position: absolute;
    inset: auto -.8rem 1.6rem auto;
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
}

.mockup-research .publication-cover span,
.mockup-research .publication-cover strong,
.mockup-research .publication-cover small {
    position: relative;
    z-index: 1;
}

.mockup-research .publication-cover span {
    font-size: .48rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.mockup-research .publication-cover strong {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.05;
}

.mockup-research .publication-cover small {
    font-size: .5rem;
    letter-spacing: .08em;
}

.mockup-research .publication-cover-journal {
    background: linear-gradient(155deg, #445e69, #1c292f);
}

.mockup-research .publication-cover-proceedings {
    background: linear-gradient(155deg, #c68d1f, #705111);
}

.mockup-research .publication-cover-book {
    background: linear-gradient(155deg, #7a675a, #322a25);
}

.mockup-research .publication-cover.has-image {
    display: block;
    padding: 0;
    background: #f4f4f1;
}

.mockup-research .publication-cover.has-image::before {
    display: none;
}

.mockup-research .publication-cover-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mockup-research .publication-cover.is-placeholder .publication-cover-image {
    opacity: .3;
}

.mockup-research .publication-cover-copy {
    position: relative;
    z-index: 1;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
    padding: .55rem;
    color: #26312c;
}

.mockup-research .paper-title {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin: 0;
    padding-right: .4rem;
    font-size: .98rem;
    font-weight: 500;
    line-height: 1.45;
}

.mockup-research .paper-authors,
.mockup-research .paper-venue,
.mockup-research .paper-doi {
    grid-column: 3;
    color: var(--mock-muted);
    font-size: .79rem;
    line-height: 1.5;
}

.mockup-research .paper-authors {
    grid-row: 1;
}

.mockup-research .paper-venue {
    grid-row: 2;
}

.mockup-research .paper-doi {
    grid-row: 3;
}

/* EvoMass: keep the tool's task-based tabs, but make them part of the same shell. */
.mockup-evomass .page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
}

.mockup-evomass .support-btn-wrapper {
    align-self: start;
    padding-top: .2rem;
}

.mockup-evomass .support-btn,
.mockup-evomass .support-btn:visited {
    color: #fff;
    background: var(--mock-ink);
}

.mockup-evomass .support-btn:hover,
.mockup-evomass .support-btn:focus-visible {
    color: var(--mock-ink);
    background: #fff;
    border-color: var(--mock-ink);
}

.mockup-evomass .support-btn:hover svg,
.mockup-evomass .support-btn:focus-visible svg {
    stroke: currentColor;
}

.mockup-evomass .expander-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .55rem;
    margin: 0 0 1.2rem;
    padding: 0 0 .8rem;
    border-bottom: 1px solid var(--mock-line);
}

.mockup-evomass .expander-card {
    min-height: 7.2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: .95rem;
    border: 1px solid var(--mock-line);
    border-radius: 8px;
    background: #fff;
    color: var(--mock-muted);
    text-align: left;
    box-shadow: none;
}

.mockup-evomass .expander-card:hover {
    border-color: #bfc4c0;
    transform: translateY(-1px);
}

.mockup-evomass .expander-card.is-active {
    border-color: var(--mock-ink);
    background: var(--mock-soft);
    box-shadow: none;
}

.mockup-evomass .expander-card-index {
    color: var(--mock-accent);
    font-size: .7rem;
    letter-spacing: .12em;
}

.mockup-evomass .expander-card-copy {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.mockup-evomass .expander-card-copy strong {
    color: var(--mock-ink);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.25;
}

.mockup-evomass .expander-card-copy span {
    color: var(--mock-muted);
    font-size: .75rem;
}

.mockup-evomass .expander-card-copy small {
    color: var(--mock-muted);
    font-size: .7rem;
    line-height: 1.35;
}

.mockup-evomass .expander-card-arrow {
    display: none;
}

.mockup-evomass .page-expander {
    margin: 0 0 2rem;
    padding: 1.3rem;
    border: 1px solid var(--mock-line);
    background: #fff;
}

.mockup-evomass .page-expander > .section-header {
    margin: 0 0 1.2rem;
    padding-bottom: .75rem;
}

.mockup-evomass .page-expander > .link-cards,
.mockup-evomass .page-expander > .video-card,
.mockup-evomass .page-expander > .manual-container {
    margin: 0;
}

.mockup-evomass .product-facts {
    gap: .7rem;
    margin: 0 0 1.2rem;
}

.mockup-evomass .product-facts div {
    background: var(--mock-soft);
}

.mockup-evomass .link-card,
.mockup-evomass .video-card {
    background: #fff;
}

.mockup-evomass .manual-container {
    max-width: 980px;
    margin-inline: auto;
}

.mockup-evomass .manual-content {
    max-width: 900px;
    margin-inline: auto;
    border-radius: 8px;
    background: #fff;
    color: #30312e;
    font-size: 1rem;
    line-height: 1.8;
}

.mockup-evomass .manual-content .toc {
    border: 1px solid var(--mock-line);
    border-radius: 6px;
    background: var(--mock-soft);
}

@media (max-width: 900px) {
    .mockup-showcase main > .container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mockup-people .students-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mockup-evomass .expander-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Use the compact showcase layout on narrow tablet and phone-sized viewports.
   The wider breakpoint also covers browser device emulation where CSS pixels
   are larger than the screenshot's physical width. */
@media (max-width: 840px) {
    .mockup-showcase {
        padding-top: 64px;
    }

    .mockup-showcase main,
    .mockup-showcase main > .container {
        margin-top: 0 !important;
    }

    .mockup-showcase main > .container {
        grid-template-columns: 1fr;
        /* The parent main already owns the shared page gutter. */
        padding-inline: 0;
    }

    .mockup-showcase .category-header {
        min-height: 0;
    }

    .mockup-showcase .category.expanded .category-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mockup-showcase .category.expanded .media-caption {
        grid-column: 1;
        grid-row: 4;
    }

    .mockup-showcase .mobile-fixed-logo {
        display: block;
        position: fixed;
        top: .8rem;
        right: 1rem;
        z-index: 1002;
        width: 40px;
        height: 40px;
    }

    .mockup-showcase .mobile-fixed-logo a,
    .mockup-showcase .mobile-fixed-logo img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mockup-showcase .mobile-fixed-logo img {
        object-fit: contain;
    }

    .mockup-showcase .navbar .lab-logo {
        display: none;
    }

    .mockup-showcase .menu-toggle {
        display: flex;
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1001;
        width: 44px;
        height: 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #fff;
        color: #111;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
    }

    .mockup-showcase .menu-toggle span {
        display: block;
        width: 22px;
        height: 0;
        border-top: 2px solid;
    }

    .mockup-showcase .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mockup-showcase .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mockup-showcase .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .mockup-showcase .navbar {
        position: fixed;
        top: 0;
        left: -280px;
        width: 280px;
        height: 100vh;
        padding: 4rem 1.5rem 2rem;
        border-right: 1px solid #eaeaea;
        background: rgba(255, 255, 255, .98);
        box-shadow: none;
        transition: left .3s ease;
    }

    .mockup-showcase .navbar.open {
        left: 0;
        box-shadow: 2px 0 20px rgba(0, 0, 0, .08);
    }

    .mockup-showcase .nav-container {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: 0;
    }

    .mockup-showcase .nav-links {
        flex-direction: column;
        align-items: flex-end;
        gap: .75rem;
        width: 100%;
    }

    .mockup-showcase .nav-link {
        display: block;
        width: 100%;
        padding: .8rem .5rem;
        border-bottom: 0;
        border-radius: 8px;
        text-align: right;
        white-space: normal;
    }

    .mockup-showcase .nav-link:hover,
    .mockup-showcase .nav-link.nav-active {
        border-bottom: 0;
        background: #f0f0f0;
    }

    .mockup-showcase .menu-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, .3);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .mockup-showcase .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 680px) {
    .mockup-page main,
    .mockup-page main.container {
        width: 100%;
        margin-top: 0;
        padding: 0 1rem;
    }

    .mockup-page .page-header {
        padding: 2.5rem 0 1.25rem;
        margin-bottom: 1.8rem;
    }

    .mockup-research .page-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .mockup-research .research-metrics {
        width: min(100%, 360px);
    }

    .mockup-page .page-title,
    .mockup-page .page-header h1 {
        font-size: clamp(2.2rem, 12vw, 3.2rem);
    }

    .mockup-page .section-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
        font-size: 1.2rem;
    }

    .mockup-people .team-grid,
    .mockup-people .collaborators-grid,
    .mockup-people .students-grid,
    .mockup-showcase main > .container {
        grid-template-columns: 1fr;
    }

    /* main already supplies the shared 1rem mobile gutter. The Showcase
       tablet rule adds an inner gutter for wider screens, so clear it here
       to keep the phone layout aligned with the other three pages. */
    .mockup-showcase main > .container {
        padding-inline: 0;
    }

    .mockup-showcase .category-header {
        min-height: 0;
    }

    .mockup-showcase .category.expanded .category-content {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .mockup-showcase .category.expanded .media-caption {
        grid-column: 1;
        grid-row: 4;
    }

    .mockup-people .team-card {
        grid-template-columns: 7rem minmax(0, 1fr);
    }

    .mockup-people .team-card .photo-placeholder {
        width: 7rem;
        height: 9rem;
    }

    .mockup-people .member-extra {
        display: none;
    }

    .mockup-research .research-tools {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .mockup-research .papers-category .paper-item {
        grid-template-columns: 4.2rem minmax(0, 1fr);
        grid-template-rows: auto auto auto auto;
        gap: .35rem .9rem;
    }

    .mockup-research .publication-cover {
        grid-column: 1;
        grid-row: 1 / span 4;
        width: 4.2rem;
        min-height: 5.8rem;
        padding: .42rem;
    }

    .mockup-research .publication-cover strong {
        font-size: .52rem;
    }

    .mockup-research .paper-title,
    .mockup-research .paper-authors,
    .mockup-research .paper-venue,
    .mockup-research .paper-doi {
        grid-column: 2;
    }

    .mockup-research .paper-title {
        grid-row: 1;
        padding-right: 0;
    }

    .mockup-research .paper-authors,
    .mockup-research .paper-venue,
    .mockup-research .paper-doi {
        margin-top: .25rem;
    }

    .mockup-research .paper-authors { grid-row: 2; }
    .mockup-research .paper-venue { grid-row: 3; }
    .mockup-research .paper-doi { grid-row: 4; }

    .mockup-evomass .page-header {
        display: block;
    }

    .mockup-evomass .support-btn-wrapper {
        margin-top: 1.1rem;
    }

    .mockup-evomass .expander-nav {
        grid-template-columns: 1fr 1fr;
    }

    .mockup-evomass .expander-card {
        min-height: 6.5rem;
    }
}

/* The original global stylesheet owns the mobile navigation on the live
   pages. Keep the same behavior locally for the three non-showcase mockups;
   Showcase has its own wider 840px mobile treatment below. */
@media (max-width: 680px) {
    .mockup-page:not(.mockup-showcase) {
        padding-top: 64px;
    }

    .mockup-page:not(.mockup-showcase) .mobile-fixed-logo {
        display: block;
        position: fixed;
        top: .8rem;
        right: 1rem;
        z-index: 1002;
        width: 40px;
        height: 40px;
    }

    .mockup-page:not(.mockup-showcase) .mobile-fixed-logo a,
    .mockup-page:not(.mockup-showcase) .mobile-fixed-logo img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .mockup-page:not(.mockup-showcase) .mobile-fixed-logo img {
        object-fit: contain;
    }

    .mockup-page:not(.mockup-showcase) .navbar .lab-logo {
        display: none;
    }

    .mockup-page:not(.mockup-showcase) .menu-toggle {
        display: flex;
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 1001;
        width: 44px;
        height: 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        background: #fff;
        color: #111;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
        cursor: pointer;
    }

    .mockup-page:not(.mockup-showcase) .menu-toggle span {
        display: block;
        width: 22px;
        height: 0;
        border-top: 2px solid currentColor;
        transition: transform .2s ease, opacity .2s ease;
    }

    .mockup-page:not(.mockup-showcase) .menu-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .mockup-page:not(.mockup-showcase) .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .mockup-page:not(.mockup-showcase) .menu-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    .mockup-page:not(.mockup-showcase) .navbar {
        position: fixed;
        inset: 0 auto 0 -280px;
        width: 280px;
        height: 100vh;
        padding: 4rem 1.5rem 2rem;
        border-right: 1px solid #eaeaea;
        background: rgba(255, 255, 255, .98);
        box-shadow: none;
        transition: left .3s ease;
    }

    .mockup-page:not(.mockup-showcase) .navbar.open {
        left: 0;
        box-shadow: 2px 0 20px rgba(0, 0, 0, .08);
    }

    .mockup-page:not(.mockup-showcase) .nav-container {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: 0;
    }

    .mockup-page:not(.mockup-showcase) .nav-links {
        flex-direction: column;
        align-items: flex-end;
        gap: .75rem;
        width: 100%;
    }

    .mockup-page:not(.mockup-showcase) .nav-link {
        display: block;
        width: 100%;
        padding: .8rem .5rem;
        border-bottom: 0;
        border-radius: 8px;
        text-align: right;
        white-space: normal;
    }

    .mockup-page:not(.mockup-showcase) .nav-link:hover,
    .mockup-page:not(.mockup-showcase) .nav-link.nav-active {
        border-bottom: 0;
        background: #f0f0f0;
    }

    .mockup-page:not(.mockup-showcase) .menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 999;
        background: rgba(0, 0, 0, .3);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }

    .mockup-page:not(.mockup-showcase) .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

@media (min-width: 681px) {
    .mockup-page .menu-toggle {
        display: none;
    }

    .mockup-page .menu-overlay {
        display: none;
    }
}

/* Page-specific type scale: the showcase needs a little more presence for
   browsing project titles, while the information-heavy pages stay quieter. */
.mockup-showcase .page-title,
.mockup-showcase .page-header h1 {
    font-size: clamp(2.55rem, 5.5vw, 4.55rem);
}

.mockup-showcase .page-subtitle,
.mockup-showcase .page-header .subtitle {
    font-size: 1.08rem;
}

.mockup-showcase .chn-text {
    font-size: .98rem;
}

.mockup-showcase .category-title {
    font-size: 1.08rem;
}

.mockup-showcase .category-desc {
    font-size: .82rem;
}

.mockup-showcase .tag {
    font-size: .65rem;
}

.mockup-showcase .caption-title {
    font-size: .95rem;
}

.mockup-research .page-title,
.mockup-research .page-header h1,
.mockup-people .page-title,
.mockup-people .page-header h1,
.mockup-evomass .page-title,
.mockup-evomass .page-header h1 {
    font-size: clamp(2.15rem, 4.5vw, 3.75rem);
}

.mockup-research .page-subtitle,
.mockup-research .page-header .subtitle,
.mockup-people .page-subtitle,
.mockup-people .page-header .subtitle,
.mockup-evomass .page-subtitle,
.mockup-evomass .page-header .subtitle {
    font-size: .96rem;
}

.mockup-research .chn-text,
.mockup-people .chn-text,
.mockup-evomass .chn-text {
    font-size: .88rem;
}

.mockup-research .section-header,
.mockup-people .section-header,
.mockup-evomass .section-header {
    font-size: 1.2rem;
}

@media (max-width: 840px) {
    .mockup-showcase .page-title,
    .mockup-showcase .page-header h1 {
        font-size: clamp(2.35rem, 7vw, 3.15rem);
    }

    .mockup-showcase .page-subtitle,
    .mockup-showcase .page-header .subtitle {
        font-size: 1rem;
    }

    .mockup-showcase .chn-text {
        font-size: .9rem;
    }

    .mockup-research .page-title,
    .mockup-research .page-header h1,
    .mockup-people .page-title,
    .mockup-people .page-header h1,
    .mockup-evomass .page-title,
    .mockup-evomass .page-header h1 {
        font-size: clamp(2rem, 8vw, 2.75rem);
    }

    .mockup-research .page-subtitle,
    .mockup-research .page-header .subtitle,
    .mockup-people .page-subtitle,
    .mockup-people .page-header .subtitle,
    .mockup-evomass .page-subtitle,
    .mockup-evomass .page-header .subtitle {
        font-size: .92rem;
    }

    .mockup-research .chn-text,
    .mockup-people .chn-text,
    .mockup-evomass .chn-text {
        font-size: .84rem;
    }

    .mockup-research .section-header,
    .mockup-people .section-header,
    .mockup-evomass .section-header {
        font-size: 1.1rem;
    }
}

/* Final shared type scale across all four internal-page mockups.
   The page files contain legacy inline mobile rules, so these declarations
   intentionally use !important to keep the four pages visually aligned. */
.mockup-page .page-title,
.mockup-page .page-header h1 {
    font-size: clamp(2.65rem, 5vw, 4rem) !important;
}

.mockup-page .page-subtitle,
.mockup-page .page-header .subtitle {
    font-size: 1rem !important;
}

.mockup-page .chn-text {
    font-size: .9rem !important;
}

.mockup-page .section-header {
    font-size: 1.22rem !important;
}

/* “People” has shorter, rounder Latin forms than the other page titles, so
   the shared negative tracking reads noticeably tighter here. Give this one
   title a little more air without changing the scale or the other pages. */
.mockup-people .page-title,
.mockup-people .page-header h1 {
    letter-spacing: -.01em !important;
}

/* Give the three information-heavy page titles a little more breathing room.
   A light negative track keeps the editorial scale while avoiding the
   compressed-looking Latin/Chinese title pairs. */
.mockup-research .page-title,
.mockup-research .page-header h1,
.mockup-people .page-title,
.mockup-people .page-header h1,
.mockup-evomass .page-title,
.mockup-evomass .page-header h1 {
    letter-spacing: -.01em !important;
}

.mockup-showcase .page-title,
.mockup-showcase .page-header h1 {
    letter-spacing: -.01em !important;
}

/* Showcase cards use the same readable scale as the research and people
   content instead of inheriting its older, smaller card defaults. */
.mockup-showcase .category-title {
    font-size: 1.08rem !important;
}

.mockup-showcase .category-desc,
.mockup-showcase .caption-text {
    font-size: .9rem !important;
}

.mockup-showcase .tag {
    font-size: .68rem !important;
}

.mockup-showcase .filter-label {
    font-size: .9rem !important;
}

.mockup-showcase .filter-btn {
    font-size: .84rem !important;
}

@media (max-width: 960px) {
    .mockup-page .page-title,
    .mockup-page .page-header h1 {
        font-size: clamp(2.55rem, 7vw, 3.1rem) !important;
    }

    .mockup-page .page-subtitle,
    .mockup-page .page-header .subtitle {
        font-size: 1.05rem !important;
    }

    .mockup-page .chn-text {
        font-size: .95rem !important;
    }

    .mockup-page .section-header {
        font-size: 1.2rem !important;
    }

    .mockup-showcase .category-title {
        font-size: 1.08rem !important;
    }

    .mockup-showcase .category-desc,
    .mockup-showcase .caption-text {
        font-size: .9rem !important;
    }

    .mockup-showcase .filter-label {
        font-size: .9rem !important;
    }

    .mockup-showcase .filter-btn {
        font-size: .84rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mockup-page *,
    .mockup-page *::before,
    .mockup-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Homepage alignment ------------------------------------------------------
   Keep the live homepage's content and image treatment, while matching the
   shared inner-page rhythm, title tracking, and card language. */
.mockup-home .ref-home-title {
    letter-spacing: -.01em;
}

.mockup-home .ref-home-latest-heading h2,
.mockup-home .ref-home-projects-heading h2,
.mockup-home .ref-home-honors-heading h2 {
    font-size: 1.22rem;
    letter-spacing: -.01em;
}

.mockup-home .ref-home-statement,
.mockup-home .ref-home-news-card,
.mockup-home .ref-home-project {
    border-radius: 10px;
}

.mockup-home .ref-home-news-card,
.mockup-home .ref-home-project {
    overflow: hidden;
}

.mockup-home .ref-home-news-card h3,
.mockup-home .ref-home-project h3 {
    letter-spacing: -.01em;
}

@media (min-width: 681px) {
    .mockup-home .ref-home-hero {
        min-height: 500px;
        padding-top: 3.2rem;
        padding-bottom: 3.2rem;
    }
}

/* EvoMass card contrast guardrails ---------------------------------------
   The page contains legacy inline card rules as well as this shared layer.
   Keep the selected card readable in light mode even when a browser caches
   or reorders one of those older declarations. */
.mockup-evomass .expander-card.is-active {
    background: var(--mock-soft) !important;
    color: var(--mock-ink) !important;
}

.mockup-evomass .expander-card.is-active .expander-card-index,
.mockup-evomass .expander-card.is-active .expander-card-copy strong,
.mockup-evomass .expander-card.is-active .expander-card-copy span,
.mockup-evomass .expander-card.is-active .expander-card-copy small,
.mockup-evomass .expander-card.is-active .expander-card-arrow {
    color: var(--mock-ink) !important;
}

.mockup-evomass .expander-card.is-active .expander-card-copy span,
.mockup-evomass .expander-card.is-active .expander-card-copy small {
    color: var(--mock-muted) !important;
}

.mockup-evomass .btn,
.mockup-evomass .btn:visited,
.mockup-evomass .download-link,
.mockup-evomass .download-link:visited {
    color: #fff !important;
}

@media (prefers-color-scheme: dark) {
    .mockup-evomass .expander-card.is-active {
        background: #111 !important;
        color: #fff !important;
    }

    .mockup-evomass .expander-card.is-active .expander-card-index,
    .mockup-evomass .expander-card.is-active .expander-card-copy strong,
    .mockup-evomass .expander-card.is-active .expander-card-copy span,
    .mockup-evomass .expander-card.is-active .expander-card-copy small,
    .mockup-evomass .expander-card.is-active .expander-card-arrow {
        color: #fff !important;
    }
}