/* web/static/css/marketplace.css — styles for /marketplace/* surface.
 *
 * Phase 3 launched per-product detail (08 book / 09 puzzle).
 * Phase 4 added the editorial-above-shelves landing (05) and the
 *         facet view (10).
 * Phase 5 absorbed the shared button + modal classes from the
 *         retired press.css and renamed them mkt-* — the press
 *         surface no longer exists; everything storefront-shaped
 *         lives here.
 */

/* ── Hide the workshop chrome while inside /marketplace/* ────────── */
/* The marketplace renders its own topbar inside <main>. app.js
 * toggles body.mkt-shell-active on every route:change so this rule
 * scopes the hide cleanly. */
body.mkt-shell-active > #civnode-root > header.topbar,
body.mkt-shell-active > #civnode-root > .bottom-nav {
  display: none !important;
}
body.mkt-shell-active > #civnode-root > main#main {
  padding-top: 0;
  margin-top: 0;
}

/* ── Buttons (shared across the marketplace surface) ─────────────── */
.mkt-btn {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  text-decoration: none;
  display: inline-block;
}
.mkt-btn--primary,
a.mkt-btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
/* Anchor variants need :hover spelled out — the global a:hover rule in
   base.css would otherwise re-paint the label var(--accent-hover) on top
   of an --accent-hover background, which renders as invisible text. */
.mkt-btn--primary:hover,
a.mkt-btn--primary:hover {
  background: var(--accent-hover);
  color: var(--text-on-accent);
}
.mkt-btn--ghost,
a.mkt-btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted));
}
.mkt-btn--ghost:hover,
a.mkt-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── Anonymous-buy gate modal ────────────────────────────────────── */
.mkt-checkout-gate__overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: mkt-gate-fade 160ms ease;
}
@keyframes mkt-gate-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.mkt-checkout-gate {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 32px 32px 28px;
  width: 100%;
  max-width: 420px;
  position: relative;
  animation: mkt-gate-pop 200ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes mkt-gate-pop {
  from { transform: translateY(8px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

.mkt-checkout-gate__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.mkt-checkout-gate__close:hover {
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.mkt-checkout-gate__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mkt-checkout-gate__title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 6px;
  line-height: 1.2;
}

.mkt-checkout-gate__sub {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.45;
}

.mkt-checkout-gate__cta {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px;
}
.mkt-checkout-gate__cta:first-of-type {
  margin-top: 0;
}

.mkt-checkout-gate__signup {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 14px 0 0;
  text-align: center;
  line-height: 1.5;
}
.mkt-checkout-gate__signup a {
  color: var(--accent);
  text-decoration: none;
}
.mkt-checkout-gate__signup a:hover {
  text-decoration: underline;
}

.mkt-checkout-gate__sep {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mkt-checkout-gate__sep::before,
.mkt-checkout-gate__sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.mkt-checkout-gate__sep span {
  white-space: nowrap;
}

.mkt-checkout-gate__guest {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.mkt-checkout-gate__email {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.mkt-checkout-gate__email:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}
.mkt-checkout-gate__email::placeholder {
  color: var(--text-muted);
}

.mkt-checkout-gate__err {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  color: #d8675f;
  margin: 4px 0 0;
  line-height: 1.4;
}

/* ── Shell + chrome ────────────────────────────────────────────── */
.mkt-shell {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  font-family: var(--font-sans);
}

.mkt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}
.mkt-topbar__brand {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
}
.mkt-topbar__brand em { color: var(--accent); font-style: italic; }
.mkt-topbar__nav { display: flex; gap: 4px; }
.mkt-topbar__nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.mkt-topbar__nav a[aria-current="true"] {
  color: var(--accent);
  background: var(--accent-subtle);
}
.mkt-topbar__nav a:hover { color: var(--text-primary); }
.mkt-topbar__user {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mkt-facets {
  display: flex;
  gap: 4px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-primary);
  align-items: center;
}
.mkt-facets a {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.mkt-facets a[aria-current="true"] {
  color: var(--text-primary);
  background: var(--bg-elevated);
}
.mkt-facets a:hover { color: var(--text-primary); }
.mkt-facets__divider { flex: 1; }
.mkt-facets__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  background: var(--bg-surface);
  min-width: 240px;
}
.mkt-facets__search input {
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 13px;
  outline: none;
  flex: 1;
}
.mkt-facets__search input::placeholder { color: var(--text-muted); }

/* ── Crumb ──────────────────────────────────────────────────────── */
.mkt-crumb {
  max-width: 1180px;
  margin: 24px auto 0;
  padding: 0 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mkt-crumb a { color: var(--accent); text-decoration: none; }
.mkt-crumb .sep { color: var(--text-muted); }

.mkt-loading {
  max-width: 1180px;
  margin: 64px auto;
  padding: 0 32px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* Not-found state on /marketplace/<bad-slug>. Replaces the generic
   loading text node with a small empty-state card so a typo or dead
   link doesn't look like the whole marketplace is down. */
.mkt-empty {
  max-width: 680px;
  margin: 96px auto;
  padding: 0 32px;
  text-align: center;
}
.mkt-empty__title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-style: italic;
  margin: 0 0 12px;
  color: var(--text-primary);
}
.mkt-empty__sub {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 24px;
}
.mkt-empty .mkt-btn {
  display: inline-block;
}

/* ── Hero ──────────────────────────────────────────────────────── */
.mkt-hero {
  max-width: 1180px;
  margin: 28px auto 56px;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 980px) { .mkt-hero { grid-template-columns: 1fr; } }

.mkt-hero__byline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.mkt-hero__byline span:not(:first-child)::before {
  content: '·';
  margin: 0 10px;
  color: var(--text-muted);
}
.mkt-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.mkt-hero__title em { color: var(--accent); font-style: italic; }
.mkt-hero__author {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 22px;
}
.mkt-hero__deck {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: 22px;
  max-width: 620px;
}

/* ── Buy panel (right column, sticky) ──────────────────────────── */
.mkt-buy-panel {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mkt-cover {
  aspect-ratio: 5 / 8;
  border-radius: 1px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 24px 56px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, var(--cv1, #1a120a) 0%, var(--cv2, #3a2818) 100%);
  position: relative;
  overflow: hidden;
}
.mkt-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mkt-cover__ttl {
  position: absolute;
  top: 12%;
  left: 0; right: 0;
  text-align: center;
  color: #f0e6cc;
  font-family: 'Literata', var(--font-serif);
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1;
  padding: 0 14px;
}
.mkt-cover__auth {
  position: absolute;
  bottom: 22px;
  left: 0; right: 0;
  text-align: center;
  color: #d8cba8;
  font-family: 'Literata', var(--font-serif);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.mkt-formats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-format {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg-surface);
  color: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, opacity 180ms ease;
}
.mkt-format:hover { border-color: var(--accent); }
.mkt-format[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.mkt-format--unavailable {
  opacity: 0.55;
}
.mkt-format--unavailable .mkt-format__price::after {
  content: " · soon";
  font-size: 0.7em;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}
.mkt-format__name {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.mkt-format__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}
.mkt-format__price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--accent);
  font-weight: 600;
}

.mkt-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mkt-cta .mkt-btn {
  width: 100%;
  text-align: center;
}

/* Admin: ASIN + format editor (only renders for admins) */
.mkt-admin {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px dashed var(--mkt-border, var(--border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--mkt-bg-surface, var(--bg-surface)) 92%, var(--mkt-accent, var(--accent)) 8%);
}
.mkt-admin__heading {
  font: 700 0.78rem/1 var(--font-sans, sans-serif);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mkt-text-secondary, var(--text-secondary));
  margin: 0 0 6px 0;
}
.mkt-admin__help {
  font: 0.85rem/1.5 var(--font-sans, sans-serif);
  color: var(--mkt-text-secondary, var(--text-secondary));
  margin: 0 0 12px 0;
}
.mkt-admin__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.mkt-admin__input,
.mkt-admin__select {
  font: 0.9rem/1.4 var(--font-mono, monospace);
  background: var(--mkt-bg-surface, var(--bg-surface));
  color: var(--mkt-text-primary, var(--text-primary));
  border: 1px solid var(--mkt-border, var(--border));
  border-radius: 4px;
  padding: 7px 10px;
}
.mkt-admin__input {
  width: 160px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mkt-admin__input:focus,
.mkt-admin__select:focus {
  outline: 2px solid var(--mkt-accent, var(--accent));
  outline-offset: -1px;
  border-color: var(--mkt-accent, var(--accent));
}
.mkt-admin__feedback {
  font: 0.85rem/1.4 var(--font-sans, sans-serif);
  margin: 10px 0 0 0;
  min-height: 1.2em;
}
.mkt-admin__feedback.is-ok  { color: var(--mkt-success, var(--success, #4a8a5a)); }
.mkt-admin__feedback.is-err { color: var(--mkt-error, var(--error, #cc4444)); }

.mkt-unlock {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  padding: 18px 20px;
}
.mkt-unlock__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mkt-unlock__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
}
.mkt-unlock__title em {
  font-style: italic;
  color: var(--accent);
}
.mkt-unlock__hint {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mkt-unlock__lede {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 12px;
}
.mkt-unlock__form {
  display: flex;
  gap: 8px;
}
.mkt-unlock__form input {
  flex: 1;
  background: var(--bg-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  outline: none;
}
.mkt-unlock__form input:focus { border-color: var(--accent); }
.mkt-unlock__form input::placeholder { color: var(--text-muted); }
.mkt-unlock__form button {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
}
.mkt-unlock__form button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mkt-ship {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.55;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.mkt-ship p + p { margin-top: 6px; }

/* ── Bands strip (puzzles only) ────────────────────────────────── */
.mkt-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 24px;
}
.mkt-band {
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
}
.mkt-band__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.mkt-band__name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
}
.mkt-band__name em {
  font-style: italic;
  color: var(--accent);
}
.mkt-band__sub {
  font-family: var(--font-serif);
  font-size: 0.94rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── Sections ──────────────────────────────────────────────────── */
.mkt-section {
  max-width: 1180px;
  margin: 64px auto;
  padding: 0 32px;
}
.mkt-section__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
  letter-spacing: -0.01em;
}
.mkt-section__title em {
  font-style: italic;
  color: var(--accent);
}
.mkt-section__note {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.mkt-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 36px;
  max-width: 880px;
}
@media (max-width: 760px) { .mkt-details { grid-template-columns: repeat(2, 1fr); } }
.mkt-detail { display: flex; flex-direction: column; gap: 4px; }
.mkt-detail__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mkt-detail__value {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  color: var(--text-primary);
}

.mkt-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 800px) { .mkt-trio { grid-template-columns: 1fr; } }
.mkt-trio-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 180ms ease, transform 180ms ease;
}
.mkt-trio-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.mkt-trio-card__kind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.mkt-trio-card__title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.3;
}
.mkt-trio-card__title em { font-style: italic; }
.mkt-trio-card__lede {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.mkt-trio-card__row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: auto;
}
.mkt-trio-card__row .price {
  color: var(--accent);
  font-weight: 600;
}
.mkt-trio-card__row .free {
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mkt-source {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  padding: 28px 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: start;
}
@media (max-width: 800px) { .mkt-source { grid-template-columns: 1fr; } }
.mkt-source-cover {
  aspect-ratio: 5 / 8;
  border-radius: 1px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--cv1, #1a120a) 0%, var(--cv2, #3a2818) 100%);
  position: relative;
  overflow: hidden;
}
.mkt-source__text h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.mkt-source__text h3 em { font-style: italic; }
.mkt-source__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.mkt-source__text p {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.mkt-source__actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.mkt-source__btn {
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.mkt-source__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mkt-source__btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
  font-weight: 600;
}
.mkt-source__btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-on-accent);
}

/* ── Shelves on the landing ────────────────────────────────────── */
.mkt-shelf {
  max-width: 1200px;
  margin: 0 auto 56px;
  padding: 0 32px;
}
.mkt-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 12px;
}
.mkt-shelf__title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.mkt-shelf__title em {
  font-style: italic;
  color: var(--accent);
}
.mkt-shelf__more {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 180ms ease;
}
.mkt-shelf__more:hover { color: var(--accent); }

.mkt-shelf__row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .mkt-shelf__row { grid-template-columns: repeat(2, 1fr); } }

.mkt-shelf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.mkt-shelf-card__cover {
  aspect-ratio: 5 / 8;
  border-radius: 1px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease, box-shadow 180ms ease;
  background: linear-gradient(180deg, var(--cv1, #1a120a) 0%, var(--cv2, #3a2818) 100%);
  position: relative;
  overflow: hidden;
}
.mkt-shelf-card:hover .mkt-shelf-card__cover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.mkt-shelf-card__cover .mkt-cover__ttl {
  font-size: 0.95rem;
  top: 16%;
}
.mkt-shelf-card__cover .mkt-cover__auth {
  font-size: 7.5px;
}
.mkt-shelf-card__title {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
}
.mkt-shelf-card__title em { font-style: italic; }
.mkt-shelf-card__meta {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-secondary);
}
.mkt-shelf-card__meta .price {
  color: var(--accent);
  font-weight: 600;
}

/* ── Editorial body in the hero (drop cap) ─────────────────────── */
.mkt-hero__body {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-primary);
  max-width: 620px;
  margin-bottom: 22px;
}
/* Raised cap, not a floated drop-cap. The floated version made the
 * Arcana hero look broken on T: the wide crossbar created a dead
 * white wedge under itself, and the second line of body text was
 * forced to indent past the stem, breaking the column-edge. A raised
 * cap sits inline with the first word and works for any initial. */
.mkt-hero__body p:first-child::first-letter {
  font-family: var(--font-serif);
  font-size: 2.6em;
  line-height: 0.9;
  color: var(--accent);
  font-weight: 500;
  vertical-align: -0.22em;
  margin-right: 0.03em;
  letter-spacing: -0.01em;
}
.mkt-hero__body p + p { margin-top: 1.1em; }

/* ── Facet view ────────────────────────────────────────────────── */
.mkt-facet-head {
  max-width: 1200px;
  margin: 28px auto 0;
  padding: 0 32px 28px;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 56px;
  align-items: end;
}
@media (max-width: 980px) { .mkt-facet-head { grid-template-columns: 1fr; gap: 22px; } }
.mkt-facet-head__name {
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.mkt-facet-head__name em {
  color: var(--accent);
  font-style: italic;
}
.mkt-facet-head__count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mkt-facet-head__count strong {
  color: var(--accent);
  font-weight: 600;
}
.mkt-facet-head__lede {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.55;
  border-left: 2px solid var(--accent);
  padding-left: 18px;
}

.mkt-strip {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.mkt-strip .label {
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  margin-right: 4px;
}
.mkt-pill {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease;
  font-size: 12px;
  font-family: var(--font-mono);
}
.mkt-pill:hover { border-color: var(--accent); }
.mkt-pill--active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-color: var(--accent);
}
.mkt-strip__divider { flex: 1; }
.mkt-strip select {
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
}

.mkt-grid {
  max-width: 1200px;
  margin: 36px auto 0;
  padding: 0 32px 64px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 24px;
}
@media (max-width: 1100px) { .mkt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 740px)  { .mkt-grid { grid-template-columns: repeat(2, 1fr); } }

.mkt-list-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 180ms ease;
}
.mkt-list-card:hover { transform: translateY(-2px); }
.mkt-list-card__cover {
  aspect-ratio: 5 / 8;
  border-radius: 1px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  background: linear-gradient(180deg, var(--cv1, #1a120a) 0%, var(--cv2, #3a2818) 100%);
  position: relative;
  overflow: hidden;
  transition: box-shadow 180ms ease;
}
.mkt-list-card:hover .mkt-list-card__cover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}
.mkt-list-card__cover .mkt-cover__ttl {
  font-size: 0.95rem;
  top: 16%;
}
.mkt-list-card__title {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.3;
}
.mkt-list-card__title em { font-style: italic; }
.mkt-list-card__author {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-secondary);
}
.mkt-list-card__row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.mkt-list-card__price {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
}
.mkt-list-card__formats {
  display: flex;
  gap: 6px;
}
.mkt-list-card__formats span {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.mkt-list-card__formats .free {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── Real cover images (used outside the marketplace shell too — */
/*    e.g. .frontpage-press-tile__cover on the homepage) ─────────── */
/* When a volume row carries cover_url, the renderer appends an */
/* <img class="mkt-cover-img"> inside the cover slot and adds the */
/* .mkt-cover--image modifier so the gradient + title-text overlay */
/* is suppressed. Image fills edge-to-edge, gradient stays under as */
/* a fallback. */
.mkt-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.frontpage-press-tile__cover.mkt-cover--image {
  position: relative;
  overflow: hidden;
}
.frontpage-press-tile__cover.mkt-cover--image .top,
.frontpage-press-tile__cover.mkt-cover--image .bot,
.frontpage-press-tile__cover.mkt-cover--image .ttl {
  display: none;
}

/* ── "Read a few pages" preview modal ───────────────────────────── */
/* Image-gallery lightbox over the marketplace detail page. The image
   itself is the rasterised first-N pages of the interior PDF, served
   from OVH at canonical preview-NN.png paths. Plain navigation —
   prev / counter / next — keeps the focus on the typesetting, which
   is the whole point of the feature. */
.mkt-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: mkt-preview-fade 180ms ease;
}
@keyframes mkt-preview-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.mkt-preview-dialog {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  padding: 16px 16px 14px;
  max-width: min(720px, 96vw);
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mkt-preview-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.mkt-preview-close:hover { background: var(--bg-elevated); color: var(--text-primary); }
.mkt-preview-header {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  padding: 2px 36px 0;
}
.mkt-preview-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: 0;
}
.mkt-preview-img {
  max-width: 100%;
  max-height: 78vh;
  display: block;
  object-fit: contain;
  background: #fff;
}
/* Shown when the rasterised preview PNG hasn't been uploaded for this
 * volume yet. Lives in the same stage box the image would have used,
 * theme-coloured ink on the dialog surface. */
.mkt-preview-pending {
  padding: 5rem 2rem;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  min-height: 18rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mkt-preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px;
}
.mkt-preview-nav__btn {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  cursor: pointer;
}
.mkt-preview-nav__btn:disabled { opacity: 0.35; cursor: default; }
.mkt-preview-nav__btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.mkt-preview-counter {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ── Collection landing page ─────────────────────────────────────── */
.mkt-bundle-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 12px;
  text-align: center;
  margin-bottom: 12px;
}
.mkt-bundle-card__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.mkt-bundle-card__count {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.mkt-bundle-card__discount {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
}

.mkt-collection-grid {
  padding: 40px 0;
}
.mkt-collection-grid__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding: 0 20px;
}
.mkt-collection-grid__title {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
.mkt-collection-grid__title em {
  font-style: italic;
}
/* One-shot accent pulse when "Browse individual books" jumps here, so the
   click always confirms its destination. */
.mkt-collection-grid__title--flash {
  animation: mkt-volumes-flash 1.1s ease;
}
@keyframes mkt-volumes-flash {
  0%   { color: var(--accent); }
  100% { color: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  .mkt-collection-grid__title--flash { animation: none; }
}
.mkt-collection-grid__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, 190px);
  justify-content: center;
  gap: 28px 24px;
  padding: 0 20px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .mkt-collection-grid__items {
    grid-template-columns: repeat(auto-fill, 150px);
    gap: 18px 14px;
  }
}

/* ─── Free-to-read chip + CTA on Books of Arcana shelf cards ─── */
.mkt-shelf-card__free-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--accent, #c9a84c);
  color: var(--bg-primary, #1a1a22);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  z-index: 2;
  pointer-events: none;
}
.mkt-shelf-card__free-cta {
  color: var(--accent);
  font-weight: 600;
}
.mkt-shelf-card--free:hover .mkt-shelf-card__free-cta {
  text-decoration: underline;
}