/* ORIGIN SEOUL 2026 mini-site — the one dark room in the white gallery.
   Loads after site.css; only re-points the tokens and adds its sections. */

body.exhibition {
  --bg: var(--dark-bg);
  --ink: var(--dark-ink);
  --muted: var(--dark-muted);
  --hair: #2a2a2a;
  /* The title is one line at every width (see .exh-hero h1), so on a phone it
     is the column that decides how big it can be. Every heading under it is
     sized off this, or the wall label would end up smaller than the labels. */
  --title: min(35px, calc((100vw - 2 * var(--pad)) / 19.5));
  --sub: clamp(15px, calc(var(--title) * 0.88), 20px);
  background: var(--bg);
  color: var(--ink);
}

/* Same trio as site.css's captions, for this file's own components. */
.exh-dates,
.collect .fine {
  font-family: var(--serif);
  font-style: italic;
  color: var(--muted);
}

.exhibition main { max-width: 720px; margin: 0 auto; padding: 0 var(--pad) 8px; }

/* ── hero — an exhibition wall label ─────────── */

.exh-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--hair); }
/* One line, always. The column is exactly `100vw - 2 × --pad` until it stops
   at 720px, and this string measures ~18em at this tracking, so a twentieth of
   that column keeps it on one line at every width (measured, with room to
   spare for a wider fallback font — which would simply wrap rather than
   overflow). */
.exh-hero h1 {
  font-size: var(--title);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
}
.exh-fact { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--hair); }
.exh-dates { font-size: 16px; }
.exh-url { margin-top: 8px; font-size: 13px; letter-spacing: 0.08em; }
.exh-url a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  transition: color 0.15s;
}
.exh-url a:hover { color: var(--ink); }

/* ── sections ────────────────────────────────── */

.exh-section { padding: 44px 0 10px; }
/* section headings are .kicker in the accent — see the markup */
.exh-section > h2 { font-size: 12px; font-weight: 600; color: var(--accent); }
.bio { margin-top: 18px; max-width: var(--measure); }
.bio h3 { font-size: var(--sub); font-weight: 600; letter-spacing: 0.08em; }
.bio h3 + p { margin-top: 12px; }
.bio p + p { margin-top: 14px; }
/* the artist's own site, set like the exhibition's URL above it */
.bio .exh-url { margin-top: 18px; }

/* ── works ───────────────────────────────────── */

.exh-work { margin-top: 26px; padding-top: 28px; border-top: 1px solid var(--hair); }
/* no caption under the plate — the title and year follow immediately below */
.exh-work h3 { margin-top: 18px; font-size: var(--sub); font-weight: 600; }
.exh-work h3 em {
  margin-left: 8px;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
}
.exh-work .desc { margin-top: 12px; max-width: var(--measure); }

/* ── collect ─────────────────────────────────── */

.collect p { max-width: var(--measure); margin-top: 18px; }
.btn-btc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 14px 26px;
  background: var(--accent);
  color: var(--bg);
  font-size: 15px;
  font-weight: 600;
  transition: opacity 0.15s;
}
.btn-btc:hover { opacity: 0.85; }
.collect .fine {
  margin-top: 16px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}

/* ── footer ──────────────────────────────────── */

/* the shared .site-footer, narrowed to the mini-site's column and ruled off */
.exh-footer {
  max-width: 720px;
  margin-top: 40px;
  padding: 26px var(--pad) 44px;
  border-top: 1px solid var(--hair);
}