:root{
  --bg:#fbfaf8; --ink:#1c1c1a; --muted:#6f6b64; --line:#e7e3dc;
  --accent:#3f7fb8; --accent-dark:#2c5d8a;
  --ok:#2f7d4f; --warn:#a9701c; --danger:#b23b3b;
  --max:1180px;
  --font:"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}

/* buttons */
.btn-outline{display:inline-block;border:1px solid var(--ink);padding:13px 30px;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;transition:.2s;cursor:pointer;background:none}
.btn-outline:hover{background:var(--ink);color:var(--bg)}
.btn-outline.small{padding:10px 20px}
.btn-primary{display:inline-block;background:var(--accent-dark);color:#fff;border:0;cursor:pointer;padding:13px 26px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;transition:.2s;text-align:center}
.btn-primary:hover{background:var(--ink)}

/* ---------- PUBLIC ---------- */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(251,250,248,.85);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.navbar{display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:10px 0}
.brand{font-family:var(--serif);font-size:1.35rem;letter-spacing:.02em}
.brand small{display:block;font-family:var(--font);font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.brand-logo{display:flex;align-items:center}
.brand-logo img{height:104px;width:auto;display:block;object-fit:contain;margin:-14px 0}
@media(max-width:760px){.brand-logo img{height:72px;margin:-8px 0}}
.menu a{margin-left:30px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.menu a:hover{color:var(--ink)}

.hero{padding:90px 0 70px;text-align:center}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.08}
.hero .lede{max-width:560px;margin:24px auto 0;color:var(--muted);font-size:1.05rem}
.hero .btn-outline{margin-top:34px}

.section{padding:70px 0}
.eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);text-align:center}
.eyebrow.left{text-align:left}
.section-title{font-family:var(--serif);font-weight:400;font-size:2.2rem;text-align:center;margin-top:10px}
.section-title.left{text-align:left}
.empty{text-align:center;color:var(--muted);margin-top:40px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:40px 32px;margin-top:50px}
.card{cursor:pointer;color:inherit}
.card .frame{background:#fff;border:1px solid var(--line);padding:14px;box-shadow:0 1px 2px rgba(0,0,0,.03);transition:.25s;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card:hover .frame{box-shadow:0 14px 34px rgba(0,0,0,.12);transform:translateY(-4px)}
.card .frame img{width:100%;height:100%;object-fit:cover}
.card h3{font-family:var(--serif);font-size:1.18rem;margin-top:16px;font-weight:400}
.card .meta{color:var(--muted);font-size:.86rem;margin-top:3px}
.card .price{margin-top:6px;font-size:.95rem}
.badge{display:inline-block;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);border:1px solid var(--accent);border-radius:999px;padding:3px 10px;margin-top:8px}
.badge.sold{border-color:#bbb;color:#999}

.ph{width:100%;height:100%;background:linear-gradient(180deg,#bcdcf2 0%,#bcdcf2 38%,#e9f1f6 39%,#fff 100%);display:flex;align-items:flex-end;justify-content:center;color:#86a7bd;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding-bottom:10px}
.ph.big{aspect-ratio:3/4;font-size:.9rem}

.about{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.about .inner{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.about .portrait{aspect-ratio:4/5;background:linear-gradient(160deg,#dce8f0,#f4eee6);display:flex;align-items:center;justify-content:center;color:#9aa6ae;border:1px solid var(--line);overflow:hidden}
.about .portrait.has-img{background:none}
.about .portrait img{width:100%;height:100%;object-fit:cover;display:block}
.about p{margin-top:18px;color:#3a3833}
.about .signoff{font-family:var(--serif);font-style:italic;color:var(--accent-dark);margin-top:22px}

.contact{text-align:center}
.contact .contact-text{max-width:480px;margin:16px auto 0;color:var(--muted)}
.contact .mail{display:inline-block;margin-top:26px;font-family:var(--serif);font-size:1.4rem;color:var(--accent-dark);border-bottom:1px solid var(--accent)}

/* artwork detail */
.detail{padding:48px 0 80px}
.back{display:inline-block;color:var(--muted);font-size:.85rem;margin-bottom:28px}
.back:hover{color:var(--ink)}
.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:start}
.detail-img{background:#fff;border:1px solid var(--line);padding:20px}
.detail-img img{width:100%;height:auto}
.thumbstrip{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.thumbstrip .thumb{padding:0;border:1px solid var(--line);background:#fff;cursor:pointer;width:84px;height:64px;overflow:hidden;transition:.15s}
.thumbstrip .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumbstrip .thumb:hover{border-color:var(--accent)}
.thumbstrip .thumb.active{border-color:var(--accent-dark);box-shadow:0 0 0 1px var(--accent-dark)}
.detail-info h1{font-family:var(--serif);font-weight:400;font-size:2.4rem}
.detail-info .meta{color:var(--muted);margin-top:12px}
.detail-info .desc{margin-top:22px;color:#3a3833}
.detail-info .price.big{font-family:var(--serif);font-size:1.7rem;margin-top:28px}
.checkout{margin-top:24px}
.buybtn{display:inline-block;background:var(--accent-dark);color:#fff;padding:15px 34px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;width:100%;text-align:center}
.buybtn:hover{background:var(--ink)}
.note{font-size:.78rem;color:var(--muted);margin-top:12px;line-height:1.5}

.site-footer{padding:40px 0;text-align:center;color:var(--muted);font-size:.8rem;border-top:1px solid var(--line)}
.brand-foot{font-family:var(--serif);font-size:1rem;margin-bottom:8px;color:var(--ink)}
.copyright{margin-top:8px}

@media(max-width:760px){
  .menu{display:none}
  .about .inner{grid-template-columns:1fr;gap:34px}
  .detail-grid{grid-template-columns:1fr;gap:30px}
}

/* ---------- ADMIN ---------- */
body.admin{background:#f4f2ee}
.admin-bar{background:#1c1c1a;color:#f4f2ee}
.admin-bar-inner{display:flex;align-items:center;justify-content:space-between;height:60px;gap:20px;flex-wrap:wrap}
.admin-logo{font-family:var(--serif);font-size:1.05rem;color:#fff}
.admin-bar nav{display:flex;align-items:center;gap:22px}
.admin-bar nav a{font-size:.82rem;color:#cfc9c0}
.admin-bar nav a:hover{color:#fff}
.inline-form{display:inline}
.link-btn{background:none;border:0;color:#cfc9c0;font-size:.82rem;cursor:pointer;font-family:inherit;padding:0}
.link-btn:hover{color:#fff}
.link-btn.danger{color:var(--danger)}
.admin-main{padding:44px 28px 80px}
.admin-main.narrow{max-width:760px}
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}
.admin-main h1{font-family:var(--serif);font-weight:400;font-size:2rem}
.muted{color:var(--muted);font-size:.92rem}

.flash{padding:12px 16px;border-radius:6px;margin:18px 0;font-size:.92rem}
.flash.success{background:#e7f3ec;color:#205c39;border:1px solid #bfe0cc}
.flash.error{background:#fbeaea;color:#8f2f2f;border:1px solid #eccaca}
.flash.warning{background:#fdf3e3;color:#8a5d18;border:1px solid #f0dcb6}

.admin-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line)}
.admin-table th,.admin-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.92rem}
.admin-table th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.thumb-cell{width:64px}
.thumb-cell img{width:48px;height:60px;object-fit:cover;border:1px solid var(--line)}
.thumb-ph{width:48px;height:60px;background:#eee;display:flex;align-items:center;justify-content:center;color:#aaa}
.row-actions{white-space:nowrap;text-align:right}
.row-actions .link-btn{color:var(--accent-dark);margin-left:14px}
.pill{display:inline-block;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:#eee;color:#777}
.pill.ok{background:#e7f3ec;color:var(--ok)}
.pill.warn{background:#fdf3e3;color:var(--warn)}

.form-card{background:#fff;border:1px solid var(--line);padding:30px;border-radius:8px;margin-top:22px}
.stack{display:flex;flex-direction:column;gap:18px}
.stack label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.stack input[type=text],.stack input[type=email],.stack input[type=password],.stack input[type=url],.stack input[type=number],.stack textarea{
  font-family:inherit;font-size:1rem;padding:11px 13px;border:1px solid var(--line);border-radius:6px;background:#fdfcfa;color:var(--ink);text-transform:none;letter-spacing:normal}
.stack input:focus,.stack textarea:focus{outline:none;border-color:var(--accent)}
.stack textarea{resize:vertical}
.hint{font-size:.74rem;color:var(--muted);text-transform:none;letter-spacing:normal}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.checkbox{flex-direction:row !important;align-items:center;gap:10px !important;text-transform:none;letter-spacing:normal;color:var(--ink);font-size:.95rem}
.checkbox input{width:18px;height:18px}
.form-preview{width:120px;height:auto;border:1px solid var(--line);margin:6px 0}
.img-manage{margin-top:4px}
.img-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;margin-top:10px}
.img-item{border:1px solid var(--line);border-radius:6px;padding:8px;background:#fff;display:flex;flex-direction:column;gap:6px}
.img-item img{width:100%;height:90px;object-fit:cover;border:1px solid var(--line)}
.img-item .mini{display:flex;align-items:center;gap:6px;font-size:.78rem;text-transform:none;letter-spacing:normal;color:var(--ink)}
.img-item .mini input{width:auto}
.form-actions{display:flex;align-items:center;gap:16px;margin-top:6px}
hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* auth */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:40px;width:100%;max-width:380px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.auth-brand{font-family:var(--serif);font-size:1.4rem;text-align:center;margin-bottom:24px}
.auth-brand small{display:block;font-family:var(--font);font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-top:6px}

@media(max-width:680px){
  .row-2{grid-template-columns:1fr}
  .admin-table thead{display:none}
  .admin-table,.admin-table tbody,.admin-table tr,.admin-table td{display:block;width:100%}
  .admin-table tr{margin-bottom:14px;border:1px solid var(--line)}
  .admin-table td{border-bottom:1px solid #f0ece5}
  .row-actions{text-align:left}
}