:root {
    --ink: #1a1a1a;
    --umber: #6b4e3d;
    --gold: #b89257;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at top left,
            rgba(184,146,87,.18),
            transparent 40%),

        radial-gradient(circle at bottom right,
            rgba(96,71,58,.12),
            transparent 45%),

        linear-gradient(
            180deg,
            #f4efe7 0%,
            #ede5d7 40%,
            #e7ddd0 100%
        );

    color: var(--ink);
    font-family: "Inter", sans-serif;
    overflow-x: hidden;
}

.paper-texture {

 
position: fixed;
inset: 0;

background-image:
radial-gradient(rgba(0,0,0,.03) 1px, transparent 1px);

background-size: 8px 8px;

opacity: .3;

pointer-events: none;

z-index: -1;
 

}
.hero {

 
min-height: 100vh;

display: flex;
flex-direction: column;
justify-content: center;

padding: 8vw;
 

}

.archive-tag {

 
text-transform: uppercase;

letter-spacing: .3em;

font-size: .8rem;

color: var(--umber);

margin-bottom: 2rem;
 

}

.hero h1 {

 
font-family: "Cormorant Garamond", serif;

font-size: clamp(5rem, 12vw, 10rem);

font-weight: 400;

line-height: .85;
 

}

.hero-line {

 
width: 140px;
height: 2px;

background: var(--gold);

margin: 2rem 0;
 

}

.hero-description {

 
max-width: 700px;

line-height: 1.8;

font-size: 1.1rem;
 

}

.enter-btn {

 
margin-top: 3rem;

width: fit-content;

text-decoration: none;

color: var(--ink);

border-bottom: 1px solid var(--ink);

padding-bottom: .25rem;

transition: .3s;
 

}

.enter-btn:hover {

 
transform: translateX(10px);
 

}
/* =========================
GALLERY
========================= */

.gallery {

   display: block;
padding: 0 8vw 8rem;
 

}.art-card {

 
position: relative;

overflow: hidden;

background: white;

cursor: pointer;

box-shadow:
    0 8px 30px rgba(0,0,0,.08);

transition:
    transform .4s ease,
    box-shadow .4s ease;
 

}

.art-card:hover {

 
transform:
    translateY(-8px)
    rotate(-0.6deg);

box-shadow:
    0 25px 60px rgba(0,0,0,.15);
 

}

.art-card img {

 
width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition: transform .8s ease;
 

}

.art-card:hover img {

 
transform: scale(1.05);
 

}
.art-info {

 
position: absolute;

left: 20px;
bottom: 20px;

background:
    rgba(245,240,232,.95);

padding:
    1rem
    1.25rem;

min-width: 220px;

backdrop-filter: blur(10px);
 

}

.medium {

 
text-transform: uppercase;

letter-spacing: .15em;

font-size: .7rem;

color: var(--umber);

margin-bottom: .5rem;
 

}

.art-info h3 {

 
font-family:
    "Cormorant Garamond",
    serif;

font-size: 2rem;

font-weight: 500;

margin-bottom: .25rem;
 

}

.art-info p {

 
opacity: .7;

font-size: .9rem;
 

}
/* =========================
VIEW TOGGLE
========================= */

.view-toggle {

 
display: flex;

gap: 1rem;

padding: 0 8vw 3rem;
 

}

.view-btn {

 
border: none;

background: transparent;

border-bottom: 1px solid transparent;

font-family: "Cormorant Garamond", serif;

font-size: 1.3rem;

cursor: pointer;

padding-bottom: .25rem;
 

}

.view-btn.active {

 
border-color: var(--ink);
 

}

/* =========================
ARCHIVE VIEW
========================= */

.archive-view {

 
display: none;

padding: 0 8vw 8rem;
 

}

.archive-view.active {

 
display: block;
 

}
.archive-header,
.archive-row {

 
display: grid;

grid-template-columns:
    2fr
    1fr
    1fr
    1fr;

gap: 2rem;

padding: 1.25rem 0;
 

}

.archive-header {

 
border-bottom: 2px solid var(--ink);

text-transform: uppercase;

letter-spacing: .15em;

font-size: .8rem;
 

}

.archive-row {

 
border-bottom:
    1px solid rgba(0,0,0,.08);

transition: .3s ease;
 

}

.archive-row:hover {

 
padding-left: 1rem;

background:
    rgba(255,255,255,.4);

}


.art-grid {

 
display: grid;

grid-template-columns:
    repeat(auto-fill, minmax(280px, 1fr));

grid-auto-rows: 260px;

gap: 24px;
 

}

/* SIZE VARIATIONS */

.art-card.large {
grid-row: span 2;
}

.art-card.tall {
grid-row: span 3;
}

.art-card.wide {
grid-column: span 2;
}
.filter-btn {
    border: 1px solid rgba(0,0,0,.2);
    background: rgba(255,255,255,.4);
    padding: 0.7rem 1.2rem;
    border-radius: 999px;
    cursor: pointer;

    font-family: "Inter", sans-serif;
    font-size: 0.9rem;

    transition: all .3s ease;
    backdrop-filter: blur(10px);
}

.filter-btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,.7);
}

.filter-btn.active {
    background: var(--gold);
    color: white;
    border-color: var(--gold);
}
/* .view-btn {
    border: 1px solid rgba(0,0,0,.15);
    background: rgba(255,255,255,.3);
    padding: 0.6rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: .3s ease;
}

.view-btn:hover {
    background: rgba(255,255,255,.6);
}

.view-btn.active {
    background: var(--ink);
    color: white;
} */

.hidden {
    display: none !important;
}