/* ==========================================================================
   BBW — Banana Bottle Wall, 2026
   --------------------------------------------------------------------------
   PAGE BACKGROUND
   --bg is the warm off-white that must match the artwork image background so
   the edges of the image disappear into the page.
   If your image reads slightly warmer or cooler, change this ONE value.
   (script.js also tries to auto-sample the image's corner pixel when the site
   is served over http://, and will fine-tune this automatically.)
   ========================================================================== */

:root {
  --bg:   #F2EFE8;   /* warm off-white — match to artwork */
  --ink:  #000000;
  --soft: #6B6862;
  --rule: rgba(0, 0, 0, 0.14);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
}

body {
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page {
  max-width: 780px;
  margin: 0 auto;
  padding: 32px 28px 36px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   HERO ARTWORK — deliberately no border, no shadow, no background, no radius
   -------------------------------------------------------------------------- */
.artwork {
  display: block;
  margin: 0 auto 20px;
  /* ~430px on a standard desktop; shrinks on short viewports so the
     auction value always stays above the fold. Aspect ratio preserved. */
  height: clamp(300px, 44vh, 430px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  border: 0;
  opacity: 0;
  transition: opacity 900ms ease;
}

.artwork.loaded { opacity: 1; }

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
.title {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(46px, 8vw, 58px);
  letter-spacing: 0.10em;
  line-height: 1;
  margin: 0 0 10px;
}

.subtitle {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.6vw, 23px);
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.medium {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--soft);
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 420px;
  margin: 26px auto;
}

.label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--soft);
  margin: 0 0 14px;
}

.value {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(52px, 11vw, 68px);
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
  transition: opacity 260ms ease, transform 260ms ease;
}

/* subtle animation applied by script.js when the number changes */
.value.updating {
  opacity: 0.35;
  transform: translateY(-6px);
}

.caption {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--soft);
  margin: 0 0 24px;
}

/* --------------------------------------------------------------------------
   BUTTON
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  padding: 17px 52px;
  min-width: 300px;
  transition: opacity 200ms ease;
}

.button:hover { opacity: 0.78; }

.arrow { margin-left: 6px; }

/* --------------------------------------------------------------------------
   STATUS
   -------------------------------------------------------------------------- */
.status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9A9791;              /* gray — connecting */
}

.status.live .dot {
  background: #17A34A;              /* green — live */
  animation: pulse 1.9s ease-out infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(23, 163, 74, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(23, 163, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 163, 74, 0); }
}

.status-text {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--soft);
}

.status.live .status-text { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .status.live .dot { animation: none; }
  .artwork, .value { transition: none; }
}

/* --------------------------------------------------------------------------
   SHORT DESKTOP VIEWPORTS (small laptops) — tighten just enough that the
   status line clears the fold too. Type sizes are untouched.
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-height: 820px) {
  .page    { padding-bottom: 20px; }
  .artwork { height: clamp(300px, 42vh, 430px); }
  .rule    { margin: 18px auto; }
  .caption { margin-bottom: 18px; }
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .page { padding: 40px 20px 80px; }

  .artwork {
    height: auto;
    width: 100%;
    max-width: 100%;
    margin-bottom: 44px;
  }

  .rule { margin: 42px auto; }

  /* mobile keeps its original, airier rhythm */
  .title    { margin-bottom: 20px; }
  .subtitle { margin-bottom: 12px; }
  .label    { margin-bottom: 26px; }
  .value    { margin-bottom: 26px; }
  .caption  { margin-bottom: 48px; }

  .button {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 20px 16px;
  }
}