/* KBob Cards — public gallery
   Single committed dark theme (cards read best on a neutral dark ground). */

:root {
  --ink:        #0e1117;
  --ink-2:      #151a23;
  --ink-3:      #1c222d;
  --line:       #2a3140;
  --txt:        #e8ecf3;
  --txt-2:      #9aa5b8;
  --gold:       #e0b44a;
  --gold-hi:    #f0c968;
  --green:      #4ec08a;
  --radius:     12px;
  --wrap:       1280px;
}

* { box-sizing: border-box; }
/* A class that sets `display` outranks the UA [hidden] rule, which silently
   leaves "hidden" panels (the sign-in gate, the active-filter chip row) sitting
   on the page as empty space. Make the attribute authoritative. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--txt);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- header ---------- */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: rgba(14,17,23,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  object-fit: contain; display: block;
  box-shadow: 0 0 0 2px rgba(224,180,74,.55);
}
.brand-txt { font-family: "Bebas Neue", Impact, sans-serif; font-size: 26px; letter-spacing: 1.2px; }
.brand-txt em { font-style: normal; color: var(--gold); }
.hdr-nav { display: flex; gap: 26px; font-size: 14px; font-weight: 600; letter-spacing: .3px; }
.hdr-nav a { text-decoration: none; color: var(--txt-2); }
.hdr-nav a:hover { color: var(--gold); }
.soc {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--txt-2);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.soc svg { width: 18px; height: 18px; flex: none; }
.soc:hover { color: var(--gold); border-color: var(--gold); background: rgba(224,180,74,.09); }
.soc-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.soc-row .soc { padding: 11px 18px; font-size: 14.5px; }
.soc-row .soc svg { width: 20px; height: 20px; }

/* ---------- hero ---------- */
.hero {
  padding: 72px 0 56px;
  background:
    radial-gradient(1100px 420px at 12% -10%, rgba(224,180,74,.14), transparent 62%),
    radial-gradient(900px 400px at 92% 0%, rgba(78,192,138,.09), transparent 60%);
  border-bottom: 1px solid var(--line);
}
.eyebrow {
  margin: 0 0 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold);
}
.hero h1.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hero-banner {
  width: 100%; max-width: 1232px;  /* source is 1536px wide - still no upscaling */
  height: auto; border-radius: 14px; display: block; margin: 0 auto;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}
.hero-sup { margin: 26px 0 0; text-align: center; font-size: 17px; line-height: 1.78; color: var(--txt-2); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 34px; justify-content: center; }
.hero-stats div { display: flex; flex-direction: column; align-items: center; }
.hero-stats strong {
  font-family: "Bebas Neue", Impact, sans-serif; font-size: 40px;
  line-height: 1; color: var(--gold); font-weight: 400;
}
.hero-stats span { font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--txt-2); margin-top: 4px; }

/* ---------- filters ---------- */
.filters {
  position: sticky; top: 68px; z-index: 50;
  background: rgba(21,26,35,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: 16px 0 14px;
}
.f-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.f-search { position: relative; flex: 1 1 300px; min-width: 240px; }
.f-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--txt-2); }
.f-search input {
  width: 100%; padding: 12px 14px 12px 42px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 10px;
  color: var(--txt); font: inherit; font-size: 15px;
}
.f-search input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.f-selects { display: flex; gap: 10px; flex-wrap: wrap; }
.f-sel { display: flex; flex-direction: column; gap: 5px; }
.f-sel span { font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--txt-2); }
.f-sel select {
  padding: 11px 34px 11px 13px; min-width: 150px;
  background: var(--ink) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%239aa5b8' stroke-width='2'/></svg>") no-repeat right 12px center;
  border: 1px solid var(--line); border-radius: 10px; color: var(--txt);
  font: inherit; font-size: 14px; appearance: none; cursor: pointer;
}
.f-active { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: rgba(224,180,74,.14); color: var(--gold); border: 1px solid rgba(224,180,74,.35);
  cursor: pointer;
}
.chip b { font-weight: 800; }
.chip:hover { background: rgba(224,180,74,.24); }
.f-count { margin: 12px 0 0; font-size: 13px; color: var(--txt-2); }
.linkbtn { background: none; border: 0; color: var(--gold); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; }

/* ---------- grid ---------- */
.grid {
  display: grid; gap: 26px; padding: 36px 0 10px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(224,180,74,.5); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.card-imgbtn {
  display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  background: #0a0d12; position: relative;
}
/* Trading cards are portrait (2.5 x 3.5 = 0.714). The box matches that shape and
   uses contain, so a landscape or square scan is never cropped. */
.card-imgbtn .ph { aspect-ratio: 5 / 7; display: grid; place-items: center; }
.card-imgbtn img { max-height: 100%; width: auto; margin: 0 auto; object-fit: contain; }
.card-count {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(10,13,18,.82); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; color: var(--txt-2);
}
.card-sold {
  position: absolute; left: 8px; top: 8px;
  background: #c0392b; color: #fff; border-radius: 6px;
  padding: 3px 9px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.card-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-item { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--txt-2); margin: 0; }
.card-title { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px; background: var(--ink-3); color: var(--txt-2); border: 1px solid var(--line);
}
.badge.grade { color: var(--green); border-color: rgba(78,192,138,.4); background: rgba(78,192,138,.1); }
.card-foot { margin-top: auto; padding-top: 4px; }
.price { font-family: "Bebas Neue", Impact, sans-serif; font-size: 30px; line-height: 1; color: var(--gold); }
.price small { font-family: Inter, sans-serif; font-size: 12px; color: var(--txt-2); letter-spacing: 1px; margin-left: 6px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 9px; font-weight: 700; font-size: 14px;
  text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit;
}
.btn-gold { background: linear-gradient(150deg, var(--gold-hi), #c99c2c); color: #17130a; }
.btn-gold:hover { filter: brightness(1.07); }
.btn-block { width: 100%; margin-top: 8px; }
.btn[aria-disabled="true"] { background: var(--ink-3); color: var(--txt-2); pointer-events: none; border-color: var(--line); }

.empty { text-align: center; padding: 60px 0 80px; color: var(--txt-2); }
.skel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); height: 400px; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .45 } 50% { opacity: .8 } }

/* ---------- contact ---------- */
.contact { border-top: 1px solid var(--line); margin-top: 60px; padding: 66px 0; background: var(--ink-2); }
.contact h2 { margin: 0 0 14px; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(32px, 4.4vw, 50px); font-weight: 400; letter-spacing: .5px; }
.contact p { margin: 0 0 24px; font-size: 16.5px; line-height: 1.78; color: var(--txt-2); }

/* ---------- footer ---------- */
.ft { border-top: 1px solid var(--line); padding: 24px 0; font-size: 13px; color: var(--txt-2); }
.ft-in { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.ft-credit { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ft-credit svg { flex: none; }
.ft-credit a { color: var(--txt); text-decoration: none; }
.ft-credit a:hover { color: var(--gold); }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(6,8,12,.95); overflow-y: auto; }
.lb-close {
  position: fixed; right: 18px; top: 14px; z-index: 210;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--txt); font-size: 26px; line-height: 1; cursor: pointer;
}
.lb-close:hover { border-color: var(--gold); color: var(--gold); }
/* Staging injects a fixed admin bar at the top of the viewport; drop the close
   button below it so it is never half-hidden. No effect in production. */
html:has(#mpo-admin-bar) .lb-close { top: 60px; }
/* Staging only: park the sticky site header and filter bar BELOW the fixed
   48px publish bar, at every scroll position, so the Publish to Production
   control is never slid under. Production has no bar, so no effect there. */
html:has(#mpo-admin-bar) .hdr     { top: 48px; }
html:has(#mpo-admin-bar) .filters { top: 116px; }
.lb-in {
  max-width: 1220px; margin: 0 auto; padding: 62px 24px 48px;
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(300px,.85fr); gap: 34px; align-items: start;
}
.lb-stage { position: relative; background: #06080c; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.lb-imgwrap { position: relative; display: grid; place-items: center; min-height: 380px; }
.lb-imgwrap img { max-height: 74vh; width: auto; object-fit: contain; }
.lb-imgwrap.zoomable { cursor: crosshair; }
/* In-place magnifier: sits exactly over the displayed scan and paints the
   high-resolution master, panned so the point under the cursor stays put. */
.lb-zoomsurface {
  position: absolute; pointer-events: none;
  background-repeat: no-repeat; background-color: #06080c;
  border: 1px solid var(--gold);
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 60px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(21,26,35,.9); color: var(--txt); font-size: 30px; line-height: 1; cursor: pointer;
}
.lb-nav:hover { border-color: var(--gold); color: var(--gold); }
.lb-prev { left: 8px; } .lb-next { right: 8px; }
.lb-count { position: absolute; right: 16px; bottom: 14px; font-size: 12px; color: var(--txt-2); letter-spacing: 1px; }
.lb-side { padding-top: 4px; }
.lb-item { margin: 0 0 8px; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--txt-2); }
.lb-side h3 { margin: 0 0 14px; font-size: 25px; line-height: 1.28; font-weight: 700; }
.lb-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.lb-notes { margin: 0 0 20px; color: var(--txt-2); font-size: 15.5px; line-height: 1.78; }
.lb-price { font-family: "Bebas Neue", Impact, sans-serif; font-size: 44px; line-height: 1; color: var(--gold); }
.zoomtoggle {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  padding: 10px 16px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--ink-2); color: var(--txt); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.zoomtoggle svg { width: 18px; height: 18px; flex: none; }
.zoomtoggle[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); background: rgba(224,180,74,.12); }
.zoomtoggle[hidden] { display: none; }
.zoomhint { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--txt-2); }
.lb-thumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.lb-thumb {
  width: 62px; padding: 0; border: 2px solid var(--line); border-radius: 7px;
  overflow: hidden; background: #06080c; cursor: pointer;
}
.lb-thumb.on { border-color: var(--gold); }
.lb-thumb .ph { aspect-ratio: 5 / 7; display: grid; place-items: center; }
.lb-thumb img { max-height: 100%; width: auto; object-fit: contain; }

@media (max-width: 980px) {
  .lb-in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  .hdr-nav { gap: 14px; }
  .hdr-nav .soc span { display: none; }
  .hdr-nav .soc { padding: 8px; }
}
@media (max-width: 760px) {
  .hero { padding: 48px 0 40px; }
  .filters { position: static; }
  .f-selects { width: 100%; }
  .f-sel { flex: 1 1 46%; }
  .f-sel select { min-width: 0; width: 100%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
  .hero-stats { gap: 26px; }
}