:root {
    --ink: #152b37;
    --muted: #52656f;
    --paper: #f9fafb;
    --white: #fff;
    --line: #dce3e7;
    --blue: #144bed;
    --dark: #112d3b;
    --mint: #c8f2d9;
    --max: 1200px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px
}

body {
    margin: 0
}

a {
    color: inherit;
    text-underline-offset: 5px
}

a:hover {
    text-decoration-color: var(--blue)
}

button,
a {
    -webkit-tap-highlight-color: transparent
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 5px
}

button {
    font: inherit
}

::selection {
    background: var(--mint);
    color: var(--dark)
}

.wrap {
    width: min(var(--max), calc(100% - 96px));
    margin-inline: auto
}

.skip {
    position: fixed;
    top: -100px;
    left: 20px;
    z-index: 100;
    background: white;
    padding: 12px
}

.skip:focus {
    top: 15px
}

.site-header {
    border-bottom: 1px solid var(--line);
    background: rgba(249, 250, 251, .97);
    position: sticky;
    top: 0;
    z-index: 20
}

.nav-shell {
    min-height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 28px
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    font-weight: 650;
    font-size: 1rem;
    letter-spacing: -.02em
}

.brand-mark {
    display: block;
    width: 37px;
    height: 37px;
    flex: 0 0 auto
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px
}

.nav-links a {
    font-size: .875rem;
    text-decoration: none;
    padding: 9px 0;
    border-bottom: 1px solid transparent
}

.nav-links a:hover,
.nav-links a[aria-current=page] {
    border-color: var(--blue);
    color: var(--blue)
}

.nav-links .nav-contact {
    border: 1px solid var(--ink);
    padding: 10px 17px
}

.menu-toggle {
    display: none;
    background: none;
    border: 1px solid var(--line);
    padding: 9px 14px;
    color: var(--ink)
}

.eyebrow {
    font: 500 .75rem/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .11em;
    text-transform: uppercase;
    margin: 0 0 24px
}

.hero {
    padding: 74px 0 48px
}

.hero-layout {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 55px;
    align-items: center
}

.hero h1 {
    font-size: clamp(3rem, 5.6vw, 5.15rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -.065em;
    margin: 0 0 30px
}

.hero h1 span {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    font-style: italic;
    color: var(--blue);
    letter-spacing: -.055em
}

.intro {
    font-size: 1.13rem;
    line-height: 1.75;
    max-width: 550px;
    color: var(--muted)
}

.hero-note {
    font-size: .875rem;
    line-height: 1.7;
    color: var(--muted);
    margin-top: 25px;
    max-width: 440px
}

.actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    margin-top: 32px
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 47px;
    padding: 12px 23px;
    background: var(--blue);
    border: 1px solid var(--blue);
    color: white;
    font-weight: 550;
    font-size: .875rem;
    text-decoration: none;
    transition: background .18s, transform .18s
}

.button:hover {
    background: #0c35b4;
    transform: translateY(-2px)
}

.button.secondary {
    background: transparent;
    color: var(--ink);
    border-color: var(--line)
}

.text-link {
    font-size: .875rem;
    font-weight: 550
}

.science-figure {
    margin: 0;
    background: var(--dark);
    color: white;
    position: relative;
    padding: 28px 25px 24px;
    min-width: 0
}

.science-figure .figure-label {
    display: flex;
    justify-content: space-between;
    color: #c0d1d8;
    font: .75rem ui-monospace, monospace;
    letter-spacing: .07em
}

.science-figure img {
    width: 100%;
    height: 310px;
    display: block;
    object-fit: contain;
    margin: 15px 0 10px
}

.science-figure figcaption {
    border-top: 1px solid #3d5663;
    padding-top: 19px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: .75rem;
    color: #c0d1d8;
    line-height: 1.6
}

.science-figure figcaption strong {
    color: var(--mint);
    font-weight: 400
}

.hero-footer {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    margin-top: 56px;
    padding-bottom: 20px;
    color: var(--muted);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    gap: 20px
}

.section {
    padding: 75px 0
}

.section-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 35px;
    gap: 30px
}

.section-top .eyebrow {
    margin-bottom: 12px;
    color: var(--blue)
}

h2 {
    font-size: clamp(2rem, 3.1vw, 2.8rem);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.15;
    margin: 0
}

h3 {
    font-size: 1.5rem;
    font-weight: 550;
    letter-spacing: -.03em;
    line-height: 1.3;
    margin: 0 0 15px
}

p {
    line-height: 1.75
}

p:first-child {
    margin-top: 0
}

.section-description {
    max-width: 340px;
    color: var(--muted);
    font-size: .95rem;
    margin: 0
}

.project-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px
}

.project-card {
    border: 1px solid var(--line);
    background: white;
    display: flex;
    flex-direction: column;
    min-width: 0
}

.project-card.featured {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1.05fr 1.05fr;
    border-color: #d7d3cd;
    border-width: 2px
}

.project-panel {
    min-height: 205px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative
}

.project-panel.blue {
    background: #5070cf;
    color: white
}

.project-panel.mint {
    background: var(--mint);
    color: var(--dark)
}

.project-panel.slate {
    background: #dce7ed;
    color: var(--dark)
}

.panel-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: .75rem ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .08em
}

.panel-number {
    font-size: 4.5rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -.075em;
    margin-top: 35px
}

.featured .panel-number {
    font-size: clamp(4rem, 7vw, 6rem)
}

.panel-caption {
    font-size: .875rem;
    margin-top: 10px
}

.project-body {
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: start
}

.project-body .eyebrow {
    color: var(--muted);
    margin-bottom: 15px
}

.project-body h3 {
    font-size: 1.75rem
}

.project-body p {
    color: var(--muted);
    font-size: 1rem;
    margin: 0 0 24px
}

.project-body .text-link {
    margin-top: auto
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 25px
}

.tag {
    font-size: .75rem;
    border: 1px solid var(--line);
    padding: 5px 9px;
    color: var(--muted);
    line-height: 1.4
}

.expertise {
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
    padding-top: 30px
}

.expertise .eyebrow {
    color: var(--blue);
    margin-bottom: 20px
}

.expertise h3 {
    font-size: 1.2rem
}

.expertise p {
    color: var(--muted);
    font-size: .95rem
}

.research-band {
    background: var(--dark);
    color: white;
    padding: 67px 0
}

.research-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px
}

.research-band .eyebrow {
    color: var(--mint)
}

.research-band h2 {
    font-size: 3rem
}

.research-band p {
    color: #c5d4dc
}

.research-band .button {
    background: var(--mint);
    color: var(--dark);
    border-color: var(--mint)
}

.research-mini {
    border-bottom: 1px solid #48616c;
    padding: 22px 0;
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 15px
}

.research-mini:first-child {
    padding-top: 0
}

.research-mini span {
    font: .75rem ui-monospace, monospace;
    color: var(--mint);
    padding-top: 5px
}

.research-mini a {
    font-size: 1.1rem;
    line-height: 1.5;
    text-decoration: none
}

.research-mini a:hover {
    text-decoration: underline
}

.about-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 90px
}

.about-copy .intro {
    font-size: 1.05rem;
    margin-top: 25px
}

.about-copy .small-note {
    font-size: .875rem;
    color: var(--muted);
    margin-top: 22px
}

.timeline-heading {
    font-size: .75rem;
    font-family: ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin: 0 0 18px
}

.timeline-item {
    display: grid;
    grid-template-columns: 102px 1fr;
    gap: 20px;
    padding: 17px 0;
    border-top: 1px solid var(--line)
}

.timeline-item time {
    font-size: .8rem;
    color: var(--muted);
    padding-top: 4px
}

.timeline-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 550
}

.timeline-item p {
    font-size: .875rem;
    color: var(--muted);
    margin: 3px 0 0;
    line-height: 1.55
}

.education {
    margin-top: 45px
}

.contact {
    background: #e9eff5;
    padding: 67px 0
}

.contact-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 35px
}

.contact .eyebrow {
    color: var(--blue);
    margin-bottom: 18px
}

.contact h2 {
    max-width: 640px;
    font-size: clamp(2rem, 3.3vw, 3rem)
}

.contact a.email {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    white-space: nowrap
}

.contact-links {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    font-size: .875rem
}

.site-footer {
    padding: 28px 0
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: var(--muted);
    font-size: .75rem
}

.detail-hero {
    padding: 58px 0 52px
}

.breadcrumbs {
    font-size: .875rem;
    color: var(--muted);
    margin: 0 0 45px;
    display: flex;
    gap: 14px
}

.detail-hero h1 {
    font-size: clamp(2.7rem, 5.1vw, 4.8rem);
    letter-spacing: -.055em;
    line-height: 1.1;
    font-weight: 500;
    max-width: 980px;
    margin: 0 0 30px
}

.detail-hero .eyebrow {
    color: var(--blue)
}

.detail-hero .intro {
    max-width: 770px;
    font-size: 1.15rem
}

.detail-meta {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    margin-top: 35px;
    font-size: .875rem
}

.detail-meta span {
    display: block;
    color: var(--muted);
    font-size: .75rem;
    margin-bottom: 8px
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    padding: 38px
}

.metrics.blue {
    background: #5070cf;
    color: white
}

.metrics.mint {
    background: var(--mint);
    color: var(--dark)
}

.metrics.slate {
    background: var(--dark);
    color: white
}

.metric strong {
    display: block;
    font-size: clamp(2rem, 4vw, 3.8rem);
    line-height: 1.2;
    letter-spacing: -.045em;
    font-weight: 450;
    margin-bottom: 10px
}

.metric span {
    font-size: .875rem
}

.metric-note {
    font-size: .75rem;
    color: var(--muted);
    margin-top: 12px
}

.case-layout {
    display: grid;
    grid-template-columns: 225px 1fr;
    gap: 70px;
    padding: 65px 0 80px
}

.case-aside {
    font-size: .875rem
}

.case-aside strong {
    font-weight: 500
}

.case-aside .tags {
    margin-top: 15px
}

.case-content {
    max-width: 780px
}

.case-content h2 {
    font-size: 2rem;
    margin-bottom: 22px
}

.case-content>section {
    margin-bottom: 46px;
    scroll-margin-top: 110px
}

.case-content p {
    color: var(--muted);
    font-size: 1.02rem
}

.choice {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 27px
}

.choice h3 {
    font-size: 1.2rem
}

.next-project {
    border-top: 1px solid var(--line);
    padding: 35px 0 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px
}

.next-project .eyebrow {
    margin-bottom: 9px;
    color: var(--muted)
}

.next-project a {
    font-size: 1.4rem
}

.research-hero {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 65px;
    align-items: center
}

.research-hero .science-figure img {
    height: 265px
}

.research-hero h1 {
    font-size: clamp(2.5rem, 4.5vw, 4rem)
}

.publications {
    padding-top: 20px;
    padding-bottom: 60px
}

.publication {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 35px;
    padding: 35px 0;
    border-top: 1px solid var(--line)
}

.publication-year {
    font-size: 1rem;
    font-family: ui-monospace, monospace;
    color: var(--blue);
    padding-top: 4px
}

.publication h3 {
    max-width: 830px;
    font-size: 1.5rem
}

.publication h3 a {
    text-decoration: none
}

.publication h3 a:hover {
    text-decoration: underline
}

.publication .authors {
    font-size: .875rem;
    margin: 12px 0;
    color: var(--muted)
}

.publication .abstract {
    font-size: 1rem;
    max-width: 830px;
    color: var(--muted)
}

.publication .eyebrow {
    color: var(--muted);
    margin: 0 0 11px
}

.research-context {
    padding-bottom: 70px
}

.not-found {
    text-align: center;
    padding: 110px 0 140px
}

.not-found h1 {
    font-size: 5rem;
    margin: 0
}

.not-found .actions {
    justify-content: center
}

@media(min-width:1600px) {
    .hero {
        padding-top: 95px
    }
}

@media(max-width:1000px) {
    .wrap {
        width: calc(100% - 56px)
    }

    .hero-layout {
        gap: 30px
    }

    .hero h1 {
        font-size: 3.8rem
    }

    .science-figure {
        padding: 22px 20px
    }

    .science-figure img {
        height: 285px
    }

    .about-layout,
    .research-layout {
        gap: 45px
    }

    .case-layout {
        gap: 40px;
        grid-template-columns: 190px 1fr
    }

    .nav-links {
        gap: 21px
    }

    .brand {
        font-size: .95rem
    }

    .research-hero {
        gap: 35px
    }
}

@media(max-width:760px) {
    html {
        scroll-padding-top: 90px
    }

    .wrap {
        width: calc(100% - 40px)
    }

    .nav-shell {
        min-height: 73px;
        flex-wrap: wrap;
        gap: 0
    }

    .brand {
        font-size: .9rem
    }

    .brand-mark {
        height: 33px;
        width: 33px
    }

    .menu-toggle {
        display: block
    }

    .nav-links {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 12px 0 20px;
        gap: 14px 22px
    }

    .js .nav-links {
        display: none
    }

    .js .nav-links.is-open {
        display: flex
    }

    .nav-links .nav-contact {
        padding: 5px 10px
    }

    .hero {
        padding: 44px 0 20px
    }

    .hero-layout,
    .research-hero {
        grid-template-columns: 1fr;
        gap: 35px
    }

    .hero h1 {
        font-size: clamp(2.6rem, 9.8vw, 4.6rem);
        margin-bottom: 22px
    }

    .hero .eyebrow {
        margin-bottom: 20px
    }

    .intro {
        font-size: 1.05rem
    }

    .science-figure {
        padding: 24px
    }

    .science-figure img {
        height: 260px
    }

    .hero-note {
        margin-top: 20px
    }

    .hero-footer {
        margin-top: 33px;
        font-size: .75rem;
        line-height: 1.8
    }

    .section {
        padding: 50px 0
    }

    .section-top {
        display: block;
        margin-bottom: 27px
    }

    .section-description {
        margin-top: 18px;
        max-width: none
    }

    .project-grid,
    .project-card.featured {
        display: grid;
        grid-template-columns: 1fr
    }

    .project-panel {
        min-height: 190px;
        padding: 27px
    }

    .featured .panel-number {
        font-size: 4.5rem
    }

    .project-body {
        padding: 27px
    }

    .project-body h3 {
        font-size: 1.6rem
    }

    .expertise {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .expertise>div {
        border-bottom: 1px solid var(--line);
        padding-bottom: 15px
    }

    .research-layout,
    .about-layout {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .research-band {
        padding: 50px 0
    }

    .research-band h2 {
        font-size: 2.5rem
    }

    .about-copy .intro {
        margin-top: 20px
    }

    .timeline-item {
        grid-template-columns: 90px 1fr;
        gap: 15px
    }

    .contact {
        padding: 50px 0
    }

    .contact-grid {
        display: block
    }

    .contact-grid>div+div {
        margin-top: 30px
    }

    .contact a.email {
        font-size: 1.4rem
    }

    .footer-inner {
        flex-wrap: wrap;
        line-height: 1.7
    }

    .detail-hero {
        padding: 35px 0
    }

    .breadcrumbs {
        margin-bottom: 30px
    }

    .detail-hero h1 {
        font-size: 2.6rem
    }

    .detail-hero .intro {
        font-size: 1.05rem
    }

    .detail-meta {
        gap: 25px
    }

    .metrics {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 25px
    }

    .metric {
        padding-bottom: 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .25)
    }

    .mint .metric {
        border-color: #a4c9b3
    }

    .metric:last-child {
        padding-bottom: 0;
        border: 0
    }

    .metric strong {
        font-size: 2.9rem
    }

    .case-layout {
        display: flex;
        flex-direction: column;
        gap: 35px;
        padding: 35px 0
    }

    .case-aside .tags {
        max-width: 100%
    }

    .case-content h2 {
        font-size: 1.7rem
    }

    .next-project {
        align-items: start;
        flex-direction: column
    }

    .publication {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 27px 0
    }

    .publication h3 {
        font-size: 1.25rem
    }

    .research-hero .science-figure {
        display: none
    }

    .research-context {
        padding-bottom: 40px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    * {
        transition: none !important;
        animation: none !important
    }
}

@media print {

    .site-header,
    .contact,
    .site-footer,
    .actions,
    .case-aside {
        display: none
    }

    body {
        background: white
    }

    .wrap {
        width: 100%
    }

    a {
        color: inherit
    }

    .section,
    .detail-hero {
        padding: 20px 0
    }

    .case-layout {
        display: block
    }

    .project-card {
        break-inside: avoid
    }
}

h1,
h2,
h3 {
    overflow-wrap: break-word
}

.contact a.email {
    white-space: normal;
    overflow-wrap: anywhere
}

.portrait-figure {
    margin: 0;
    background: var(--dark);
    color: white;
    position: relative;
    min-width: 0;
    padding: 18px
}

.portrait-figure .figure-label {
    display: flex;
    justify-content: space-between;
    color: #c0d1d8;
    font: .75rem ui-monospace, monospace;
    letter-spacing: .07em
}

.portrait-figure img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    object-fit: cover;
    margin: 14px 0 16px
}

.portrait-figure figcaption {
    border-top: 1px solid #3d5663;
    padding-top: 19px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: .75rem;
    color: #c0d1d8;
    line-height: 1.6
}

.portrait-figure figcaption strong {
    color: var(--mint);
    font-weight: 400
}

.portrait-figure figcaption>span:last-child {
    text-align: right
}

@media(max-width:1000px) {
    .portrait-figure {
        padding: 15px
    }
}

@media(max-width:760px) {
    .portrait-figure {
        padding: 18px
    }
}