/* Setting CSS Variables */
:root {
    --bg: #000111;
    --surface-1: #111111;
    --surface-2: #177777;
    --text: #fffffa;
    --muted: #9ba2c2;
    --line: #222222;
    --accent: #9beeee;
    --accent-strong: #cccfff;
    --accent-ink: #010101;
    --header-bg: rgba(20, 15, 15, 0.85);
    --scrim: rgba(0, 1, 17, 0.72);   /*  the carousel's caption, dots and arrows  */
    --shadow: 0 1.125rem 4.6875rem rgba(0, 0, 0, 0.25);
    --radius: 1.125rem;
    --shell: 73.75rem;
}

:root[data-theme="light"] {
    --bg: #f7f8f8;
    --surface-1: #ffffff;
    --surface-2: #eeeeee;
    --text: #101010;
    --muted: #555555;
    --line: #d8d8d8;
    --accent: #126a6a;
    --accent-strong: #0f5f0f;
    --accent-ink: #ffffff;
    --header-bg: rgba(240, 240, 240, 0.85);
    --scrim: rgba(247, 248, 248, 0.78);
    --shadow: 0 1.125rem 4.6875rem rgba(35, 35, 35, 0.15);
}


/* Generic global HTML elements */
* { box-sizing: border-box; }
html {
    font-size: 87.5%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}
body {
    margin: 0;
    min-width: 20.625rem;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.05; letter-spacing: -0.045em; }
h1 { max-width: 58.125rem; font-size: clamp(2.875rem, 7vw, 5.5rem); font-weight: 760; }
h2 { font-size: clamp(2.125rem, 4.6vw, 3.625rem); font-weight: 720; }
h3 { font-size: 1.4375rem; }

::selection { background: var(--accent); color: var(--accent-ink); }


/* FREQUENTLY REUSED class elements */
.shell{ 
    width: min(calc(100% - 2.5rem), var(--shell));
    margin-inline: auto;
}
.narrow { max-width: 53.125rem; }
.section-pad { padding: clamp(4.5625rem, 9vw, 8.125rem) 0; }
.section-rule { border-top: 1px solid var(--line); }

.sr-only, .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.skip-link:focus {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--text);
    color: var(--bg);
    border-radius: 0.5rem;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.8125rem;
    padding: 0 1.125rem;
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    font-weight: 750;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover { transform: translateY(-0.125rem); }
.button-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.button-secondary { background: var(--surface-1); }
.eyebrow {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--accent);
    font-size: max(10px, 0.75rem);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.prose { color: var(--muted); font-size: 1.125rem; }
.prose p:first-child { margin-top: 0; }
.prose p + p { margin-top: 1.25rem; }
.reveal { 
    opacity: 0;
    transform: translate(1.125rem);
    transition: opacity 520ms ease, transform 520ms ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 1.875rem;
    align-items: end;
    margin-bottom: 2.75rem;
}
.content-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: clamp(2.8125rem, 8vw, 7.5rem);
    align-items: start;
}



/* HEADER Elements. Specific to header.html */
.ac-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 2px solid transparent;
    background: transparent;
    transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}
/*  .ac-header.scrolled means has class names of both .ac-header AND .scrolled
    site.js has a function that applies the .scrolled class name to an element
    when the screen has moved down a certain number of pixels */
.ac-header.scrolled {
    background: var(--header-bg);
    border-color: var(--line);
    backdrop-filter: blur(1.125rem);
}
.nav-shell {
    min-height: 4.6875rem;
    display: flex;
    align-items: center;
    gap: 1.4375rem;
}
.banner {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: 740;
    letter-spacing: -0.02em;
}
.logo-img {
    width: 2.1875rem;
    height: 2.1875rem;
    border-radius: 0.5625rem;
    object-fit: contain;
}
.banner-text { white-space: nowrap; }
/* clickable pages */
.nav-pages {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    margin-left: auto;
}
/*  Top level nav entries. Scoped with > so the Projects dropdown links below
    keep their own styling. The toggle is a <button>, styled to match its
    sibling links exactly. */
.nav-pages > a, .nav-menu-toggle {
    padding: 0.5rem 0.75rem;
    color: var(--muted);
    border-radius: 0.5625rem;
    font-size: 0.9375rem;
    font-weight: 650;
    transition: color 160ms ease, background 160ms ease;
}
.nav-pages > a:hover,
.nav-pages > a[aria-current="page"],
.nav-menu-toggle:hover,
.nav-menu-toggle[aria-current="true"],
.nav-menu-toggle[aria-expanded="true"] {
    color: var(--text);
    background: var(--surface-2);
}

/*  PROJECTS DROPDOWN. Markup in partials/header.html, behaviour in site.js.
    Rows reuse the top level nav link sizing so the panel reads as an extension
    of the header rather than as a separate widget. */
.nav-menu { position: relative; }
.nav-menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border: 0;
    background: transparent;
    line-height: inherit;
    cursor: pointer;
}
.nav-menu-chevron {
    width: 0.5625rem;
    height: 0.375rem;
    opacity: .7;
    transition: transform 200ms ease;
}
.nav-menu-toggle[aria-expanded="true"] .nav-menu-chevron { transform: rotate(180deg); }

.nav-menu-panel {
    position: absolute;
    z-index: 110;
    top: calc(100% + 0.5rem);
    left: 0;
    width: 15.625rem;
    padding: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    background: var(--surface-1);
    background: color-mix(in srgb, var(--surface-1) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(1.125rem);
    transform-origin: top left;
}
.nav-menu-panel[hidden] { display: none; }
.nav-menu-panel:not([hidden]) { animation: nav-menu-open 150ms ease-out both; }
.nav-menu-panel::before {
    content: "";
    position: absolute;
    inset: -0.625rem 0 100%;
}
@keyframes nav-menu-open {
    from { opacity: 0; transform: translateY(-0.375rem); }
    to { opacity: 1; transform: translateY(0); }
}

.nav-menu-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-menu-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5625rem;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 650;
    transition: color 160ms ease, background 160ms ease;
}
a.nav-menu-link:hover,
a.nav-menu-link:focus-visible,
.nav-menu-link[aria-current="page"] {
    color: var(--text);
    background: var(--surface-2);
}

/*  Entries with no destination yet: listed, but plainly not clickable. */
.nav-menu-placeholder { cursor: default; opacity: .5; }
.nav-menu-badge {
    color: var(--muted);
    font-size: max(10px, 0.625rem);
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.nav-menu-foot {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--line);
}
.nav-menu-all { color: var(--text); }
.nav-menu-arrow {
    color: var(--muted);
    transition: color 160ms ease, transform 160ms ease;
}
.nav-menu-all:hover .nav-menu-arrow {
    color: var(--accent);
    transform: translateX(0.1875rem);
}

.nav-menu-toggle:focus-visible,
.nav-menu-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.background-theme-btn, .nav-hamburger-btn {
    display: grid;
    width: 2.8125rem;
    height: 2.8125rem;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 0.625rem;
    background: var(--surface-1);
    cursor: pointer;
}
/* hamburger button */
.nav-hamburger-btn { display: none; margin-left: auto; gap: 0.3125rem; }
.nav-hb-icon { display: grid; gap: 0.3125rem; }
.nav-hb-line {
    display: block;
    width: 1.125rem;
    height: 0.09375rem;
    background: currentColor;
    transition: transform 300ms ease, opacity 300ms ease;
}
.nav-hamburger-btn[aria-expanded="true"] .nav-hb-line:nth-child(1) { transform: translateY(0.40625rem) rotate(-45deg); }
.nav-hamburger-btn[aria-expanded="true"] .nav-hb-line:nth-child(2) { opacity: 0; }
.nav-hamburger-btn[aria-expanded="true"] .nav-hb-line:nth-child(3) { transform: translateY(-0.40625rem) rotate(45deg); }

/* FOOTER elements. specific to footer.html */
.ac-footer { border-top: 1px solid var(--line); padding: 3.4375rem 0 1.4375rem; }
.footer-grid { display: flex; justify-content: space-between; gap: 2.5rem; }
.footer-grid p { max-width: 27.5rem; color: var(--muted); }
.footer-banner { font-size: 1.4375rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.125rem; color: var(--muted); }
.footer-links a:hover { color: var(--text); }
.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.footer-icon {
    width: 1.125rem;
    height: 1.125rem;
    object-fit: contain;
}
.footer-icon-github { filter: invert(1); }
:root[data-theme="light"] .footer-icon-github { filter: none; }
.footer-bottom { 
    display: flex; 
    justify-content: space-between; 
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    gap: 1.25rem; 
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
}





/* home.html */

/* Homepage section 1 */
.landingPage {
    display: grid;
    align-items: center;
    min-height: calc(100vh - 4.6875rem);
}
.landingPage-top {
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1.15fr) minmax(21.25rem, .85fr);
    gap: clamp(3rem, 8vw, 6.875rem);
}
.page-about-bio, .proj-desc {
    max-width: 47.5rem;
    margin: 1.75rem 0 0;
    color: var(--muted);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
}
/* .landingPage-section3 {} */


.home-hero-lede {
    max-width: 34rem;
    margin: 1.75rem 0 0;
    color: var(--muted);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
}
.home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.25rem;
}
.home-hero-actions .button { gap: 0.5rem; }
.home-hero-carousel { position: relative; }
.home-hero-viewport {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: var(--shadow);
}
.home-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    transition: opacity 700ms ease;
}
.home-hero-slide[data-active="true"] { opacity: 1; }
.home-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-hero-caption {
    position: absolute;
    left: 0.875rem;
    bottom: 0.875rem;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: 0.4375rem;
    background: var(--scrim);
    color: var(--muted);
    font-size: max(10px, 0.6875rem);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.home-hero-dots {
    position: absolute;
    right: 0.875rem;
    bottom: 0.875rem;
    display: flex;
    gap: 0.4375rem;
}
.home-hero-dot {
    width: 0.75rem;
    height: 0.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--scrim);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}
.home-hero-dot:hover { border-color: var(--accent); }
.home-hero-dot[aria-current="true"] { background: var(--accent); border-color: var(--accent); }
.home-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--scrim);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease;
}
.home-hero-arrow:hover { border-color: var(--accent); color: var(--accent); }
.home-hero-arrow-prev { left: 0.75rem; }
.home-hero-arrow-next { right: 0.75rem; }
.home-hero-arrow-icon { width: 0.8125rem; height: 0.8125rem; }


/*  ------------------------------------------------------------------------
    ALTERNATIVE HERO MEDIA (INACTIVE): animated graphic

.home-hero-lattice {
    position: relative;
    margin: 0;
    padding: 1.5rem;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: var(--shadow);
}
.home-hero-lattice-svg { width: 100%; height: 100%; overflow: visible; }
.home-hero-lattice-edges path {
    fill: none;
    stroke: var(--line);
    stroke-width: 1;
}
.home-hero-lattice-signals path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 26 234;
    animation: home-hero-lattice-travel 4200ms linear infinite;
}
.home-hero-lattice-signals path:nth-child(2) { animation-delay: -1400ms; }
.home-hero-lattice-signals path:nth-child(3) { animation-delay: -2800ms; }
.home-hero-lattice-nodes circle {
    fill: var(--surface-1);
    stroke: var(--line);
    stroke-width: 1.2;
    animation: home-hero-lattice-pulse 3200ms ease-in-out infinite;
}
.home-hero-lattice-nodes circle:nth-child(3n + 1) { animation-delay: -600ms; }
.home-hero-lattice-nodes circle:nth-child(3n + 2) { animation-delay: -1800ms; }
.home-hero-lattice-label {
    position: absolute;
    left: 1.5rem;
    bottom: 1.25rem;
    color: var(--muted);
    font-size: max(10px, 0.6875rem);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
@keyframes home-hero-lattice-travel {
    from { stroke-dashoffset: 260; }
    to   { stroke-dashoffset: 0; }
}
@keyframes home-hero-lattice-pulse {
    0%, 100% { stroke: var(--line); }
    50%      { stroke: var(--accent); }
}

    ------------------------------------------------------------------------ */


/* Homepage section 2 tech stack. */

.tech-stack { border-top: 1px solid var(--line); }
.tech-row {
    display: grid;
    grid-template-columns: minmax(10.625rem, 0.50fr) minmax(0, 1.65fr);
    gap: clamp(1.875rem, 5vw, 4.375rem);
    align-items: start;

    padding: clamp(1.5rem, 3vw, 2.125rem) 0;
    border-bottom: 1px solid var(--line);
    transition:
        padding-left 180ms ease,
        padding-right 180ms ease, 
        background 180ms ease
}
.tech-row:hover{
    padding-left: 1.125rem;
    padding-right: 1.125rem;
    background: var(--surface-1);
}
.tech-category { display: flex; align-items: baseline; }
.tech-indent {flex: 0 0 2.375rem; }
.tech-category h3 {
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5625rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tech-list li {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface-1);
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 650;
    line-height: 1.25;
    transition:
        color 150ms ease,
        border-color 150ms ease,
        background 150ms ease,
        transform 150ms ease;
}
.tech-list li:hover {
    border-color: var(--accent);
    background: var(--surface-2);
    transform: translateY(-0.125rem);
}






/* Homepage section 2 - current project */
.current-project-heading { max-width: 53.125rem; }
.current-project-description {
    max-width: 45rem;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
}
.current-project-diagram { width: 100%; margin: clamp(2.5rem, 6vw, 4.375rem) 0 0; }
.diagram-preview {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    cursor: zoom-in;
}
.diagram-preview img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.current-project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    margin-top: 1.75rem;
    color: var(--accent);
    font-size: 0.9375rem;
    font-weight: 760;
}
.current-project-link span { transition: transform 160ms ease; }
.current-project-link:hover span { transform: translateX(0.25rem); }
.diagram-lightbox {
    width: 96vw;
    height: 94vh;
    max-width: none;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.diagram-lightbox::backdrop {
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(0.3125rem);
}
.diagram-lightbox-content {
    width: 100%;
    height: 100%;
    padding: 3.125rem;
    overflow: auto;
}
.diagram-lightbox-content img {
    display: block;
    width: max(87.5rem, 100%);
    max-width: none;
    height: auto;
    margin: 0 auto;
}
.diagram-lightbox-close {
    position: absolute;
    top: 1.125rem;
    right: 1.125rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-1) 84%, transparent);
    color: var(--text);
    backdrop-filter: blur(0.875rem);
    box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transition:
        transform 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}
.diagram-lightbox-close:hover {
    transform: translateY(-0.0625rem) scale(1.02);
    background: color-mix(in srgb, var(--surface-2) 72%, var(--surface-1));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    box-shadow: 0 0.875rem 2.125rem rgba(0, 0, 0, 0.28);
}
.diagram-lightbox-close:active{ transform: scale(0.98); }
.diagram-lightbox-close:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.1875rem color-mix(in srgb, var(--accent) 38%, transparent),
        0 0.625rem 1.75rem rgba(0, 0, 0, 0.22);
}
.diagram-lightbox-close-icon {
    width: 1.125rem;
    height: 1.125rem;
    pointer-events: none;
}





/* Publication section */
.publication-heading { margin-bottom: clamp(2.625rem, 6vw, 4.125rem); }
.publication-heading h2 { max-width: 47.5rem; }
.publication {
    display: grid;
    grid-template-columns: minmax(9.375rem, 0.32fr) minmax(0, 1.68fr);
    gap: clamp(2.375rem, 7vw, 5.625rem);
    padding: clamp(1.875rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.publication-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 2.375rem;
}
.publication-venue {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.083em;
    text-transform: uppercase;
}
.publication-track, .publication-pages {
    margin-top: 0.4375rem;
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    font-weight: 650;
}
.publication-content { min-width: 0; }
.publication-title {
    max-width: 56.25rem;
    color: var(--text);
    font-size: clamp(1.5rem, 3vw, 2.375rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.035em;
}
.publication-authors {
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.7;
}
.publication-authors strong {
    color: var(--text);
    font-weight: 700;
}
.publication-abstract {
    max-width: 48.75rem;
    margin-top: 1.5rem;
}
.publication-abstract-text {
    display: grid;
    grid-template-rows: 7.4377rem;
    margin: 0;
    overflow: hidden;
    color: var(--muted);
    font-size: clamp(0.9377rem, 1.5vw, 1.0624rem);
    line-height: 1.75;
    transition: grid-template-rows 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.publication-abstract-text > i {
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    transition:
        -webkit-mask-image 320ms ease,
        mask-image 320ms ease;
}
.publication-abstract[data-open="true"] .publication-abstract-text { grid-template-rows: 1fr; }
.publication-abstract[data-open="true"] .publication-abstract-text > i {
    -webkit-mask-image: linear-gradient(180deg, #000 100%, #000 100%);
            mask-image: linear-gradient(180deg, #000 100%, #000 100%);
}
.publication-abstract-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4377rem;
    margin: 0.6877rem 0 0 -0.5rem;
    padding: 0.3127rem 0.5rem;
    border: 0;
    border-radius: 0.377rem;
    background: none;
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 150ms ease,
        color 150ms ease;
}
.publication-abstract-toggle:hover {
    background: var(--surface-1);
    color: var(--accent);
}
.publication-abstract-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.publication-abstract-chevron { transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1); }
.publication-abstract[data-open="true"] .publication-abstract-chevron { transform: rotate(180deg); }
.publication-abstract[data-open="true"] .publication-abstract-label-more,
.publication-abstract[data-open="false"] .publication-abstract-label-less { display: none; }
.publication-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.875rem;
}
.publication-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.5rem 0.6875rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface-1);
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    font-weight: 700;
    transition:
        border-color 150ms ease,
        color 150ms ease,
        transform 150ms ease;
}
.publication-link:hover {
    color: var(--text);
    border-color: var(--muted);
    transform: translateY(-0.0625rem);
}
.publication-link-primary { color: var(--text); }
.publication-link-icon {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}
.publication-citation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 1.375rem;
    border-top: 1px solid var(--line);
}
.publication-citation-label {
    color: var(--muted);
    font-size: max(10px, 0.6875rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.publication-citation-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.publication-copy {
    padding: 0.4375rem 0.625rem;
    border: 1px solid var(--line);
    border-radius: 0.4375rem;
    background: transparent;
    color: var(--text);
    font-size: max(10px, 0.75rem);
    font-weight: 700;
    cursor: pointer;
    transition:
        background 150ms ease,
        border-color 150ms ease;
}
.publication-copy:hover {
    background: var(--surface-1);
    border-color: var(--muted);
}
.publication-copy-status {
    min-width: 2.8125rem;
    color: var(--accent);
    font-size: max(10px, 0.6875rem);
    font-weight: 700;
}



/* Game Showcase */
.game-showcase-layout {
    display: grid;
    grid-template-columns: minmax(16.25rem, 0.65fr) minmax(0, 1.35fr);
    gap: clamp(2.8125rem, 7vw, 5.625rem);
    align-items: center;
}
.game-showcase-content { min-width: 0; }
.game-showcase-content h2 { max-width: 32.5rem; }
.game-showcase-description { 
    max-width: 31.25rem; 
    margin: 1.5rem 0 0; 
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
}
.game-showcase-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5625rem 0 0;
    padding: 0;
    list-style: none;
}
.game-showcase-tech li {
    padding: 0.375rem 0.5625rem;
    border: 1px solid var(--line);
    border-radius: 0.4375rem;
    background: var(--surface-1);
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    font-weight: 700;
}
.game-showcase-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    margin-top: 1.875rem;
    color: var(--accent);
    font-size: 0.9375rem;
    font-weight: 760;
}
.game-showcase-link span { transition: transform 160ms ease; }
.game-showcase-link:hover span { transform: translateX(0.25rem); }
.game-showcase-video {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16/9;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}
.game-showcase-video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}



/* PROJECTS elements. specific to projects.html */
.projects-intro { padding-top: clamp(5.625rem, 12vw, 10rem); }
.projects-intro h1 { font-size: clamp(2.875rem, 7vw, 5.125rem); }
.project-toolbar {
    display: flex;
    justify-content: space-between;
    padding-bottom: 1.5rem;
    color: var(--muted);
    font-size: 0.8125rem;
}


/* TRANSFORMER elements.  transformer.html */
.translator-heading {
    display: flex;
    align-items: end;
    align-items: last baseline;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2.25rem;
}
.translator-card {
    overflow: hidden;
    border: 1px solid #dceeef;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1.375rem 4.375rem rgba(28, 43, 75, 0.10), 0 0.125rem 0.5rem rgba(28, 43, 75, 0.04);
}
.badge {
    flex: 0 0 auto;
    margin-bottom: 0.3125rem;
    padding: 0.5625rem 0.75rem;
    border: 1px solid #dccce2;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    color: #6d7777;
    font-size: max(10px, 0.75rem);
    font-weight: 700;
    backdrop-filter: blur(0.75rem);
}
.badge.ready{
    color: #116c45;
    border-color: #cae9dd;
    /* Tinted to match its own text and border. This was lavender, which nobody
       had ever seen: the code path that puts .ready on the badge was commented
       out until the endpoint check was wired up. */
    background: #edf7f2;
}
.badge.warning {
    color: #985111;
    border-color: #f2dfcc;
    background: #fff8ec;
}
.translator-language-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.125rem;
    min-height: 3.875rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e5eaff;
    color: #293543;
    font-size: 0.95rem;
    font-weight: 770;
}
.translator-language-row span:last-child { padding-left: 0.375rem; }
.translator-arrow { color: #9aabba }
.translator-panes{ display: grid; grid-template-columns: 1fr 1px 1fr; }
.translator-pane{ display: flex; flex-direction: column; padding: 1.5rem 1.625rem 1.25rem; }
.translator-pane label { 
    margin-bottom: 0.75rem;
    color: #777199;
    font-size: max(10px, 0.77rem);
    font-weight: 770;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
 }
.translator-ui-input { 
    width: 100%;
    flex: 1;
    min-height: 15.625rem;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #192345;
    font-size: 1.20rem;
    line-height: 1.65;
 }
.translator-ui-input::placeholder { color: #aab4cc; }
.translator-pane-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.875rem;
    margin-top: 0.75rem;
    color: #98a3aa;
    font-size: max(10px, 0.77rem);
}
.translator-text-button {
    border: 0;
    padding: 0.3125rem 0;
    background: transparent;
    color: #5d6b88;
    font-weight: 700;
}
.translator-text-button:disabled { opacity: 0.38; cursor: default; }
.translator-divider { background: #e8edff; }
.translator-output {
    flex: 1;
    min-height: 15.625rem;
    color: #192433;
    font-size: 1.22rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.translator-placeholder { color: #aabac5; }
.translator-output-footer { justify-content: flex-end; }
.translator-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.125rem 1.375rem;
    border-top: 1px solid #e5eaff;
    background: #f9fbff;
    grid-column: 1 / -1;
}
.translator-status {
    margin: 0;
    color: #777654;
    font-size: 0.85rem;
}
.translator-status.error { color: #a84c2c; }
.translator-translate-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    min-width: 8.125rem;
    min-height: 2.8125rem;
    border: 0;
    border-radius: 0.75rem;
    padding: 0 1.25rem;
    background: #1f2a20;
    color: #f0f0f0;
    font-weight: 760;
    box-shadow: 0 0.5rem 1.25rem rgba(31, 42, 77, 0.15);
    transition: transform 120ms ease, opacity 120ms ease;
}
.translator-translate-button:hover:not(:disabled) { transform:translateY(-0.0625rem); }
.translator-translate-button:disabled { opacity: 0.60; cursor: default; }
.translator-spinner {
    display: none;
    width: 0.9375rem;
    height: 0.9375rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #f0f0f0;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
.translator-translate-button.loading .translator-spinner { display: inline-block; }

@keyframes spin { 
    to { transform: rotate(360deg); } 
}



/* GAME ENGINE elements. ace.html */

.ace-heading { 
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.4375rem;
    margin-bottom: 2.25rem;
 }
.ace-video-container {
    width: 100%;
    max-width: 43.75rem;
    aspect-ratio: 16 / 9;
    border-radius: 0.5rem;
    overflow: hidden;
}
.ace-video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.video-description { margin-bottom: 5rem; }



/* ACAI. SMALL LANGUAGE MODEL DECODER-ONLY acai.html  */
.acai-heading {
    display: flex;
    align-items: end;
    align-items: last baseline;
    justify-content: space-between;
    gap: 1.4375rem;
    margin-bottom: 2.25rem;
}
.acai-card {
    overflow: hidden;
    border: 1px solid #dceeef;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 1.375rem 4.375rem rgba(28, 43, 75, 0.10), 0 0.125rem 0.5rem rgba(28, 43, 75, 0.04);
}
/* .acai-textbox-row { grid-template-columns: 1fr auto 1fr; padding-inline: 1.25rem; } */

.acai-textbox-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.125rem;
    min-height: 3.875rem;
    padding: 0 1.5rem;
    border-bottom: 1px solid #e5eaff;
    color: #293543;
    font-size: 0.95rem;
    font-weight: 770;
}
.acai-textbox-row span:last-child { padding-left: 0.375rem; }


.acai-panes{ display: grid; grid-template-columns: 1fr 1px 1fr; }
.acai-pane{ display: flex; flex-direction: column; padding: 1.5rem 1.625rem 1.25rem; }
.acai-pane label { 
    margin-bottom: 0.75rem;
    color: #777199;
    font-size: max(10px, 0.77rem);
    font-weight: 770;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
 }
.acai-ui-input { 
    width: 100%;
    flex: 1;
    min-height: 15.625rem;
    resize: none;
    border: 0;
    outline: 0;
    background: transparent;
    color: #192345;
    font-size: 1.20rem;
    line-height: 1.65;
 }
.acai-ui-input::placeholder { color: #aab4cc; }
.acai-pane-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.875rem;
    margin-top: 0.75rem;
    color: #98a3aa;
    font-size: max(10px, 0.77rem);
}
.acai-text-button {
    border: 0;
    padding: 0.3125rem 0;
    background: transparent;
    color: #5d6b88;
    font-weight: 700;
}
.acai-text-button:disabled { opacity: 0.38; cursor: default; }
.acai-divider { background: #e8edff; }
.acai-output {
    flex: 1;
    min-height: 15.625rem;
    color: #192433;
    font-size: 1.22rem;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.acai-placeholder { color: #aabac5; }
.acai-output-footer { justify-content: flex-end; }
.acai-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.125rem 1.375rem;
    border-top: 1px solid #e5eaff;
    background: #f9fbff;
    grid-column: 1 / -1;
}
.acai-status {
    margin: 0;
    color: #777654;
    font-size: 0.85rem;
}
.acai-status.error { color: #a84c2c; }
.acai-response-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5625rem;
    min-width: 8.125rem;
    min-height: 2.8125rem;
    border: 0;
    border-radius: 0.75rem;
    padding: 0 1.25rem;
    background: #1f2a20;
    color: #f0f0f0;
    font-weight: 760;
    box-shadow: 0 0.5rem 1.25rem rgba(31, 42, 77, 0.15);
    transition: transform 120ms ease, opacity 120ms ease;
}
.acai-response-button:hover:not(:disabled) { transform:translateY(-0.0625rem); }
.acai-response-button:disabled { opacity: 0.60; cursor: default; }
.acai-spinner {
    display: none;
    width: 0.9375rem;
    height: 0.9375rem;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #f0f0f0;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}
.acai-response-button.loading .acai-spinner { display: inline-block; }

/* ACAI — Model description */
.acai-model-heading { margin-bottom: clamp(2.625rem, 6vw, 4.25rem); }
.acai-model-intro {
    max-width: 30rem;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.7;
}
.acai-model-highlights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.acai-model-highlight { padding: clamp(1.5rem, 3vw, 2.125rem); }
.acai-model-highlight:first-child { padding-left: 0; }
.acai-model-highlight + .acai-model-highlight { border-left: 1px solid var(--line); }
.acai-model-highlight span {
    display: block;
    margin-bottom: 0.625rem;
    color: var(--muted);
    font-size: max(10px, 0.6875rem);
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}
.acai-model-highlight strong {
    display: block;
    color: var(--text);
    font-size: clamp(1.6875rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}
.acai-model-spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.8125rem, 8vw, 6.875rem);
    margin-top: clamp(3.4375rem, 8vw, 5.625rem);
}
.acai-model-spec-group h3 {
    margin-bottom: 1.25rem;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.acai-model-spec-list { margin: 0; border-top: 1px solid var(--line); }
.acai-model-spec-list > div {
    display: grid;
    grid-template-columns: minmax(9.375rem, 0.8fr) minmax(0, 1.2fr);
    gap: 1.5625rem;
    padding: 0.9375rem 0;
    border-bottom: 1px solid var(--line);
}
.acai-model-spec-list dt {
    color: var(--muted);
    font-size: 0.8125rem;
    font-weight: 600;
}
.acai-model-spec-list dd {
    margin: 0;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 650;
    text-align: right;
}
.acai-model-description {
    margin-top: clamp(4.0625rem, 9vw, 6.5625rem);
    padding-top: clamp(2.1875rem, 5vw, 3.4375rem);
    border-top: 1px solid var(--line);
}
.acai-model-description-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2.5rem, 7vw, 5.625rem);
    max-width: 61.25rem;
}

.acai-model-description-grid p {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    line-height: 1.8;
}


/*-----------------------*/




/* For Project card.  project_card.html */
.project-card {
  display: flex;
  flex-direction: column;
  min-height: 24.375rem;
  padding: 1.625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-1);
  transition: transform 180ms ease, border-color 180ms ease;
}
.project-card:hover { transform: translateY(-0.25rem); border-color: var(--muted); }
.project-card-topline { display: flex; justify-content: space-between; gap: 0.9375rem; align-items: start; }
.project-card h3 { margin-top: 0.875rem; }
.project-card p { color: var(--muted); }
.project-card .text-link { margin-top: auto; }
.status-pill { padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: max(10px, 0.6875rem); white-space: nowrap; }
.tag-list { display: flex; flex-wrap: wrap; gap: 0.4375rem; margin: 1.125rem 0 1.5rem; padding: 0; list-style: none; }
.tag-list li { padding: 0.3125rem 0.5rem; background: var(--surface-2); border-radius: 0.4375rem; color: var(--muted); font-size: max(10px, 0.75rem); font-weight: 700; }
.text-link { color: var(--accent); font-weight: 760; }
.text-link:hover { text-decoration: underline; text-underline-offset: 0.25rem; }


/* project_detail.html  */
.project-hero h1 { font-size: clamp(2.875rem, 7vw, 5.125rem); }
.project-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(17.5rem, .7fr); gap: clamp(3.125rem, 8vw, 6.875rem); align-items: end; }
.back-link { display: block; margin-bottom: 2.375rem; color: var(--muted); font-weight: 700; }
.project-meta { padding: 1.625rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-1); }
.project-meta > div + div { margin-top: 1.625rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.meta-label { display: block; margin-bottom: 0.5rem; color: var(--muted); font-size: max(10px, 0.75rem); text-transform: uppercase; letter-spacing: .12em; }
.highlight-list { margin: 0; padding: 0; list-style: none; }
.highlight-list li { padding: 1.125rem 0; border-bottom: 1px solid var(--line); font-size: 1.25rem; }
.highlight-list li::before { content: "↳"; margin-right: 0.875rem; color: var(--accent); }



 /* ---------------------- */



.about-profile { margin: 0 0 0 4rem; }
.about-profile-frame {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: var(--shadow);
}
.about-profile-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-profile-grid {
    margin-top: 3rem;
    gap: clamp(4.25rem, 12vw, 11.25rem);
}
.about-profile-bio {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    max-width: 67.0%;
}
.about-profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 1.5rem;
}
.about-profile-resume {
    display: inline-flex;
    align-items: center;
    gap: 0.5625rem;
    color: var(--accent);
    font-size: 0.9375rem;
    font-weight: 760;
}
.about-profile-resume span { transition: transform 160ms ease; }
.about-profile-resume:hover span { transform: translate(0.125rem, -0.125rem); }


/* About page section - skills */

.about-skill-lede {
    max-width: 42rem;
    margin: 1.5rem 0 0;
    color: var(--muted);
    font-size: 1.0625rem;
}
.about-skill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
    margin-top: 3rem;
}
.about-skill-card {
    padding: 1.125rem 1.1875rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    background: transparent;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}
.about-skill-card:hover {
    border-color: var(--surface-2);
    background: var(--surface-1);
    transform: translateY(-0.125rem);
}
.about-skill-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.6875rem;
    border-bottom: 1px solid var(--line);
}
.about-skill-card-head h3 {
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
}
.about-skill-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.1875rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.about-skill-card-list li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--muted);
    font-size: 0.875rem;
    font-weight: 550;
    transition: color 140ms ease;
}
.about-skill-card-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 0.3125rem;
    height: 1px;
    background: var(--line);
    transition: background 140ms ease, width 140ms ease;
}
.about-skill-card-list li:hover { color: var(--text); }
.about-skill-card-list li:hover::before { background: var(--accent); width: 0.625rem; }




 /* ---------------------- */



/* MEDIA elements */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}
@media (max-width: 900px) {
    .nav-hamburger-btn { display:grid; }
    .background-theme-btn { order: 3; }
    .nav-pages {
        position: fixed;
        inset: 4.625rem 1.25rem auto;
        display: grid;
        gap: 0.25rem;
        padding: 0.875rem;
        margin: 0;
        border: 1px solid var(--line);
        border-radius: 0.875rem;
        background: var(--surface-1);
        box-shadow: var(--shadow);
        opacity: 0;
        transform: translateY(-0.625rem);
        pointer-events: none;
        transition: opacity 160ms ease, transform 160ms ease;
    }
    .nav-pages.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .nav-pages > a { padding: 0.75rem; }
    .nav-menu-toggle {
        justify-content: space-between;
        width: 100%;
        padding: 0.75rem;
    }
    .nav-menu-panel {
        top: calc(100% + 0.375rem);
        right: 0;
        width: auto;
    }
    .nav-menu-link { padding: 0.625rem; }
    .tech-row { grid-template-columns: 1fr; gap: 1.375rem; }
    .tech-row:hover { padding-left: 0; padding-right: 0; background: transparent; }
    .about-skill-grid { grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); margin-top: 2.5rem; }
    .about-skill-card:hover { transform: none; }
    .landingPage { min-height: auto; }
    .landingPage-top, .content-grid { grid-template-columns: 1fr; }
    .home-hero-media { max-width: 24rem; }
    .about-profile { max-width: 22rem; }
    .about-profile { margin-left: 0; }
    .about-profile-bio { max-width: none; }
    /* .project-hero-grid, */
    .badge { margin: 0; }
    .translator-language-row { grid-template-columns: 1fr auto 1fr; padding-inline: 1.25rem; }
    .translator-panes { grid-template-columns: 1fr; }
    .translator-pane { min-height: 18.75rem; padding-inline: 1.25rem; }
    .translator-divider { width: 100%; height: 1px; }
    .translator-actions { align-items: stretch; flex-direction: column; }
    .translator-translate-button { width: 100%; }
    .publication { grid-template-columns: 1fr; gap: 1.5625rem; }
    .publication-meta {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem 0.875rem;
        padding-left: 0;
    }
    .publication-track, .publication-pages { margin-top: 0; }
    .game-showcase-layout { grid-template-columns: 1fr; gap:2.375rem; }
    .game-showcase-content h2, .game-showcase-description { max-width: 45rem; }
    .acai-model-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acai-model-highlight:nth-child(3) {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .acai-model-highlight:nth-child(4) { border-top: 1px solid var(--line); }
    .acai-model-spec-grid {
        grid-template-columns: 1fr;
        gap: 3.125rem;
    }
    .acai-model-description-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 620px) {
    h1 { font-size: clamp(2.6875rem, 14vw, 4rem); }
    .shell { width: min(calc(100% - 1.75rem), var(--shell)); }
    .banner-text { display: none; }
    .section-heading, .footer-grid, .footer-bottom { align-items: flex-start; flex-direction: column; }
    .tech-row { padding: 1.75rem 0; }
    .tech-category { gap: 0.75rem; }
    .tech-list { gap: 0.5rem; }
    .tech-list li { padding: 0.375rem 0.5625rem; font-size: max(10px, 0.75rem); }
    .about-skill-grid { grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr)); gap: 0.75rem; }
    .about-skill-card { padding: 0.9375rem 1rem 1.0625rem; }
    .about-skill-lede { font-size: 1rem; }
    .current-project-description{ font-size: 1rem; }
    .diagram-lightbox-content { padding: 1.5rem; }
    .publication-citation {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }
    .publication-title { font-size: clamp(1.4375rem, 7vw, 1.875rem); }
    /* .project-card {} */
    .acai-model-highlights { grid-template-columns: 1fr; }
    .acai-model-highlight { padding: 1.5rem 0; }
    .acai-model-highlight + .acai-model-highlight {
        border-left: 0;
        border-top: 1px solid var(--line);
    }
    .acai-model-spec-list > div {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .acai-model-spec-list dd { text-align: left; }
}
















/* =========================================================
   IMAGE PROVENANCE ANALYZER
   image_provenance.html
   ========================================================= */


/* ---------- Hero ---------- */

.provenance-hero {
    padding-top: clamp(5.625rem, 11vw, 9.0625rem);
}

.provenance-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(18.75rem, 0.8fr);
    gap: clamp(3.125rem, 8vw, 6.875rem);
    align-items: end;
}

.provenance-hero-copy h1 {
    max-width: 50rem;
}

.provenance-intro {
    max-width: 43.75rem;
    margin: 1.75rem 0 0;
    color: var(--muted);
    font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
    line-height: 1.75;
}


/* ---------- Analysis pipeline ---------- */

.provenance-method {
    border-top: 1px solid var(--line);
}

.provenance-method-step {
    display: grid;
    grid-template-columns: 2.625rem minmax(0, 1fr);
    gap: 1.125rem;
    padding: 1.375rem 0;
    border-bottom: 1px solid var(--line);
}

.provenance-method-step > span {
    color: var(--accent);
    font-size: max(10px, 0.6875rem);
    font-weight: 800;
    letter-spacing: 0.1em;
}

.provenance-method-step strong {
    display: block;
    margin-bottom: 0.3125rem;
    color: var(--text);
    font-size: 0.875rem;
}

.provenance-method-step p {
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}


/* ---------- Workspace ---------- */

.provenance-workspace {
    padding: clamp(4.375rem, 9vw, 7.5rem) 0;
}

.provenance-workspace-heading,
.provenance-results-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2.5rem;
    margin-bottom: 2.625rem;
}

.provenance-workspace-note,
.provenance-results-heading > p {
    max-width: 30rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.7;
}


/* ---------- Upload card ---------- */

.provenance-upload-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
    box-shadow: var(--shadow);
}

.provenance-drop-zone {
    position: relative;
    min-height: 26.875rem;
    display: grid;
    place-items: center;
    padding: clamp(1.875rem, 5vw, 3.75rem);
    border: 2px dashed transparent;
    transition:
        border-color 160ms ease,
        background 160ms ease;
}

.provenance-drop-zone.dragging {
    border-color: var(--accent);
    background:
        color-mix(
            in srgb,
            var(--accent) 7%,
            var(--surface-1)
        );
}


/* ---------- Empty upload state ---------- */

.provenance-upload-empty {
    width: min(100%, 34.375rem);
    text-align: center;
}

.provenance-upload-icon {
    display: grid;
    width: 3.75rem;
    height: 3.75rem;
    place-items: center;
    margin: 0 auto 1.5rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: var(--bg);
    color: var(--accent);
    font-size: 1.75rem;
}

.provenance-upload-empty h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.provenance-upload-empty p {
    max-width: 31.25rem;
    margin: 1rem auto 1.5rem;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.7;
}

.provenance-file-requirements {
    display: block;
    margin-top: 1.25rem;
    color: var(--muted);
    font-size: max(10px, 0.625rem);
    font-weight: 800;
    letter-spacing: 0.11em;
}


/* ---------- Preview ---------- */

.provenance-preview {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(15rem, 0.6fr);
    gap: clamp(1.875rem, 5vw, 3.75rem);
    align-items: center;
}

.provenance-preview[hidden] {
    display: none;
}

.provenance-preview-frame {
    min-height: 22.5rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 0.875rem;
    background: var(--bg);
}

.provenance-preview-frame img {
    width: 100%;
    max-height: 32.5rem;
    object-fit: contain;
}

.provenance-preview-info {
    min-width: 0;
}

.provenance-preview-label {
    display: block;
    margin-bottom: 0.625rem;
    color: var(--muted);
    font-size: max(10px, 0.6875rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.provenance-file-name {
    display: block;
    overflow-wrap: anywhere;
    color: var(--text);
    font-size: 1.25rem;
}

.provenance-file-meta {
    display: block;
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.8125rem;
}

.provenance-preview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.125rem;
    margin-top: 1.75rem;
}

.provenance-text-action {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    cursor: pointer;
}

.provenance-text-action:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}


/* ---------- Action bar ---------- */

.provenance-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5625rem;
    padding: 1.125rem 1.375rem;
    border-top: 1px solid var(--line);
    background:
        color-mix(
            in srgb,
            var(--surface-1) 88%,
            var(--bg)
        );
}

.provenance-status {
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
}

.provenance-status.error {
    color: #cf695d;
}

.provenance-analyze-button {
    min-width: 10rem;
}

.provenance-analyze-button:disabled {
    opacity: 0.45;
    cursor: default;
    transform: none;
}


/* ---------- Loading spinner ---------- */

.provenance-spinner {
    display: none;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid
        color-mix(
            in srgb,
            var(--accent-ink) 35%,
            transparent
        );
    border-top-color: var(--accent-ink);
    border-radius: 50%;
    animation: provenance-spin 0.7s linear infinite;
}

.provenance-analyze-button.loading .provenance-spinner {
    display: inline-block;
}

@keyframes provenance-spin {
    to {
        transform: rotate(360deg);
    }
}


/* ---------- Results ---------- */

.provenance-results {
    margin-top: clamp(4.375rem, 9vw, 6.875rem);
}

.provenance-results[hidden] {
    display: none;
}


/* ---------- Score ---------- */

.provenance-score-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2.1875rem, 6vw, 4.6875rem);
    align-items: center;
    padding: clamp(1.875rem, 5vw, 3.4375rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}

.provenance-score-gauge {
    --score-angle: 0deg;

    width: clamp(11.25rem, 21vw, 15.3125rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--accent) 0deg,
            var(--accent) var(--score-angle),
            color-mix(
                in srgb,
                var(--line) 80%,
                transparent
            ) var(--score-angle),
            color-mix(
                in srgb,
                var(--line) 80%,
                transparent
            ) 360deg
        );
}

.provenance-score-inner {
    width: 78%;
    aspect-ratio: 1;
    display: flex;
    align-items: baseline;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface-1);
    color: var(--text);
}

.provenance-score-value {
    align-self: center;
    font-size: clamp(2.75rem, 6vw, 4.5rem);
    font-weight: 760;
    line-height: 1;
    letter-spacing: -0.06em;
}

.provenance-score-denominator {
    align-self: center;
    margin: 1.75rem 0 0 0.375rem;
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    font-weight: 700;
}

.provenance-classification {
    display: inline-flex;
    margin-bottom: 0.875rem;
    padding: 0.375rem 0.5625rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--accent);
    font-size: max(10px, 0.6875rem);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.provenance-score-copy h3 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.provenance-summary {
    max-width: 45rem;
    margin: 1.25rem 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.6vw, 1.125rem);
    line-height: 1.75;
}

.provenance-score-note {
    max-width: 42.5rem;
    margin: 1.375rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: max(10px, 0.75rem);
    line-height: 1.65;
}


/* ---------- Evidence ---------- */

.provenance-evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.125rem;
    margin-top: 1.125rem;
}

.provenance-evidence-card {
    padding: 1.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}

.provenance-evidence-kicker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--muted);
    font-size: max(10px, 0.625rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.provenance-evidence-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    flex: 0 0 0.4375rem;
    border-radius: 50%;
    background: var(--accent);
}

.provenance-evidence-card h3 {
    min-height: 3.125rem;
    font-size: 1.25rem;
    line-height: 1.25;
    letter-spacing: -0.025em;
}

.provenance-evidence-list {
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.provenance-evidence-list li {
    position: relative;
    padding: 0.9375rem 0 0.9375rem 1.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.provenance-evidence-list li::before {
    content: "↳";
    position: absolute;
    left: 0;
    color: var(--accent);
}


/* ---------- Raw responses ---------- */

.provenance-raw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
    margin-top: 1.125rem;
}

.provenance-details {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-1);
}

.provenance-details summary {
    padding: 1.25rem 1.5rem;
    color: var(--text);
    font-size: 0.8125rem;
    font-weight: 750;
    cursor: pointer;
}

.provenance-details[open] summary {
    border-bottom: 1px solid var(--line);
}

.provenance-details pre {
    max-height: 26.25rem;
    margin: 0;
    padding: 1.5rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--muted);
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: max(10px, 0.75rem);
    line-height: 1.65;
}

.provenance-reset-row {
    display: flex;
    justify-content: center;
    margin-top: 2.1875rem;
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {

    .provenance-hero-grid {
        grid-template-columns: 1fr;
    }

    .provenance-method {
        max-width: 40.625rem;
    }

    .provenance-workspace-heading,
    .provenance-results-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 1.25rem;
    }

    .provenance-preview {
        grid-template-columns: 1fr;
    }

    .provenance-preview-frame {
        min-height: 18.75rem;
    }

    .provenance-score-card {
        grid-template-columns: 1fr;
    }

    .provenance-score-gauge {
        width: 12.5rem;
    }

    .provenance-evidence-grid {
        grid-template-columns: 1fr;
    }

    .provenance-evidence-card h3 {
        min-height: 0;
    }

    .provenance-raw-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {

    .provenance-drop-zone {
        min-height: 22.5rem;
        padding: 1.5rem;
    }

    .provenance-action-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .provenance-analyze-button {
        width: 100%;
    }

    .provenance-score-card {
        padding: 1.5625rem;
    }

    .provenance-score-gauge {
        width: 10.625rem;
    }
}