/* Standalone artwork landing page — visual system unified with the globe's
   "museum wall" mode: slate-green wall, soft top light, vignette, a thinly
   framed work, and a serif placard. No own language switcher: the page is
   served in whatever language the visitor chose on the globe. */
*{box-sizing:border-box}
:root{
  --wall-top:#1c2420; --wall-mid:#151c18; --wall-bot:#0d1210;
  --frame-bg:#111614; --hair:rgba(255,255,255,.14);
  --ink:#f2eee5; --ink-soft:#cdd6cf; --ink-dim:#9ba79e;
  --line:rgba(255,255,255,.09); --card:rgba(255,255,255,.045);
  --accent:#8fe3b8;
}
html,body{margin:0}
body{
  min-height:100vh; color:var(--ink-soft);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif;
  line-height:1.7;
  background:
    radial-gradient(ellipse 68% 48% at 50% 6%, rgba(255,246,226,.13), transparent 72%),
    linear-gradient(180deg, var(--wall-top) 0%, var(--wall-mid) 45%, var(--wall-bot) 100%);
  background-attachment:fixed;
}
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 92% 82% at 50% 46%, transparent 38%, rgba(0,0,0,.50) 100%);
}
.wrap{max-width:960px;margin:0 auto;padding:26px 22px 80px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.back{font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:.3px}
.back:hover{color:var(--accent)}
.viewer{
  position:relative; width:100%; height:min(74vh,760px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; border-radius:10px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.18));
  border:1px solid var(--line);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none;
}
.viewer.grabbing{cursor:grabbing}
.hero-img{
  /* Absolute origin: the JS transform alone places and scales the work.
     Flex-centering a natural-size giant image would double-apply the offset. */
  position:absolute; left:0; top:0; max-width:none; max-height:none;
  width:auto; height:auto; display:block;
  border:1px solid var(--hair);
  box-shadow:0 30px 80px rgba(0,0,0,.78), 0 4px 16px rgba(0,0,0,.60);
  background:var(--frame-bg);
  transform-origin:0 0; will-change:transform;
}
.hint{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  font-size:12px; letter-spacing:.5px; color:var(--ink-dim);
  background:rgba(8,12,10,.62); padding:6px 14px; border-radius:999px;
  border:1px solid var(--line); pointer-events:none; transition:opacity .6s ease;
}
.hint.hide{opacity:0}
.zoombadge{
  position:absolute; right:14px; top:14px; font-size:11px; letter-spacing:.5px;
  color:var(--ink-dim); background:rgba(8,12,10,.62); padding:4px 10px;
  border-radius:999px; border:1px solid var(--line); pointer-events:none;
}
.placard{margin:22px 0 4px}
.placard::before{content:'';display:block;width:190px;height:1px;margin:0 0 14px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38))}
h1{font-family:Georgia,"Times New Roman","Songti SC","Noto Serif SC",serif;font-weight:400;font-size:30px;line-height:1.3;margin:0;color:var(--ink);letter-spacing:.3px}
.artist{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-dim);margin-top:10px}
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:26px 0}
.meta div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.meta dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px}
.meta dd{margin:0;font-size:13px;color:var(--ink-soft);overflow-wrap:anywhere}
.essay{font-size:15px;color:var(--ink-soft);background:rgba(255,255,255,.035);border-left:2px solid var(--accent);padding:16px 20px;border-radius:0 10px 10px 0;margin:24px 0}
.license{font-size:12px;color:var(--ink-dim)}
h2{font-size:15px;font-weight:600;letter-spacing:.04em;margin:34px 0 10px;color:var(--ink)}
h2::before{content:'';display:inline-block;width:14px;height:1px;background:var(--accent);vertical-align:middle;margin-right:10px}
.pending{font-size:13px;color:var(--ink-dim);border:1px dashed rgba(255,255,255,.16);border-radius:10px;padding:12px 16px;margin-bottom:12px}
.palette{display:flex;gap:8px}
.palette span{width:44px;height:28px;border-radius:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
button{background:rgba(255,255,255,.10);color:var(--ink);border:1px solid var(--line);padding:10px 18px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,background .2s}
button:hover{border-color:var(--accent);background:rgba(143,227,184,.12)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.related a{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:12px;color:var(--ink);text-decoration:none}
.related a:hover{border-color:var(--accent)}
.related img{width:100%;height:120px;object-fit:cover;display:block;background:var(--frame-bg)}
.related span{display:block;padding:8px 10px}
.slots{margin-top:42px;padding-top:20px;border-top:1px solid var(--line)}
.slots p{font-size:12px;color:var(--ink-dim)}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.slot{border:1px dashed rgba(255,255,255,.18);border-radius:10px;padding:14px;text-align:center;font-size:12px;color:var(--ink-dim)}
footer{margin-top:36px;font-size:11px;color:var(--ink-dim)}
footer a{color:var(--ink-dim);text-decoration:none}
footer a:hover{color:var(--accent)}
@media(max-width:600px){h1{font-size:23px}.wrap{padding:18px 14px 60px}.viewer{height:62vh}}