:root{
--bg:#ffffff;
--banner-bg:#ece9e3;
--text:#111;
--muted:#666;
--line:rgba(0,0,0,.08);
--max:1100px;
--radius:12px;
}

*{
box-sizing:border-box;
}

body{
margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
background:white;
color:var(--text);
}

/* HEADER */

.header{
position:fixed;
top:0;
width:100%;
z-index:100;
opacity:0;
transition:opacity 1.6s ease;
background:#ece9e3;
border-bottom:1px solid var(--line);
}

body.loaded .header{
opacity:1;
}

.header-inner{
max-width:var(--max);
margin:auto;
padding:6px 20px;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo img{
height:80px;
}

/* NAV */

.nav{
display:flex;
gap:24px;
}

.nav a{
text-decoration:none;
color:var(--muted);
font-size:14px;
transition:color .2s ease;
}

.nav a:hover{
color:var(--text);
}

/* HERO / MAIN BANNER */

.banner{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:#ece9e3;
overflow:hidden;
position:relative;
}

.banner::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:38vh;
background:linear-gradient(
to bottom,
rgba(236,233,227,0),
#ffffff 85%
);
pointer-events:none;
z-index:2;
}

.banner img{
width:96%;
max-width:1750px;
opacity:.96;
filter:contrast(.94);
transform:translateY(-24px);
position:relative;
z-index:1;

-webkit-mask-image:radial-gradient(
ellipse at center,
black 42%,
rgba(0,0,0,.85) 58%,
rgba(0,0,0,.35) 76%,
transparent 100%
);

mask-image:radial-gradient(
ellipse at center,
black 42%,
rgba(0,0,0,.85) 58%,
rgba(0,0,0,.35) 76%,
transparent 100%
);
}

/* ARCHIVE / INNER PAGE BANNER */

.archive-banner{
height:55vh;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:linear-gradient(
to bottom,
#ece9e3 0%,
#efebe5 68%,
#ffffff 100%
);
}

.archive-banner::before{
content:"";
position:absolute;
inset:0;
backdrop-filter:blur(12px);
mask-image:linear-gradient(
to bottom,
rgba(0,0,0,.95) 0%,
rgba(0,0,0,.75) 55%,
rgba(0,0,0,0) 100%
);
pointer-events:none;
}

.archive-banner::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:160px;
background:linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,.96)
);
pointer-events:none;
}

.archive-banner img{
width:88%;
max-width:1450px;
opacity:.94;
filter:contrast(.96) blur(.2px);
transform:translateY(-10px);
}

/* MAIN */

main{
max-width:var(--max);
margin:auto;
padding:0 20px;
}

/* TITLE SECTIONS */

.topline{
text-align:center;
margin-top:20px;
margin-bottom:10px;
}

.topline h1{
margin:0;
font-size:26px;
}

.topline p{
color:var(--muted);
font-size:14px;
}

/* EXHIBITION FEATURE */

.exhibition-feature{
display:grid;
grid-template-columns:.72fr 1.28fr;
gap:38px;
align-items:center;
max-width:1000px;
margin:30px auto 60px;
padding:34px 0;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.exhibition-poster{
display:flex;
justify-content:center;
align-items:center;
}

.exhibition-poster img{
width:72%;
max-width:320px;
display:block;
border-radius:var(--radius);
border:1px solid var(--line);
box-shadow:0 12px 30px rgba(0,0,0,.06);
}

.exhibition-info{
text-align:left;
}

.exhibition-info h2{
margin-top:0;
margin-bottom:8px;
font-size:24px;
}

.exhibition-date{
font-size:14px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:18px;
}

.map-wrap{
margin-top:22px;
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--line);
background:#f5f5f5;
}

.map-wrap iframe{
width:100%;
height:320px;
display:block;
border:0;
}

.map-button{
margin-top:16px;
}

/* DROP HEADER */

.drop-header{
display:none;
text-align:center;
margin-top:40px;
margin-bottom:10px;
}

.drop-header h1{
font-size:28px;
margin-bottom:6px;
}

.drop-date{
font-size:14px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
}

.drop-desc{
max-width:500px;
margin:auto;
margin-top:8px;
font-size:14px;
color:var(--muted);
}

.drop-header::after{
content:"";
display:block;
width:60px;
height:1px;
background:var(--line);
margin:18px auto 0;
}

.piece-count{
margin-top:10px;
font-size:14px;
letter-spacing:.05em;
color:var(--muted);
}

/* PRODUCT GRID */

.grid{
margin:30px 0;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:22px;
}

/* PRODUCT CARDS */

.card{
cursor:pointer;
position:relative;
}

.card-media{
border:1px solid var(--line);
border-radius:var(--radius);
overflow:hidden;
background:#f5f5f5;
}

.card-media img{
width:100%;
height:300px;
object-fit:cover;
transition:transform .25s ease;
}

.card:hover img{
transform:scale(1.03);
}

.card-meta{
padding:8px 2px;
display:flex;
justify-content:space-between;
font-size:14px;
}

.price,
.muted{
color:var(--muted);
}

/* SOLD ITEMS */

.card.sold{
opacity:.45;
}

.card.sold::after{
content:"SOLD";
position:absolute;
top:10px;
left:10px;
background:black;
color:white;
padding:4px 8px;
font-size:12px;
}

/* COMING SOON */

.coming-soon{
display:none;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:80px 20px;
max-width:520px;
margin:auto;
}

.coming-soon h2{
font-size:2rem;
margin-bottom:10px;
}

.coming-soon p{
color:var(--muted);
}

.coming-soon a{
text-decoration:none;
border-bottom:1px solid var(--text);
color:inherit;
}

/* ARCHIVE */

.archive-title{
margin-top:40px;
}

.archive-tabs{
margin-top:30px;
}

.archive-tabs input{
display:none;
}

.tab-labels{
display:flex;
justify-content:center;
gap:12px;
margin-bottom:30px;
}

.tab-labels label{
cursor:pointer;
padding:10px 18px;
border:1px solid var(--line);
border-radius:999px;
font-size:14px;
color:var(--muted);
transition:all .2s ease;
}

#tabPrevious:checked ~ .tab-labels label[for="tabPrevious"],
#tabSold:checked ~ .tab-labels label[for="tabSold"]{
color:var(--text);
border-color:var(--text);
}

.tab-panel{
display:none;
}

#tabPrevious:checked ~ .previous-panel{
display:block;
}

#tabSold:checked ~ .sold-panel{
display:block;
}

.archive-intro{
text-align:center;
max-width:620px;
margin:0 auto 20px;
}

.archive-intro h2{
margin-bottom:8px;
}

.archive-card{
border:1px solid var(--line);
border-radius:var(--radius);
padding:16px;
}

.archive-card h3{
margin-bottom:6px;
}

.archive-image{
height:280px;
border-radius:var(--radius);
overflow:hidden;
background:#f5f5f5;
margin-bottom:12px;
}

.archive-image img{
width:100%;
height:100%;
object-fit:cover;
}

.placeholder-image{
background:linear-gradient(
to bottom,
#ece9e3,
#f8f8f8
);
border:1px solid var(--line);
}

/* EXHIBITION ARCHIVE PAGES */

.archive-link{
text-decoration:none;
color:inherit;
display:block;
transition:transform .2s ease, opacity .2s ease;
}

.archive-link:hover{
transform:translateY(-3px);
opacity:.9;
}

.exhibition-page-text{
max-width:680px;
margin:35px auto;
text-align:center;
line-height:1.6;
color:var(--muted);
}

.exhibition-gallery{
max-width:760px;
margin:40px auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
}

.exhibition-gallery img{
width:100%;
max-height:360px;
object-fit:cover;
display:block;
border-radius:var(--radius);
}

.archive-back{
text-align:center;
margin:40px auto 20px;
}

/* CONTACT */

.contact{
margin-top:80px;
padding:40px 0;
border-top:1px solid var(--line);
text-align:center;
}

.contact h2{
margin-bottom:10px;
}

.contact p{
color:var(--muted);
}

.contact-links{
margin-top:15px;
display:flex;
justify-content:center;
gap:30px;
}

.contact-links a{
text-decoration:none;
border-bottom:1px solid var(--text);
}

/* FOOTER */

.footer{
border-top:1px solid var(--line);
padding:25px 0;
margin-top:40px;
text-align:center;
}

.footer-inner{
max-width:var(--max);
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
font-size:14px;
}

/* MODAL */

.modal::backdrop{
background:rgba(0,0,0,.6);
}

.modal-inner{
width:min(900px,90vw);
display:grid;
grid-template-columns:1fr 1fr;
background:white;
border-radius:12px;
overflow:hidden;
position:relative;
}

.modal-media img{
width:100%;
height:100%;
object-fit:cover;
}

.modal-content{
padding:20px;
}

.meta{
list-style:none;
padding:0;
}

.meta li{
border-top:1px solid var(--line);
padding:8px 0;
color:var(--muted);
}

.modal-close{
position:absolute;
top:10px;
right:10px;
border:none;
background:white;
font-size:20px;
}

/* ABOUT */

.about-gallery{
max-width:900px;
margin:50px auto 35px;
display:grid;
grid-template-columns:1fr 1fr;
gap:24px;
align-items:start;
}

.about-gallery img{
width:100%;
max-width:420px;
margin:auto;
display:block;
border:none !important;
outline:none !important;
box-shadow:none !important;
border-radius:12px;
}

.about-text{
max-width:700px;
margin:40px auto;
line-height:1.6;
font-size:15px;
color:var(--text);
}

.about-text p{
margin-bottom:18px;
}

.workshop{
text-align:center;
margin-top:60px;
padding-top:30px;
border-top:1px solid var(--line);
}

.workshop h2{
margin-bottom:10px;
}

/* COMMISSIONS */

.commission-intro{
max-width:700px;
margin:35px auto;
line-height:1.6;
font-size:15px;
text-align:center;
}

.commission-intro p{
color:var(--muted);
margin-bottom:16px;
}

.commission-form-wrap{
max-width:720px;
margin:40px auto;
}

.commission-form{
display:grid;
gap:18px;
}

.commission-form label{
display:grid;
gap:8px;
font-size:14px;
color:var(--text);
}

.commission-form input,
.commission-form select,
.commission-form textarea{
width:100%;
padding:12px 14px;
border:1px solid var(--line);
border-radius:var(--radius);
font:inherit;
background:#fff;
color:var(--text);
}

.commission-form textarea{
resize:vertical;
}

.button{
display:inline-block;
border:1px solid var(--text);
background:var(--text);
color:white;
padding:12px 18px;
border-radius:999px;
text-decoration:none;
font:inherit;
cursor:pointer;
}

.button:hover{
opacity:.85;
}

/* MOBILE */

@media(max-width:800px){

.logo img{
height:68px;
}

.nav{
gap:14px;
}

.nav a{
font-size:13px;
}

.banner img{
width:126%;
transform:translateY(-18px);
}

.archive-banner img{
width:110%;
}

.exhibition-feature{
grid-template-columns:1fr;
gap:24px;
margin:25px auto 50px;
}

.exhibition-poster img{
width:68%;
max-width:280px;
}

.exhibition-info{
text-align:center;
}

.map-wrap iframe{
height:260px;
}

.exhibition-gallery{
grid-template-columns:1fr;
max-width:520px;
}

.about-gallery{
grid-template-columns:1fr 1fr;
gap:12px;
margin:35px auto 25px;
}

.about-gallery img{
max-width:100%;
border-radius:10px;
}

.modal-inner{
grid-template-columns:1fr;
}

.footer-inner{
justify-content:center;
gap:10px;
}

.tab-labels{
flex-direction:column;
align-items:center;
}

}
/* FEATURED WORK */

.featured-work{

max-width:1400px;

margin:40px auto 60px;

padding:0 20px;

}

.featured-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:18px;

}

.featured-piece{

position:relative;

aspect-ratio:1/1;

overflow:hidden;

border-radius:12px;

}

.featured-piece img{

width:100%;
height:100%;

object-fit:cover;

display:block;

transition:transform .3s ease;

}

.featured-piece:hover img{

transform:scale(1.03);

}

.sold-badge{

position:absolute;

top:12px;
left:12px;

background:rgba(0,0,0,.85);

color:white;

font-size:11px;

letter-spacing:.08em;

padding:6px 10px;

border-radius:999px;

z-index:5;

}

@media(max-width:900px){

.featured-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.featured-grid{

grid-template-columns:1fr;

}

}
