.back-link {
    position: absolute;
    top: 20px;
    left: 20px;
    text-decoration: none;
    color: #333;
    font-size: 0.9rem;
}

.back-link:hover {
    text-decoration: underline;
}
body{

    margin:0;
    
    font-family:
    Helvetica,
    Arial,
    sans-serif;
    
    background:
    
    linear-gradient(
    180deg,
    #f7f3ea,
    #ece7de
    );
    
    color:#222;
    
    }
    
    .hero{
    
    max-width:900px;
    
    margin:auto;
    
    padding:120px 30px 80px;
    
    }
    
    h1{
    
    font-size:64px;
    
    font-weight:300;
    
    margin:0;
    
    }
    
    .artist{
    
    margin-top:10px;
    
    opacity:.6;
    
    }
    
    .intro{
    
    margin-top:30px;
    
    max-width:600px;
    
    font-size:18px;
    
    opacity:.85;
    
    }

    .filters {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
        margin: 20px 0;
    }
    
    .filter-btn {
        padding: 8px 16px;
        border: 1px solid #333;
        border-radius: 20px;
        background: transparent;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
    }
    
    .filter-btn:hover {
        background: #333;
        color: #fff;
    }
    
    .filter-btn.active {
        background: #333;
        color: #fff;
    }
    
    .gallery{
    
    max-width:1200px;
    
    margin:auto;
    
    padding:40px;
    
    display:grid;
    
    grid-template-columns:
    repeat(12,1fr);
    
    gap:60px;
    
    }
    
    /* artwork container */
    
    .artwork{
    
    position:relative;
    
    }
    
    /* frame */
    
    .frame{
    
    background:rgb(184, 184, 184);
    
    padding:1px;
    
    box-shadow:
    
    0 8px 18px rgba(0,0,0,.08),
    0 20px 60px rgba(0,0,0,.1);
    
    transition:transform .3s;
    
    }
    
    /* spotlight effect */
    
    .artwork::before{
    
    content:"";
    
    position:absolute;
    
    top:-60px;
    
    left:50%;
    
    transform:translateX(-50%);
    
    width:180px;
    
    height:120px;
    
    background:
    
    radial-gradient(
    ellipse at center,
    rgba(255,255,255,.7),
    rgba(255,255,255,0)
    );
    
    pointer-events:none;
    
    }
    
    .frame:hover{
    
    transform:translateY(-8px);
    
    }
    
    .frame img{
    
    width:100%;
    
    display:block;
    
    }
    
    /* captions */
    
    .caption{
    
    margin-top:14px;
    
    max-width:400px;
    
    }
    
    .title{
    
    font-weight:500;
    
    }
    
    .meta{
    
    font-size:14px;
    
    opacity:.6;
    
    margin-top:3px;
    
    }
    
    /* curated layout */
    
    .large{
    grid-column:span 8;
    }
    
    .medium{
    grid-column:span 6;
    }
    
    .small{
    grid-column:span 4;
    }
    
    footer{
    
    text-align:center;
    
    padding:80px;
    
    opacity:.5;
    
    }
    
    @media(max-width:900px){
    
    .gallery{
    
    grid-template-columns:1fr;
    
    }
    
    .large,.medium,.small{
    grid-column:span 1;
    }

    .frame img{
        width:100%;
        height:auto;
        display:block;
        }
    
    }