:root{
  --wall: #E8E1D3;
  --wall-deep: #DCD2BE;
  --ink: #2B2621;
  --ink-soft: #6b5f4f;
  --gold: #A87F3F;
  --forest: #3E4A3B;
  --mat: #FAF7F1;
  --mat-shadow: rgba(43, 38, 33, 0.14);
  --danger: #9a3b2e;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--wall);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--forest);}

.wrap{max-width:1180px; margin:0 auto; padding:0 6vw; position:relative; z-index:1;}

/* ---------- FLASH MESSAGES ---------- */
.flash-wrap{max-width:1180px; margin:1.5rem auto 0; padding:0 6vw;}
.flash{
  background:var(--mat); border-left:3px solid var(--gold);
  padding:0.9rem 1.2rem; font-size:0.9rem; margin-bottom:0.8rem;
}

/* ---------- NAV / HERO ---------- */
nav.top{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:2.6rem;
  font-size:0.82rem;
  letter-spacing:0.05em;
}
nav.top .mark{font-family:'Fraunces', serif; font-style:italic; font-weight:500; font-size:1.15rem;}
nav.top .admin-tag{font-style:normal; color:var(--ink-soft); font-size:0.9rem;}
nav.top .links a{
  color:var(--ink); text-decoration:none; margin-left:2rem; padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .25s ease;
}
nav.top .links a:hover{border-color:var(--gold);}

header.hero{padding:9vh 0 8vh; position:relative;}
.eyebrow{
  display:flex; align-items:center; gap:0.9rem;
  font-size:0.72rem; letter-spacing:0.28em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.6rem;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--gold);}
h1.name{
  font-family:'Fraunces', serif; font-weight:300; font-style:italic;
  font-size:clamp(2.8rem, 8vw, 5.4rem); line-height:1.02; margin:0 0 1.1rem; letter-spacing:-0.01em;
}
.tagline{max-width:34em; font-size:1.08rem; line-height:1.65; color:var(--ink-soft); font-weight:300;}
.tagline em{font-style:italic; color:var(--ink);}

/* ---------- SECTION LABEL ---------- */
.section-head{display:flex; align-items:baseline; gap:1.4rem; margin:0 0 3.2rem;}
.section-head .num{font-family:'Fraunces', serif; font-style:italic; color:var(--gold); font-size:1rem; white-space:nowrap;}
.section-head h2{font-family:'Fraunces', serif; font-weight:300; font-size:1.9rem; margin:0;}
.section-head .rule{flex:1; height:1px; background:linear-gradient(to right, var(--ink-soft), transparent); opacity:0.3;}

/* ---------- GALLERY ---------- */
section.gallery{padding:2vh 0 10vh;}
.masonry{columns: 3 300px; column-gap: 3rem;}
.artwork{
  break-inside: avoid; margin: 0 0 3.4rem;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s ease, transform .7s ease;
}
.artwork.visible{opacity:1; transform:translateY(0);}

.frame{
  background:var(--mat); padding:14px 14px 0;
  box-shadow: 0 18px 40px -18px var(--mat-shadow), 0 2px 8px -2px var(--mat-shadow);
  cursor:zoom-in; transition:transform .35s ease, box-shadow .35s ease;
}
.frame:hover{transform:translateY(-4px); box-shadow: 0 26px 50px -16px var(--mat-shadow), 0 4px 10px -2px var(--mat-shadow);}
img.canvas{width:100%; display:block; object-fit:cover;}
.canvas.portrait{aspect-ratio:4/5; background:linear-gradient(165deg,#b7a98d,#6d5c45); width:100%;}

.plate{padding:1.1rem 0.2rem 1.5rem;}
.plate .cat{font-size:0.68rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); margin-bottom:0.45rem; display:block;}
.plate h3{font-family:'Fraunces', serif; font-weight:400; font-style:italic; font-size:1.32rem; margin:0 0 0.25rem;}
.plate .meta{font-size:0.78rem; color:var(--ink-soft); letter-spacing:0.02em; margin-bottom:0.7rem;}
.plate p{font-size:0.94rem; line-height:1.6; color:var(--ink); margin:0; font-weight:300;}

.empty-state{color:var(--ink-soft); font-style:italic; font-family:'Fraunces', serif;}

/* ---------- ABOUT ---------- */
section.about{padding:6vh 0 10vh; border-top:1px solid rgba(43,38,33,0.12);}
.about-grid{display:grid; grid-template-columns: 1.1fr 1.4fr; gap:5rem; align-items:start;}
.about-grid .frame{padding:14px;}
.about-text h2{font-family:'Fraunces', serif; font-weight:300; font-style:italic; font-size:2rem; margin:0 0 1.3rem;}
.about-text p{line-height:1.75; font-weight:300; color:var(--ink-soft); max-width:38em;}
.about-text p + p{margin-top:1.1rem;}

/* ---------- FOOTER ---------- */
footer{background:var(--wall-deep); padding:5vh 0 4vh;}
.footer-grid{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:2rem;}
footer .mark{font-family:'Fraunces', serif; font-style:italic; font-size:1.3rem;}
footer .contact{font-size:0.85rem; color:var(--ink-soft); line-height:2;}
footer .contact a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--gold);}

/* ---------- LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; background:rgba(20,17,14,0.94);
  display:none; align-items:center; justify-content:center; z-index:100; padding:6vh 4vw;
}
.lightbox.open{display:flex;}
.lightbox-inner{max-width:900px; width:100%; color:#F2ECE0;}
.lightbox img.canvas-big{width:100%; max-height:70vh; object-fit:contain; box-shadow:0 30px 70px rgba(0,0,0,0.5); background:#111;}
.lightbox .lb-plate{padding-top:1.6rem;}
.lightbox .lb-plate h3{font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:1.6rem; margin:0 0 0.2rem;}
.lightbox .lb-plate .meta{font-size:0.8rem; color:#B7AB98; margin-bottom:0.8rem;}
.lightbox .lb-plate p{font-weight:300; line-height:1.7; max-width:46em;}
.lightbox-close{
  position:absolute; top:2.2rem; right:2.4vw; color:#F2ECE0; background:none; border:none;
  font-size:1.6rem; cursor:pointer; font-family:'Work Sans', sans-serif; opacity:0.8;
}
.lightbox-close:hover{opacity:1;}

/* ---------- ADMIN: LOGIN ---------- */
body.admin-body{min-height:100vh;}
.login-wrap{display:flex; align-items:center; justify-content:center; min-height:100vh;}
.login-card{
  background:var(--mat); padding:3.4rem 3rem; max-width:380px; width:100%;
  box-shadow: 0 20px 50px -20px var(--mat-shadow);
}
.login-card .mark{font-family:'Fraunces', serif; font-style:italic; font-size:1.1rem; display:block; margin-bottom:1.6rem;}
.login-card h1{font-family:'Fraunces', serif; font-weight:300; font-size:1.7rem; margin:0 0 0.4rem;}
.login-sub{color:var(--ink-soft); font-size:0.9rem; margin:0 0 1.8rem;}
.login-card label{display:block; font-size:0.78rem; letter-spacing:0.05em; margin-bottom:0.4rem; color:var(--ink-soft);}
.login-card input{
  width:100%; padding:0.75rem 0.9rem; border:1px solid rgba(43,38,33,0.2); background:#fff;
  font-family:'Work Sans', sans-serif; font-size:0.95rem; margin-bottom:1.4rem;
}
.login-card button, .btn-primary{
  background:var(--ink); color:var(--mat); border:none; padding:0.85rem 1.6rem;
  font-family:'Work Sans', sans-serif; font-size:0.88rem; letter-spacing:0.03em;
  cursor:pointer; transition:background .25s ease;
}
.login-card button:hover, .btn-primary:hover{background:var(--forest);}
.back-link{display:inline-block; margin-top:1.6rem; font-size:0.82rem; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--gold);}

/* ---------- ADMIN: DASHBOARD ---------- */
.admin-wrap{padding-bottom:8vh;}
.admin-section{padding:5vh 0;}
.admin-form{background:var(--mat); padding:2.2rem; max-width:640px; box-shadow: 0 18px 40px -18px var(--mat-shadow);}
.form-row{margin-bottom:1.3rem;}
.form-row.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem;}
.admin-form label{display:block; font-size:0.78rem; letter-spacing:0.03em; color:var(--ink-soft); margin-bottom:0.4rem;}
.admin-form input[type="text"], .admin-form input[type="file"], .admin-form textarea{
  width:100%; padding:0.7rem 0.85rem; border:1px solid rgba(43,38,33,0.2); background:#fff;
  font-family:'Work Sans', sans-serif; font-size:0.92rem;
}
.admin-form textarea{resize:vertical;}

.admin-list{display:flex; flex-direction:column; gap:1.6rem;}
.admin-item{display:flex; gap:1.6rem; background:var(--mat); padding:1.4rem; box-shadow: 0 14px 30px -18px var(--mat-shadow);}
.admin-thumb{width:130px; height:130px; object-fit:cover; flex-shrink:0;}
.admin-item-body{flex:1; min-width:0;}
.admin-item-body h3{font-family:'Fraunces', serif; font-style:italic; font-weight:400; font-size:1.2rem; margin:0 0 0.2rem;}
.admin-item-body .meta{font-size:0.78rem; color:var(--ink-soft); margin-bottom:0.5rem;}
.admin-item-body p{font-size:0.9rem; margin:0 0 0.8rem; font-weight:300;}
.admin-actions{display:flex; gap:1.2rem; flex-wrap:wrap;}
.link-btn{
  background:none; border:none; padding:0; color:var(--forest); font-family:'Work Sans', sans-serif;
  font-size:0.82rem; cursor:pointer; border-bottom:1px solid transparent; text-decoration:none;
}
.link-btn:hover{border-color:var(--forest);}
.link-btn.danger{color:var(--danger);}
.link-btn.danger:hover{border-color:var(--danger);}
.admin-item-edit input, .admin-item-edit textarea{
  width:100%; padding:0.6rem 0.8rem; border:1px solid rgba(43,38,33,0.2); background:#fff;
  font-family:'Work Sans', sans-serif; font-size:0.9rem; margin-bottom:0.7rem;
}

@media (max-width:760px){
  .masonry{columns: 1 100%;}
  .about-grid{grid-template-columns:1fr;}
  nav.top .links a{margin-left:1.1rem;}
  .admin-item{flex-direction:column;}
  .admin-thumb{width:100%; height:200px;}
  .form-row.two-col{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .artwork, .frame{transition:none;}
}

/* ---------- CONTACT SECTION ---------- */
.contact-section{
  padding:7vh 0 9vh;
  border-top:1px solid rgba(43,38,33,0.12);
}
.contact-grid{
  display:grid; grid-template-columns:1fr 1.2fr; gap:4.5rem; align-items:start;
}
.contact-intro p{
  font-size:1.05rem; line-height:1.7; color:var(--ink-soft); font-weight:300; max-width:32em;
}
.contact-form{
  background:var(--mat); padding:2.4rem;
  box-shadow: 0 18px 40px -18px var(--mat-shadow);
}
.cf-row{margin-bottom:1.3rem;}
.cf-row label{
  display:block; font-size:0.74rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:0.5rem;
}
.cf-row input, .cf-row textarea{
  width:100%; padding:0.8rem 0.95rem; border:1px solid rgba(43,38,33,0.2); background:#fff;
  font-family:'Work Sans', sans-serif; font-size:0.95rem; color:var(--ink);
}
.cf-row input:focus, .cf-row textarea:focus{
  outline:none; border-color:var(--gold);
}
.cf-row textarea{resize:vertical;}
.cf-status{
  margin:1rem 0 0; font-size:0.9rem; min-height:1.2em;
}
.cf-status.sending{color:var(--ink-soft);}
.cf-status.ok{color:var(--forest);}
.cf-status.err{color:var(--danger);}

.footer-credit{
  font-size:0.85rem; color:var(--ink-soft); letter-spacing:0.04em;
}

@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr; gap:2.4rem;}
}