/* ============================================================================
   KALA BAZAAR — the black market's own dress, over scripture.css.
   The inversion of the white site: white line on black ground, nothing else.
   Everything scripture draws from its tokens flips by the tokens; the few
   places it wrote #000/#fff by hand (the pouch, the boxes) are restated here.
============================================================================ */
:root {
  --paper: #000; --paper-2: #000; --paper-3: #000;
  --ink: #fff; --ink-2: #fff; --ink-3: #c6c6c6;
  --rule: #fff; --rule-2: #fff;
  --sky: #fff; --sky-dim: #8a8a8a; --sky-ink: #fff;
}
html, body { background: #000; color: #fff; }
::selection { background: #fff; color: #000; }
a { color: #fff; }
img.nav-mark { filter: invert(1); }

/* the pouch's hand-set colours, flipped */
.cart-thumb, .cart-row canvas { background: #000 !important; border-color: #fff !important; }
.co-in { background: #000; color: #fff; border-color: #fff; }
.co-in::placeholder { color: #8a8a8a; }
.cta, .press-btn, button.cta { background: #fff; color: #000; border-color: #fff; }
.cta:hover, .press-btn:hover { background: #000; color: #fff; }
.ghost, .press-btn.ghost { background: #000; color: #fff; border: 1px solid #fff; }
.ghost:hover, .press-btn.ghost:hover { background: #fff; color: #000; }

/* ── the market floor ─────────────────────────────────────────────────── */
.bz-wordmark { font-size: .72rem; letter-spacing: .32em; text-transform: uppercase; color: #fff; text-decoration: none; }
.bz-hero { max-width: var(--measure); margin: 4.5rem auto 2.5rem; padding: 0 1.2rem; }
.bz-hero h1 { font-weight: 300; font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -.01em; margin: .2rem 0 1rem; }
.bz-hero p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-3); }

.bz-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2.2rem 1.6rem; max-width: 1120px; margin: 0 auto 5rem; padding: 0 1.2rem;
}
.bz-card { display: block; text-decoration: none; color: #fff; }
.bz-photo {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid #fff; background: #000;
}
.bz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: none; }
.bz-photo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bz-photo.ph img { display: none; }
.bz-card h2 { font-weight: 400; font-size: 1.2rem; margin: .9rem 0 .25rem; }
.bz-card .line { font-size: .92rem; color: var(--ink-3); line-height: 1.5; margin: 0 0 .4rem; }
.bz-card .price { font-size: .92rem; letter-spacing: .04em; }
.bz-card .price small { color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; margin-left: .5rem; }

/* ── the item ─────────────────────────────────────────────────────────── */
.bz-item { max-width: 1120px; margin: 3rem auto 5rem; padding: 0 1.2rem; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }
@media (max-width: 820px) { .bz-item { grid-template-columns: 1fr; gap: 1.6rem; } }
.bz-item .photos { display: grid; gap: 1rem; }
.bz-item .photos .bz-photo { aspect-ratio: 4 / 5; }
.bz-item h1 { font-weight: 300; font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin: 0 0 .6rem; }
.bz-item .lede { font-size: 1.05rem; color: var(--ink-3); line-height: 1.6; margin: 0 0 1.4rem; }
.bz-item .body p { font-size: .98rem; line-height: 1.7; margin: 0 0 1rem; }
.bz-facts { list-style: none; padding: 0; margin: 1.4rem 0; border-top: 1px solid #fff; }
.bz-facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid #fff; font-size: .88rem; }
.bz-facts li span:first-child { color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; padding-top: .2rem; }
.bz-take { margin: 1.6rem 0 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.bz-take .price { font-size: 1.3rem; }
.bz-take .spent { color: var(--ink-3); font-size: .88rem; }
.bz-taken { font-size: .88rem; color: var(--ink-3); min-height: 1.4em; margin-top: .7rem; }
.bz-form { display: grid; gap: .8rem; margin-top: 1.2rem; }
.bz-form textarea { min-height: 7rem; }
.bz-form .co-in { font-family: var(--serif); font-size: 1rem; padding: .6rem .7rem; border: 1px solid #fff; border-radius: 0; }

.bz-law { max-width: var(--measure); margin: 0 auto 4rem; padding: 0 1.2rem; font-size: .88rem; color: var(--ink-3); line-height: 1.7; border-top: 1px solid #fff; padding-top: 1.4rem; }
.bz-law b { color: #fff; font-weight: 500; }
.foot, .foot a { color: var(--ink-3); }

/* the running head — scripture writes its links in ink by name, not token */
.page-nav .nav-right a, .page-nav .nav-right a:hover, .page-nav .nav-right button,
.page-nav a[aria-current] { color: #fff !important; background: #000; }
.page-nav .nav-right a:hover, .page-nav .nav-right a[aria-current] { border-bottom-color: #fff !important; }
.page-nav .nav-right .keep { border-color: #fff !important; }
.page-nav .nav-right .keep:hover, .page-nav .nav-right a.keep:hover { background: #fff; color: #000 !important; }
.page-nav { background: #000; border-color: #fff; }

/* the till's boxes — scripture paints them white by name */
#cart-body, #payment, .sit-room, .pay-panel { background: #000 !important; border-color: #fff !important; color: #fff; }
.cart-row, #cart-body .cart-row { border-bottom-color: #fff !important; }
.cart-row:first-child { border-top-color: #fff !important; }
.cart-x { color: #c6c6c6; }
.cart-x:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.co-in, textarea#carry { background: #000 !important; color: #fff; border-color: #fff !important; }
.co-in:focus { outline-color: #fff !important; border-color: #fff !important; }
#checkout button[type="submit"], #checkout .cta { background: #fff; color: #000; border-color: #fff; }
#checkout button[type="submit"]:hover, #checkout .cta:hover { background: #000; color: #fff; border-color: #fff; }
.pay-line, .pay-note, .dest-note, .till-shut { color: #fff; }
.dest-note { color: #c6c6c6; }

/* ── the item, on a phone ─────────────────────────────────────────────────
   Stacked, the photos were two full screens of panel before the title, the
   price or the button were reached — and a buyer who has to scroll past a
   wall to find what a thing costs does not scroll. On a narrow screen the
   photographs become one strip that swipes: a single sheet in view, capped
   at half the screen, the rest a thumb's flick away. The title, the price
   and the taking then sit above the fold where they belong. */
@media (max-width: 820px) {
  .bz-item .photos {
    display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: -1.2rem; padding-inline: 1.2rem;
  }
  .bz-item .photos::-webkit-scrollbar { display: none; }
  .bz-item .photos .bz-photo {
    flex: 0 0 78%; scroll-snap-align: center;
    aspect-ratio: 4 / 5; max-height: 46vh;
  }
  .bz-item .photos .bz-photo:only-child { flex-basis: 100%; }
  .bz-take { position: sticky; bottom: 0; background: #000; padding: .9rem 0;
             border-top: 1px solid #fff; margin-top: 1.2rem; z-index: 2; }
}