/* Shared design tokens for both gallery proposals.
   Layered ON TOP of the original styles.css. Original stays untouched. */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

:root {
  --wall: #ece8e0;
  --wall-warm: #efeae1;
  --wall-cool: #e6e2db;
  --ink: #14130f;
  --ink-soft: rgba(20, 19, 15, 0.62);
  --ink-faint: rgba(20, 19, 15, 0.34);
  --ink-rule: rgba(20, 19, 15, 0.14);
  --brass: #8a7148;
  --brass-deep: #5b4a30;
  --brass-light: #c9b27a;
  --crimson: #7a1f12;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, sans-serif;
}

html, body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
}

/* Gallery wall texture: faint paper grain plus directional light from above */
.wall {
  position: relative;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(255, 255, 255, 0.78), transparent 56%),
    radial-gradient(60% 80% at 50% 110%, rgba(20, 19, 15, 0.06), transparent 60%),
    linear-gradient(180deg, var(--wall-warm) 0%, var(--wall) 60%, var(--wall-cool) 100%);
}

.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 22% 12%, rgba(0,0,0,0.025) 0, rgba(0,0,0,0.025) 1px, transparent 1px, transparent 4px),
    repeating-radial-gradient(circle at 78% 88%, rgba(0,0,0,0.018) 0, rgba(0,0,0,0.018) 1px, transparent 1px, transparent 5px);
}

/* Floor: polished concrete with vanishing-point lines */
.floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38vh;
  background:
    linear-gradient(180deg, transparent 0%, rgba(20, 19, 15, 0.04) 22%, rgba(20, 19, 15, 0.14) 100%);
  pointer-events: none;
}

.floor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(20,19,15,0.07) 1px, transparent 1px),
    linear-gradient(180deg, rgba(20,19,15,0.05) 1px, transparent 1px);
  background-size: 6vw 4vh;
  transform: perspective(440px) rotateX(58deg);
  transform-origin: top center;
  opacity: 0.5;
}

/* Booth header: tight band like a Basel booth sign */
.booth-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(20px, 4vw, 48px);
  background: rgba(236, 232, 224, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-rule);
  font-family: var(--sans);
}

.booth-id {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.booth-id b {
  color: var(--ink);
  font-weight: 700;
}

.booth-meta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2vw, 26px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.booth-meta .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--crimson);
  box-shadow: 0 0 0 3px rgba(122, 31, 18, 0.16);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

/* Brass plate. Used for placards and the mint button. */
.brass {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 1px;
  background:
    linear-gradient(180deg, #d8be86 0%, #b59765 38%, #8a6f43 100%);
  color: #1a140a;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(60, 44, 20, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.7),
    inset 0 -1px 0 rgba(60, 44, 20, 0.55),
    0 14px 28px rgba(60, 44, 20, 0.22),
    0 2px 4px rgba(60, 44, 20, 0.18);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms;
}

.brass:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.78),
    inset 0 -1px 0 rgba(60, 44, 20, 0.55),
    0 18px 36px rgba(60, 44, 20, 0.28),
    0 2px 4px rgba(60, 44, 20, 0.18);
}

.brass small {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

.brass.lg {
  padding: 22px 32px;
  font-size: 13px;
  letter-spacing: 0.26em;
}

.brass-screwdot {
  position: absolute;
  top: 6px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6b5530, #2d2110);
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.5);
}
.brass-screwdot.l { left: 6px; }
.brass-screwdot.r { right: 6px; }

/* Wall placard: museum-style label card */
.placard {
  background: #fbfaf5;
  border: 1px solid var(--ink-rule);
  padding: 16px 20px;
  font-family: var(--sans);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9),
    0 12px 26px rgba(20, 19, 15, 0.08);
}

.placard .row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 0;
  border-top: 1px solid var(--ink-rule);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.placard .row:first-of-type {
  border-top: 0;
}

.placard .row span:first-child {
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
}

.placard .row span:last-child {
  color: var(--ink);
  font-weight: 600;
}

.placard h4 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
}

.placard .by {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* Editorial italic display */
.editorial {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.92;
  color: var(--ink);
}

.editorial em {
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 0.12em;
}

/* Tiny caps label */
.caps {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Hairline rule */
.hr {
  display: block;
  height: 1px;
  background: var(--ink-rule);
  border: 0;
  margin: 0;
}

/* Spotlight: simulates track lighting on a hung work */
.spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(40% 60% at 50% 6%, rgba(255, 240, 210, 0.32), transparent 60%);
  mix-blend-mode: soft-light;
}

/* Vitality pipe: drives the grayscale stake mechanic */
.with-vitality .picture {
  filter: saturate(var(--vitality, 1)) brightness(calc(0.85 + var(--vitality, 1) * 0.15));
  transition: filter 220ms ease;
}

/* Edition counter: rolling digits feel */
.counter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(72px, 10vw, 156px);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.counter-frac {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 600;
  font-size: 0.16em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  vertical-align: top;
  margin-left: 12px;
}

/* Hide-but-mount pattern: keep DOM contracts the engine needs without showing */
.engine-stub {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

@media (max-width: 720px) {
  .booth-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
  }
  .booth-meta {
    width: 100%;
    justify-content: space-between;
    font-size: 9px;
  }
  .brass {
    padding: 11px 16px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
}