/* ── Variables ─────────────────────────────────── */
:root{
  --bg:        #fdf6f0;
  --surface:   #fff;
  --text:      #2d1a0e;
  --muted:     #7a5c46;
  --accent:    #8b3a1e;
  --accent-lt: #c4622d;
  --border:    #e8d8cb;
  --radius:    10px;
  --shadow:    0 2px 10px rgba(45,26,14,.10);
}

/* ── Reset / Base ──────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{
  font-family:'Bitter',Georgia,serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
  margin:0;padding:0;
}
img{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{
  font-family:'Shrikhand',Georgia,serif;
  font-weight:400;
  line-height:1.2;
  margin:0 0 .5rem;
}

/* ── Header / Nav ──────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--surface);
  border-bottom:2px solid var(--border);
  box-shadow:var(--shadow);
  padding:.75rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
}
.site-header .brand{
  font-family:'Shrikhand',Georgia,serif;
  font-size:1.35rem;
  color:var(--accent);
  white-space:nowrap;
}
.site-header nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.site-header nav a{
  color:var(--muted);
  font-size:.9rem;
  font-weight:bold;
  letter-spacing:.04em;
  text-transform:uppercase;
  transition:color .15s;
}
.site-header nav a:hover{color:var(--accent);text-decoration:none}

/* ── Hero ──────────────────────────────────────── */
.hero{
  background:linear-gradient(135deg,#4a1c0a 0%,#8b3a1e 50%,#c4622d 100%);
  color:#fff;
  padding:4rem 2rem;
  text-align:center;
}
.hero h1{font-size:clamp(2rem,5vw,3.5rem);color:#fff;margin-bottom:.75rem}
.hero .tagline{font-size:1.15rem;opacity:.85;margin-bottom:2rem;font-style:italic}
.hero .btn{
  display:inline-block;
  background:#fff;
  color:var(--accent);
  font-family:'Shrikhand',Georgia,serif;
  font-size:1rem;
  padding:.65rem 1.75rem;
  border-radius:var(--radius);
  box-shadow:0 3px 12px rgba(0,0,0,.2);
  transition:transform .15s,box-shadow .15s;
}
.hero .btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none}

/* ── Section common ────────────────────────────── */
main{max-width:1100px;margin:0 auto;padding:2rem 1.5rem}
section{margin-bottom:3rem}
section h2{font-size:1.75rem;color:var(--accent);border-bottom:2px solid var(--border);padding-bottom:.4rem;margin-bottom:1.25rem}

/* ── About blurb ───────────────────────────────── */
.about-blurb{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem 2rem;
  font-size:1.05rem;
  color:var(--muted);
  box-shadow:var(--shadow);
}

/* ── Art grid / gallery ────────────────────────── */
.art-list{
  list-style:none;padding:0;margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:16px;
}
.art-list li{
  background:var(--surface);
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.art-list li:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(45,26,14,.15)}
.art-list img{width:100%;height:200px;object-fit:cover}

/* ── Gallery page label ────────────────────────── */
.gallery-meta{color:var(--muted);font-size:.9rem;margin-bottom:1.25rem}

/* ── Commission status badge ───────────────────── */
.commission-status{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Shrikhand',Georgia,serif;
  font-size:1rem;
  padding:.4rem 1.1rem;
  border-radius:999px;
  margin-bottom:1.5rem;
}
.commission-status.open{background:#d4edda;color:#155724;border:1.5px solid #c3e6cb}
.commission-status.closed{background:#f8d7da;color:#721c24;border:1.5px solid #f5c6cb}
.commission-status::before{content:'';display:inline-block;width:.6rem;height:.6rem;border-radius:50%;background:currentColor;opacity:.8}

/* ── Commission info cards ─────────────────────── */
.commission-info{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem;
  margin-bottom:2rem;
}
.commission-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  box-shadow:var(--shadow);
}
.commission-card h3{font-size:1rem;color:var(--accent);margin-bottom:.4rem}
.commission-card p{color:var(--muted);font-size:.9rem;margin:0}

/* ── Contact links ─────────────────────────────── */
.contact-links{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}
.contact-links a{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--accent);
  color:#fff;
  padding:.55rem 1.3rem;
  border-radius:var(--radius);
  font-size:.9rem;
  font-weight:bold;
  transition:background .15s;
}
.contact-links a:hover{background:var(--accent-lt);text-decoration:none}
.contact-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .5rem;
}

/* ── Footer ────────────────────────────────────── */
.site-footer{
  text-align:center;
  padding:1.5rem 1rem;
  border-top:2px solid var(--border);
  background:var(--surface);
  color:var(--muted);
  font-size:.85rem;
  margin-top:2rem;
}

/* ── Responsive ────────────────────────────────── */
@media(max-width:600px){
  .site-header{flex-direction:column;align-items:flex-start;padding:.75rem 1rem}
  .hero{padding:2.5rem 1rem}
  main{padding:1.25rem 1rem}
  .commission-info{grid-template-columns:1fr}
}

/* ── New components styling ───────────────────── */
.commission-overview{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1.25rem}
.commission-overview .commission-card{cursor:default}
.commission-overview details{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.75rem;box-shadow:var(--shadow)}
.commission-overview summary{font-weight:700;color:var(--accent);list-style:none;cursor:pointer}
.commission-overview summary a{color:inherit}
.commission-overview ul{margin:.5rem 0 0;padding-left:1.25rem;color:var(--muted)}

.prices-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem}
.prices-list li{background:var(--surface);border:1px solid var(--border);padding:.75rem;border-radius:8px}

.art-section{background:var(--surface);border:1px solid var(--border);padding:1rem;border-radius:8px;margin-bottom:.75rem;box-shadow:var(--shadow)}
.art-section h2{font-size:1.15rem;color:var(--accent);margin-bottom:.5rem}
.art-section p{color:var(--muted);margin:0 0 .5rem}

.tos .updated{color:var(--muted);font-size:.95rem;margin-bottom:1rem}
.tos .tos-section{background:var(--surface);border:1px solid var(--border);padding:1rem;border-radius:8px;margin-bottom:.75rem}
.tos .tos-section h2{font-size:1rem;color:var(--accent);margin-bottom:.45rem}
.tos .tos-section p{margin:0;color:var(--muted)}

/* Image modal */
.modal-overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.75);z-index:99999}
.modal-overlay.open{display:flex}
.modal-content{position:relative;background:transparent;padding:1rem;max-width:95%;max-height:90%;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.modal-content img{max-width:100%;max-height:80vh;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.6)}
.modal-caption{color:#fff;font-size:.95rem;background:rgba(0,0,0,.45);padding:.35rem .6rem;border-radius:6px}
.modal-close{position:absolute;right:8px;top:8px;background:rgba(255,255,255,.95);border-radius:999px;border:0;padding:.35rem .6rem;cursor:pointer;font-weight:bold}