/* public/styles.css - minimal clean dark theme */
:root{
  --bg:#0b0d10;
  --panel:#0f1318;
  --text:#e7ecf2;
  --muted:#aab4c0;
  --line:#1b2430;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}

/* Deter casual saving (bypassable) */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Lightbox */
html.lbOpen, body.lbOpen{overflow:hidden}
.lbTarget{cursor:zoom-in}
.lb{
  position:fixed;inset:0;z-index:9999;
  display:none;
}
.lb.lbOpen{display:block}
.lbBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.86)}
.lbChrome{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.lbStage{position:relative;max-width:100vw;max-height:100vh;padding:18px;}
.lbImg{
  display:block;
  max-width:calc(100vw - 36px);
  max-height:calc(100vh - 36px);
  width:auto;height:auto;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 16px 60px rgba(0,0,0,.6);
  cursor:pointer;
}
.lbClose{
  position:absolute;top:16px;right:18px;
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:.0;transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.lbClose:hover{background:rgba(255,255,255,.12)}
.lbNav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:58px;height:58px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
  font-size:40px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  opacity:0;transform:translateY(-50%) scale(.98);
  transition:opacity .18s ease, transform .18s ease, background .18s ease;
}
.lbNav:hover{background:rgba(255,255,255,.12)}
.lbPrev{left:16px}
.lbNext{right:16px}

/* show controls on movement */
.lb.lbOpen.lbShow .lbClose,
.lb.lbOpen.lbShow .lbNav{opacity:1;transform:translateY(-50%) scale(1)}
.lb.lbOpen.lbShow .lbClose{transform:translateY(0)}

@media (hover:none){
  /* On touch devices, keep close button visible */
  .lb.lbOpen .lbClose{opacity:1;transform:translateY(0)}
  .lb.lbOpen .lbNav{opacity:1}
}

.nav{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(to bottom, rgba(11,13,16,.92), rgba(11,13,16,.65));
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.navInner{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:26px 0 18px;
}
.brandTitle{font-size:32px;font-weight:820;letter-spacing:.2px}
.brandTag{font-size:15px;color:var(--muted);margin-top:3px}
.links a{margin-left:18px;color:var(--muted);font-size:15px}
.links a:hover{color:var(--text)}

.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.section{margin:34px 0}
.h1{font-size:58px;line-height:1.03;margin:0 0 12px;letter-spacing:-.01em}
.h2{font-size:24px;font-weight:720;letter-spacing:-.01em;margin:0 0 14px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* UI primitives (shared by public + admin) */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.cardpad{padding:16px}
.row{display:flex;gap:12px;margin:10px 0}
.inline{display:inline}

.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,0.03);
  color:var(--text);
  font-size:14px;
}
.input:focus{outline:none;border-color:rgba(255,255,255,0.22)}
textarea.input{resize:vertical}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:var(--text);
  cursor:pointer;
  font-weight:650;
}
.btn:hover{background:rgba(255,255,255,0.12)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent}
.btn.small{padding:8px 10px;border-radius:12px;font-size:13px}

.linkbtn{background:none;border:none;color:var(--muted);cursor:pointer;padding:0;margin-left:18px;font:inherit;font-size:14px}
.linkbtn:hover{color:var(--text)}

.alert{margin:10px 0;padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,0.14)}
.alert.ok{background:rgba(60, 180, 120, 0.12)}
.alert.err{background:rgba(220, 80, 80, 0.12)}

.grid2{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.kpi{font-size:34px;font-weight:750;line-height:1.05}

.hero{
  margin-top:18px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.hero img{display:block;width:100%;height:440px;object-fit:cover}

/* Selected works: frames */
.selectedGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
  margin-top:18px;
}
.selCard{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.selCard img{display:block;width:100%;height:320px;object-fit:cover}

/* Series stack: title above + one image */
.seriesStack{display:flex;flex-direction:column;gap:22px;margin-top:14px}
.seriesBlockHead{margin-bottom:10px}
.seriesBlockLabel{font-size:12px;letter-spacing:.24em;color:var(--muted)}
.seriesBlockTitle{display:inline-block;font-size:22px;font-weight:650;margin-top:6px}
.seriesBlockSub{font-size:14px;color:var(--muted);margin-top:4px;max-width:70ch}

.seriesCover{
  display:block;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
  box-shadow:var(--shadow);
}
.seriesCoverImg{display:block;width:100%;height:440px;object-fit:cover}
.seriesCoverPlaceholder{height:220px;background:linear-gradient(135deg, #141b24, #0f1318)}

/* Work page */
.workSeriesGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.workSeries{
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--panel);
}
.workSeriesLabel{font-size:12px;letter-spacing:.24em;color:var(--muted)}
.workSeriesTitle{font-size:20px;font-weight:650;margin-top:6px}
.workSeriesSub{font-size:13px;color:var(--muted);margin-top:6px}
.workCoverImg{display:block;width:100%;height:130px;object-fit:cover;border-radius:14px;margin-top:12px;border:1px solid var(--line)}

/* Series gallery grid */
.seriesHeader{padding-top:18px}
.seriesHeaderLabel{font-size:13px;letter-spacing:.22em;color:var(--muted)}
.seriesHeader .h1{font-size:56px;margin:10px 0 10px}

.photoGrid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:14px;
  margin:12px 0 34px;
}
.photo{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo figcaption{padding:10px 12px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.p-s{grid-column:span 4}
.p-m{grid-column:span 6}
.p-l{grid-column:span 12}
.photo.p-l{display:inline-flex;flex-direction:column;align-items:center;justify-self:center;max-width:min(var(--seriesFitW, calc(100vw - 48px)), 1200px)}
.photo.p-s img{height:240px}
.photo.p-m img{height:340px}
.photo.p-l img{display:block;width:auto;height:auto;max-width:min(var(--seriesFitW, calc(100vw - 48px)), 1200px);max-height:var(--seriesFitH, calc(100svh - 200px));object-fit:contain;margin:0 auto}

.footer{padding:30px 28px;color:var(--muted);border-top:1px solid var(--line);margin-top:40px}

/* Responsive */
@media (max-width: 980px){
  .wrap{padding:0 20px}
  .h1{font-size:42px}
  .grid2{grid-template-columns:1fr}
  .selectedGrid{grid-template-columns:1fr}
  .selCard img{height:280px}
  .seriesCoverImg{height:320px}
  .workSeriesGrid{grid-template-columns:1fr}
  .p-s,.p-m,.p-l{grid-column:span 12}
  .photo.p-s img{height:260px}
  .photo.p-m img{height:340px}
  .photo.p-l{max-width:var(--seriesFitW, calc(100vw - 40px))}
  .photo.p-l img{display:block;width:auto;height:auto;max-width:var(--seriesFitW, calc(100vw - 40px));max-height:var(--seriesFitH, calc(100svh - 180px));object-fit:contain;margin:0 auto}
}