@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root {
    --ink:#18264a;
    --blue:#4056db;
    --sky:#b8d8ff;
    --lav:#dcd9ff;
    --mint:#d0f3e8;
    --paper:#f6f8fd;
    --line:#cbd4e5;
    --muted:#53617b;
    --max:1320px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',sans-serif;
    line-height:1.6
}

img {
    display:block;
    width:100%
}

a {
    color:inherit
}

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

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

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

.skip-link {
    position:absolute;
    left:12px;
    top:-70px;
    background:white;
    padding:12px;
    z-index:20
}

.skip-link:focus {
    top:12px
}

.site-header {
    border-bottom:1px solid var(--line);
    background:var(--paper)
}

.header-inner {
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    letter-spacing:-.04em
}

.brand-icon {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    border-radius:13px;
    background:var(--ink);
    color:white;
    font-size:1.1rem
}

.nav {
    display:flex;
    gap:12px
}

.nav a {
    padding:10px 19px;
    border-radius:100px;
    text-decoration:none;
    font-size:.93rem;
    font-weight:700
}

.nav a:hover,.nav a[aria-current=page] {
    background:var(--ink);
    color:white
}

.eyebrow {
    text-transform:uppercase;
    letter-spacing:.16em;
    font-weight:800;
    font-size:.74rem
}

.hero {
    padding:100px 0 78px;
    position:relative;
    overflow:hidden
}

.hero-inner {
    display:grid;
    grid-template-columns:1.45fr .55fr;
    gap:60px;
    align-items:end
}

.hero h1,.page-title {
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(3.6rem,8.6vw,8.6rem);
    line-height:.99;
    letter-spacing:-.075em;
    margin:22px 0 25px;
    font-weight:700
}

.hero h1 span {
    color:var(--blue)
}

.hero-aside {
    max-width:290px;
    margin-bottom:14px;
    color:var(--muted);
    font-size:1.05rem
}

.asterisk {
    font-family:'Space Grotesk';
    font-size:8rem;
    line-height:.7;
    color:var(--blue);
    display:block;
    margin-bottom:34px
}

.section {
    padding:75px 0
}

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

.section-title {
    font:700 clamp(2rem,4.2vw,3.6rem)/1.1 'Space Grotesk';
    letter-spacing:-.06em;
    margin:0
}

.section-note {
    color:var(--muted);
    font-size:.9rem
}

.project-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px
}

.project-card {
    min-width:0;
    text-decoration:none
}

.project-card img {
    aspect-ratio:1.36;
    object-fit:cover;
    border-radius:8px;
    transition:transform .3s
}

.project-card:hover img {
    transform:scale(1.025)
}

.project-card .image-wrap {
    overflow:hidden;
    border-radius:8px
}

.project-meta {
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    padding:16px 0
}

.project-meta h3 {
    font:700 1.4rem 'Space Grotesk';
    letter-spacing:-.045em;
    margin:0
}

.project-meta span {
    font-size:.82rem;
    color:var(--muted)
}

.memberships {
    background:var(--lav);
    margin-top:35px
}

.member-inner {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px
}

.member-intro p {
    max-width:470px
}

.member-logos {
    display:flex;
    gap:18px;
    flex-wrap:wrap
}

.member-logo {
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:145px;
    min-height:110px;
    background:#fff;
    border:1px solid #c6c5ed;
    border-radius:8px;
    padding:22px;
    text-decoration:none;
    transition:transform .2s
}

.member-logo:hover {
    transform:translateY(-4px)
}

.member-logo strong {
    font:800 2.5rem/1 'Space Grotesk';
    letter-spacing:-.08em
}

.member-logo.adcc strong {
    font-size:2.2rem
}

.member-logo small {
    display:block;
    font-size:.63rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-top:6px
}

.site-footer {
    background:var(--ink);
    color:white;
    padding:65px 0 25px
}

.footer-main {
    display:flex;
    justify-content:space-between;
    gap:40px;
    align-items:start;
    padding-bottom:75px
}

.footer-heading {
    font:700 clamp(2rem,4vw,4rem)/1.1 'Space Grotesk';
    letter-spacing:-.06em;
    max-width:560px;
    margin:25px 0
}

.footer-socials {
    display:flex;
    gap:22px;
    flex-wrap:wrap
}

.footer-socials a {
    text-decoration:none;
    border-bottom:1px solid #9ba8c9;
    padding-bottom:3px
}

.footer-socials a:hover {
    color:var(--sky)
}

.footer-bottom {
    display:flex;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #435071;
    padding-top:20px;
    font-size:.8rem;
    color:#c7cde0
}

.case-intro {
    padding:72px 0 38px
}

.case-intro .page-title {
    font-size:clamp(3.5rem,7vw,7rem);
    margin-bottom:28px
}

.case-hero {
    aspect-ratio:1.9;
    object-fit:cover;
    border-radius:8px
}

.case-details {
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:90px;
    padding:75px 0 85px
}

.credits {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}

.credit-label {
    display:block;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-weight:800;
    color:var(--muted);
    margin-bottom:4px
}

.credit-value {
    font-weight:700
}

.description p {
    font-size:clamp(1rem,1.45vw,1.24rem);
    margin:0 0 20px
}

.gallery {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    padding-bottom:90px
}

.gallery img {
    border-radius:7px;
    aspect-ratio:1.25;
    object-fit:cover
}

.gallery figure {
    margin:0
}

.gallery figure:first-child,.gallery figure:nth-child(4) {
    grid-column:span 2
}

.gallery figure:first-child img,.gallery figure:nth-child(4) img {
    aspect-ratio:2
}

.next-project {
    background:var(--mint);
    padding:65px 0
}

.next-project a {
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-decoration:none;
    gap:20px;
    font:700 clamp(1.8rem,4vw,3.7rem) 'Space Grotesk';
    letter-spacing:-.05em
}

.about-grid {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:75px;
    align-items:start;
    padding:75px 0
}

.about-portrait {
    aspect-ratio:.86;
    object-fit:cover;
    border-radius:8px
}

.about-copy .page-title {
    font-size:clamp(3.5rem,6vw,6rem);
    margin:0 0 25px
}

.about-copy p {
    font-size:1.1rem
}

.resume {
    border-top:1px solid var(--line);
    padding:65px 0 100px
}

.resume-grid {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:80px
}

.resume-group {
    border-top:1px solid var(--line);
    padding-top:25px;
    margin-bottom:40px
}

.resume-entry {
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px 25px;
    margin-bottom:27px
}

.resume-entry h3 {
    font:700 1.25rem 'Space Grotesk';
    margin:0
}

.resume-entry p {
    margin:3px 0;
    color:var(--muted)
}

.resume-entry time {
    color:var(--muted);
    font-size:.86rem;
    white-space:nowrap
}

.button-link {
    display:inline-block;
    background:var(--blue);
    color:white;
    padding:13px 20px;
    border-radius:100px;
    text-decoration:none;
    font-weight:700
}

.button-link:hover {
    background:var(--ink)
}

@media(max-width:850px) {
    .hero-inner,.member-inner,.case-details,.about-grid,.resume-grid {
        grid-template-columns:1fr;
        gap:32px
    }
    .hero {
        padding:65px 0
    }
    .hero-aside {
        max-width:540px
    }
    .asterisk {
        display:none
    }
    .case-details {
        padding:45px 0
    }
    .member-logos {
        justify-content:start
    }
}

@media(max-width:600px) {
    .container {
        width:min(calc(100% - 36px),var(--max))
    }
    .header-inner {
        min-height:76px
    }
    .brand {
        font-size:.9rem
    }
    .brand-icon {
        width:38px;
        height:38px
    }
    .nav {
        gap:0
    }
    .nav a {
        padding:9px 12px
    }
    .hero h1 {
        font-size:clamp(3.5rem,15vw,6rem)
    }
    .section {
        padding:55px 0
    }
    .project-grid {
        grid-template-columns:1fr;
        gap:15px
    }
    .section-top {
        align-items:start;
        flex-direction:column
    }
    .member-logo {
        min-width:120px;
        min-height:90px
    }
    .member-logo strong {
        font-size:2rem
    }
    .member-logo.adcc strong {
        font-size:1.8rem
    }
    .footer-main,.footer-bottom {
        flex-direction:column
    }
    .footer-main {
        padding-bottom:45px
    }
    .case-intro {
        padding:55px 0 25px
    }
    .case-hero {
        aspect-ratio:1.2
    }
    .credits {
        gap:20px
    }
    .gallery {
        grid-template-columns:1fr;
        gap:15px
    }
    .gallery figure:first-child,.gallery figure:nth-child(4) {
        grid-column:span 1
    }
    .gallery img,.gallery figure:first-child img,.gallery figure:nth-child(4) img {
        aspect-ratio:1.25
    }
    .about-grid {
        padding:55px 0
    }
    .resume-entry {
        grid-template-columns:1fr
    }
    .resume-entry time {
        grid-row:1
    }
    .next-project a {
        font-size:2rem
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        transition:none!important;
        animation:none!important
    }
}