:root {
    --paper:#f7f7f4;
    --ink:#151515;
    --muted:#6b6b65;
    --line:#d8d8d1;
    --side:15rem;
    --gap:clamp(2rem,6vw,6rem)
}

* {
    box-sizing:border-box
}

html {
    font-size:16px;
    scroll-behavior:smooth;
    overflow-x:hidden
}

body {
    margin:0;
    max-width:100%;
    overflow-x:hidden;
    background:var(--paper);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.5
}

a {
    color:inherit;
    text-decoration:none
}

a:hover,a:focus-visible {
    text-decoration:underline;
    text-underline-offset:.18em
}

img {
    display:block;
    max-width:100%;
    height:auto
}

.site {
    display:grid;
    grid-template-columns:var(--side) minmax(0,70rem);
    gap:var(--gap);
    padding:clamp(1.25rem,3vw,2.5rem);
    align-items:start;
    max-width:100%
}

.sidebar {
    position:sticky;
    top:2rem;
    min-width:0
}

.brand {
    display:inline-block;
    font-size:.95rem;
    letter-spacing:.12em;
    font-weight:700;
    margin-bottom:2.75rem
}

.nav-label {
    font-size:.72rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--muted);
    margin:0 0 .7rem
}

.nav {
    margin:0 0 2rem;
    padding:0;
    list-style:none
}

.nav li {
    margin:.25rem 0
}

.nav a {
    font-size:.92rem
}

.nav a[aria-current="page"] {
    font-weight:700
}

.content {
    min-width:0;
    max-width:100%;
    padding-bottom:6rem
}

.eyebrow {
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.11em;
    color:var(--muted);
    margin:0 0 1rem
}

.title {
    font-size:clamp(1.8rem,4vw,4rem);
    font-weight:400;
    line-height:1.02;
    letter-spacing:-.035em;
    max-width:13ch;
    margin:0 0 2rem
}

.intro {
    font-size:clamp(1rem,1.5vw,1.2rem);
    max-width:42rem;
    margin:0 0 4rem
}

/* Homepage: a deliberately regular visual index. Cropping belongs here;
project pages show the works in their own proportions. */
.home-header {
    border-bottom:1px solid var(--line);
    padding-bottom:1.25rem;
    margin-bottom:2rem
}

.home-header .eyebrow {
    margin-bottom:0
}

.project-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(2rem,4vw,3.5rem) clamp(1rem,2.2vw,2rem)
}

.project-card {
    display:block;
    min-width:0
}

.project-card:hover {
    text-decoration:none
}

.thumb {
    aspect-ratio:1/1;
    background:#e9e9e3;
    overflow:hidden;
    margin-bottom:.8rem
}

.thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .25s ease
}

.thumb.station img {
    object-position:center center
}

.thumb.evenings img {
    object-position:center center
}

.thumb.night img {
    object-position:center center
}

.project-card:hover .thumb img,.project-card:focus-visible .thumb img {
    transform:scale(1.012)
}

.project-card h2 {
    font-size:.95rem;
    font-weight:400;
    margin:0
}

.project-card p {
    font-size:.82rem;
    color:var(--muted);
    margin:.2rem 0 0
}

.project-card:hover h2,.project-card:focus-visible h2 {
    text-decoration:underline;
    text-underline-offset:.18em
}

.project-header {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(15rem,28rem);
    gap:3rem;
    margin-bottom:4rem;
    border-bottom:1px solid var(--line);
    padding-bottom:2.5rem
}

.project-header .title {
    margin-bottom:0
}

.meta {
    font-size:.92rem
}

.meta p {
    margin:0 0 1rem
}

.work-image {
    margin:0 0 4rem
}

.work-image img {
    width:auto;
    max-height:78vh;
    max-width:100%
}

.full img {
    width:100%;
    max-height:none
}

.caption {
    font-size:.8rem;
    color:var(--muted);
    margin-top:.65rem;
    max-width:45rem
}

/* The viewport owns horizontal scrolling;
the document itself never widens. */
.horizontal-wrap {
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:1.5rem 0;
    margin:0 0 .6rem
}

.horizontal-wrap img {
    display:block;
    height:clamp(8rem,25vw,18rem);
    width:auto;
    max-width:none
}

.scroll-note {
    font-size:.76rem;
    color:var(--muted);
    margin:.5rem 0 4rem
}

.text-block {
    max-width:43rem;
    font-size:1rem;
    margin:0 0 4rem
}

.text-block p {
    margin:0 0 1.2rem
}

.about-grid {
    display:grid;
    grid-template-columns:minmax(0,43rem) 1fr;
    gap:4rem
}

.contact {
    font-size:.9rem;
    border-top:1px solid var(--line);
    padding-top:1rem
}

.mobile-nav {
    display:none
}

details summary {
    cursor:pointer;
    list-style:none
}

details summary::-webkit-details-marker {
    display:none
}

@media(max-width:980px) and (min-width:761px) {
    .project-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }

}

@media(max-width:760px) {
    .site {
        display:block;
        padding:1rem
    }

    .sidebar {
        position:relative;
        top:auto;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border-bottom:1px solid var(--line);
        padding-bottom:.85rem;
        margin-bottom:2.5rem
    }

    .brand {
        margin:0
    }

    .desktop-nav {
        display:none
    }

    .mobile-nav {
        display:block;
        font-size:.86rem
    }

    .mobile-nav summary {
        text-align:right
    }

    .mobile-nav .menu {
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:var(--paper);
        border-bottom:1px solid var(--line);
        padding:1rem 0 1.25rem;
        z-index:3
    }

    .mobile-nav .nav {
        margin:0
    }

    .content {
        padding-bottom:3rem
    }

    .title {
        max-width:16ch
    }

    .intro {
        margin-bottom:2.5rem
    }

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

    .project-card h2 {
        font-size:.9rem
    }

    .project-card p {
        font-size:.76rem
    }

    .project-header {
        display:block;
        margin-bottom:2.5rem
    }

    .project-header .title {
        margin-bottom:1.5rem
    }

    .work-image {
        margin-bottom:2.5rem
    }

    .horizontal-wrap {
        width:100%;
        max-width:100%
    }

    .horizontal-wrap img {
        height:clamp(7rem,34vw,11rem)
    }

    .about-grid {
        display:block
    }

    .contact {
        margin-top:3rem
    }

}

@media(max-width:430px) {
    .project-grid {
        grid-template-columns:1fr;
        gap:2.5rem
    }

    .thumb {
        max-width:100%
    }

}

/* Ready-to-upload refinements */
:root {
    --paper:#f5f2e9;
    --ink:#171714;
    --muted:#706e67;
    --line:#d9d5ca;
    --side:15.5rem;
    --gap:clamp(3rem,7vw,7.5rem)
}

.site {
    grid-template-columns:var(--side) minmax(0,68rem);
    padding:clamp(1.4rem,3.2vw,3rem)
}

.brand {
    font-size:1rem;
    letter-spacing:.145em;
    margin-bottom:3.25rem
}

.nav-label {
    font-size:.68rem;
    letter-spacing:.14em;
    margin-bottom:.8rem
}

.nav li {
    margin:.32rem 0
}

.nav a {
    font-size:.9rem;
    line-height:1.4
}

.nav a[aria-current="page"] {
    font-weight:600
}

.nav a[aria-current="page"]::before {
    content:"- ";
    color:var(--muted)
}

.home-header {
    padding-bottom:1.35rem;
    margin-bottom:2.5rem
}

.project-grid {
    gap:clamp(2.75rem,5vw,4.75rem) clamp(1.5rem,3vw,2.75rem)
}

.project-card h2 {
    font-size:.96rem
}

.project-card p {
    font-size:.79rem;
    margin-top:.28rem
}

/* Adjust these three object-position values after choosing the final crops. */
.thumb.station img {
    object-position:50% 50%
}

.thumb.evenings img {
    object-position:50% 50%
}

.thumb.night img {
    object-position:50% 50%
}

.project-header {
    grid-template-columns:minmax(0,1fr) minmax(15rem,25rem);
    gap:clamp(2rem,5vw,5rem)
}

.work-image {
    max-width:60rem
}

.work-image.full {
    max-width:60rem
}

.work-image.full img {
    width:auto;
    max-width:100%;
    max-height:82vh
}

.horizontal-wrap {
    contain:inline-size;
    width:100%;
    max-width:60rem;
    overflow-x:auto;
    overflow-y:hidden;
    touch-action:auto
}

.horizontal-wrap img {
    height:clamp(9rem,22vw,16rem);
    max-width:none
}

@media(max-width:760px) {
    .site {
        padding:1.15rem
    }

    .sidebar {
        margin-bottom:2.75rem
    }

    .project-grid {
        grid-template-columns:1fr;
        gap:3.25rem
    }

    .thumb {
        width:100%;
        max-width:34rem
    }

    .project-card h2 {
        font-size:.96rem
    }

    .project-card p {
        font-size:.8rem
    }

    .horizontal-wrap {
        max-width:100%
    }

    .horizontal-wrap img {
        height:clamp(8rem,36vw,12rem)
    }

}