/* Phase 1 elevation — Component Library (per BAROQUE_TRAVEL_COMPONENT_LIBRARY.md)
 *
 * Cream-surface component set used on elevated editorial pages (property
 * detail, journeys, magazine elevation, member dashboard refresh).
 *
 * All classes carry the .bt- prefix to avoid collision with the legacy dark
 * components in components.css / forms.css (.btn-primary, .input, .card,
 * .checkbox, .alert), which remain in use across pre-elevation surfaces.
 *
 * Tokens come from base.css (Phase A). Raw values appear only where the spec
 * is explicit about pixel-perfect detail (icon sizes, dasharray, etc.).
 */

/* ────────────────────────────────────────────────────────────────────────
 * Buttons (Component Library §2)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-base);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-sm) var(--space-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  min-height: 48px;
  white-space: nowrap;
}

.bt-btn:disabled,
.bt-btn[aria-disabled='true'] {
  background: var(--mist);
  color: rgba(250, 248, 245, 0.7);
  border-color: var(--mist);
  cursor: not-allowed;
  transform: none;
}

.bt-btn--primary {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.bt-btn--primary:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  transform: translateY(-1px);
}

.bt-btn--primary:active {
  transform: translateY(0);
}

.bt-btn--secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

.bt-btn--secondary:hover {
  background: var(--navy);
  color: var(--cream);
}

.bt-btn--tertiary {
  background: transparent;
  color: var(--navy);
  border: none;
  padding: var(--space-sm) var(--space-md);
  position: relative;
  min-height: 40px;
}

.bt-btn--tertiary::after {
  content: '';
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: 8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out);
}

.bt-btn--tertiary:hover {
  color: var(--gold-deep);
}

.bt-btn--tertiary:hover::after {
  transform: scaleX(1);
}

.bt-btn--accent {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
}

.bt-btn--accent:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  transform: translateY(-1px);
}

.bt-btn--destructive {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-error);
}

.bt-btn--destructive:hover {
  background: var(--color-error);
  color: var(--cream);
}

/* Button sizes */
.bt-btn--sm {
  font-size: var(--size-sm);
  padding: var(--space-xs) var(--space-md);
  min-height: 36px;
}

.bt-btn--lg {
  font-size: var(--size-md);
  padding: var(--space-md) var(--space-2xl);
  min-height: 56px;
}

.bt-btn--xl {
  font-size: var(--size-lg);
  padding: var(--space-lg) var(--space-3xl);
  min-height: 64px;
}

.bt-btn--block {
  display: flex;
  width: 100%;
}

.bt-btn__icon {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
  flex-shrink: 0;
}

/* Loading state — content becomes transparent, spinner overlays */
.bt-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.bt-btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(250, 248, 245, 0.3);
  border-top-color: var(--cream);
  border-radius: var(--radius-full);
  animation: bt-spin 600ms linear infinite;
}

.bt-btn--secondary.bt-btn--loading::after,
.bt-btn--tertiary.bt-btn--loading::after,
.bt-btn--destructive.bt-btn--loading::after {
  border-color: rgba(26, 43, 74, 0.2);
  border-top-color: var(--navy);
}

@keyframes bt-spin {
  to { transform: rotate(360deg); }
}

/* ────────────────────────────────────────────────────────────────────────
 * Form inputs (Component Library §3)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.bt-form-label {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--navy);
}

.bt-form-label--required::after {
  content: ' *';
  color: var(--gold-deep);
}

.bt-form-hint {
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  color: var(--text-on-cream-secondary);
}

.bt-form-error {
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  color: var(--color-error);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 1.2em;
}

.bt-input {
  width: 100%;
  background: var(--surface-elevated);
  color: var(--text-on-cream-primary);
  font-family: var(--font-ui-sans);
  font-size: var(--size-base);
  line-height: var(--leading-relaxed);
  padding: var(--space-md);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  transition: var(--transition-base);
  min-height: 56px;
  outline: none;
}

.bt-input::placeholder {
  color: var(--text-on-cream-tertiary);
}

.bt-input:hover {
  border-color: var(--border-strong-cream);
}

.bt-input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 160, 82, 0.18);
}

.bt-input:disabled {
  background: var(--stone-light);
  color: var(--text-on-cream-tertiary);
  cursor: not-allowed;
}

.bt-input--error {
  border-color: var(--color-error);
}

.bt-input--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(139, 45, 45, 0.18);
}

.bt-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

.bt-select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-3xl);
  cursor: pointer;
}

/* Checkbox */
.bt-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-ui-sans);
  font-size: var(--size-base);
  color: var(--text-on-cream-primary);
  user-select: none;
}

.bt-checkbox input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong-cream);
  border-radius: var(--radius-sm);
  background: var(--surface-elevated);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

.bt-checkbox input[type='checkbox']:hover {
  border-color: var(--gold);
}

.bt-checkbox input[type='checkbox']:checked {
  background: var(--navy);
  border-color: var(--navy);
}

.bt-checkbox input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
}

/* Radio */
.bt-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-ui-sans);
  font-size: var(--size-base);
  color: var(--text-on-cream-primary);
  user-select: none;
}

.bt-radio input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--border-strong-cream);
  border-radius: var(--radius-full);
  background: var(--surface-elevated);
  transition: var(--transition-base);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
}

.bt-radio input[type='radio']:hover {
  border-color: var(--gold);
}

.bt-radio input[type='radio']:checked {
  border-color: var(--navy);
  background: var(--surface-elevated);
}

.bt-radio input[type='radio']:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--navy);
  border-radius: var(--radius-full);
}

/* Toggle switch */
.bt-toggle {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.bt-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.bt-toggle__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--mist);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}

.bt-toggle__slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 2px;
  bottom: 2px;
  background: var(--cream);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
  box-shadow: var(--shadow-soft);
}

.bt-toggle input:checked + .bt-toggle__slider {
  background: var(--navy);
}

.bt-toggle input:checked + .bt-toggle__slider::before {
  transform: translateX(22px);
}

/* Upload zone */
.bt-upload-zone {
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  text-align: center;
  background: var(--surface-secondary);
  transition: var(--transition-base);
  cursor: pointer;
}

.bt-upload-zone:hover,
.bt-upload-zone--dragging {
  border-color: var(--gold);
  background: rgba(196, 160, 82, 0.05);
}

.bt-upload-zone__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-sm);
  color: var(--navy);
}

.bt-upload-zone__text {
  font-family: var(--font-ui-sans);
  font-size: var(--size-md);
  color: var(--navy);
  margin-bottom: var(--space-xs);
}

.bt-upload-zone__hint {
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  color: var(--text-on-cream-secondary);
}

/* ────────────────────────────────────────────────────────────────────────
 * Cards (Component Library §4)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-card {
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.bt-card--padded {
  padding: var(--space-xl);
}

/* Property card — used in /hotels listing post-elevation and on detail page
 * "related properties" sections. Replaces the dark .card pattern. */
.bt-property-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-base);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.bt-property-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover-lift);
}

.bt-property-card:hover .bt-property-card__image {
  transform: scale(1.02);
  filter: brightness(1.04);
}

.bt-property-card__image-wrapper {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  position: relative;
  background: var(--stone-light);
}

.bt-property-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out),
              filter var(--duration-slower) var(--ease-out);
}

.bt-property-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bt-property-card__eyebrow {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.bt-property-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: italic;
  font-size: var(--size-lg);
  line-height: var(--leading-snug);
  color: var(--navy);
  margin: 0;
}

.bt-property-card__descriptor {
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  color: var(--text-on-cream-secondary);
  margin: 0;
}

.bt-property-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.bt-property-card__perks-indicator {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--gold-deep);
  margin-top: var(--space-xs);
}

.bt-property-card__perks-indicator::before {
  content: '✦ ';
}

/* Experience card — 16:9 hero, with duration / capacity badges */
.bt-experience-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-base);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.bt-experience-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover-lift);
}

.bt-experience-card__image-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--stone-light);
}

.bt-experience-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease-out);
}

.bt-experience-card:hover .bt-experience-card__image {
  transform: scale(1.02);
}

.bt-experience-card__content {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.bt-experience-card__meta {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-ui-sans);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-cream-secondary);
  margin-bottom: var(--space-xs);
}

/* Stat card — dashboard metrics */
.bt-stat-card {
  padding: var(--space-lg);
  background: var(--surface-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.bt-stat-card__label {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--text-on-cream-secondary);
  margin-bottom: var(--space-xs);
}

.bt-stat-card__value {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--size-2xl);
  line-height: var(--leading-tight);
  color: var(--navy);
  margin-bottom: var(--space-xxs);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.bt-stat-card__change {
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  color: var(--text-on-cream-secondary);
}

.bt-stat-card__change--positive { color: var(--color-success); }
.bt-stat-card__change--negative { color: var(--color-error); }

/* ────────────────────────────────────────────────────────────────────────
 * Tags, chips, badges (Component Library §5)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xxs) var(--space-sm);
  background: var(--surface-secondary);
  color: var(--navy);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  text-decoration: none;
}

.bt-tag--member-only {
  background: rgba(196, 160, 82, 0.08);
  border-color: rgba(196, 160, 82, 0.4);
  color: var(--gold-deep);
}

/* Chip — clickable selectable tag for filter UI */
.bt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-secondary);
  color: var(--navy);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
  white-space: nowrap;
}

.bt-chip:hover {
  border-color: var(--navy);
}

.bt-chip--selected {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.bt-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  opacity: 0.7;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}

.bt-chip__remove:hover {
  opacity: 1;
}

.bt-chip__remove svg,
.bt-chip__remove::before {
  width: 10px;
  height: 10px;
}

.bt-chip__remove::before {
  content: '×';
  font-size: 16px;
  line-height: 1;
}

/* Badge — recognition (top performer, member favorite, etc.) */
.bt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs) var(--space-xs);
  background: var(--gold);
  color: var(--navy);
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.bt-badge__icon {
  width: 12px;
  height: 12px;
}

.bt-badge--editorial {
  background: var(--navy);
  color: var(--cream);
}

.bt-badge--new {
  background: var(--cream);
  color: var(--navy);
  border: 1px solid var(--navy);
}

/* ────────────────────────────────────────────────────────────────────────
 * Status indicators (Component Library §8)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  color: var(--text-on-cream-primary);
}

.bt-status__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.bt-status--active .bt-status__dot { background: var(--color-success); }
.bt-status--pending .bt-status__dot { background: var(--color-warning); }
.bt-status--inactive .bt-status__dot { background: var(--mist); }
.bt-status--error .bt-status__dot { background: var(--color-error); }

/* Progress bar */
.bt-progress {
  width: 100%;
  height: 4px;
  background: var(--stone);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bt-progress__bar {
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-full);
  transition: width var(--duration-slower) var(--ease-out);
}

.bt-progress--completion .bt-progress__bar {
  background: linear-gradient(to right, var(--gold), var(--gold-deep));
}

/* ────────────────────────────────────────────────────────────────────────
 * Inline alerts (Component Library §9)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-alert {
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border-left: 3px solid;
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  line-height: var(--leading-relaxed);
  background: var(--surface-elevated);
}

.bt-alert--info {
  background: rgba(74, 95, 122, 0.05);
  border-left-color: var(--color-info);
  color: var(--navy);
}

.bt-alert--success {
  background: rgba(74, 107, 63, 0.05);
  border-left-color: var(--color-success);
  color: var(--color-success);
}

.bt-alert--warning {
  background: rgba(176, 141, 63, 0.05);
  border-left-color: var(--color-warning);
  color: var(--color-warning);
}

.bt-alert--error {
  background: rgba(139, 45, 45, 0.05);
  border-left-color: var(--color-error);
  color: var(--color-error);
}

/* Toast — positioned via JS, brand-aligned defaults */
.bt-toast {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-toast);
  padding: var(--space-md) var(--space-lg);
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 400px;
  font-family: var(--font-ui-sans);
  font-size: var(--size-sm);
  line-height: var(--leading-relaxed);
  animation: bt-toast-in var(--duration-base) var(--ease-out) both;
}

.bt-toast--success { background: var(--color-success); }
.bt-toast--error   { background: var(--color-error); }
.bt-toast--warning { background: var(--color-warning); color: var(--navy); }

.bt-toast__close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-xs);
  font-size: 20px;
  line-height: 1;
}

.bt-toast__close:hover {
  opacity: 1;
}

@keyframes bt-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ────────────────────────────────────────────────────────────────────────
 * Empty state (Component Library §11)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-empty {
  padding: var(--space-4xl) var(--space-lg);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.bt-empty__icon {
  width: 64px;
  height: 64px;
  color: var(--mist);
  margin: 0 auto var(--space-lg);
}

.bt-empty__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: italic;
  font-size: var(--size-xl);
  line-height: var(--leading-snug);
  color: var(--navy);
  margin: 0 0 var(--space-sm);
}

.bt-empty__description {
  font-family: var(--font-ui-sans);
  font-size: var(--size-md);
  line-height: var(--leading-relaxed);
  color: var(--text-on-cream-secondary);
  margin: 0 0 var(--space-lg);
}

/* ────────────────────────────────────────────────────────────────────────
 * Editorial typography utilities for elevated pages
 * (Companion to .t-* hierarchy in typography.css — these are the
 * cream-surface analogues called for by Site UI Elevation §2.)
 * ──────────────────────────────────────────────────────────────────────── */

.bt-display {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: italic;
  font-size: clamp(var(--size-3xl), 8vw, var(--size-5xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--navy);
  margin: 0;
}

.bt-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(var(--size-2xl), 5vw, var(--size-4xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--navy);
  margin: 0;
}

.bt-subheadline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(var(--size-lg), 3vw, var(--size-2xl));
  line-height: var(--leading-snug);
  color: var(--text-on-cream-secondary);
  margin: 0;
}

.bt-eyebrow {
  font-family: var(--font-ui-sans);
  font-weight: var(--weight-medium);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

.bt-body-large {
  font-family: var(--font-ui-sans);
  font-size: var(--size-md);
  line-height: var(--leading-loose);
  color: var(--text-on-cream-primary);
  max-width: var(--max-content-narrow);
}

.bt-body {
  font-family: var(--font-ui-sans);
  font-size: var(--size-base);
  line-height: var(--leading-loose);
  color: var(--text-on-cream-primary);
}

.bt-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--size-md);
  line-height: var(--leading-snug);
  color: var(--text-on-cream-secondary);
}

.bt-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(var(--size-lg), 3vw, var(--size-xl));
  line-height: var(--leading-snug);
  color: var(--navy);
  text-align: center;
  max-width: 36ch;
  margin: var(--space-3xl) auto;
  padding: var(--space-xl) 0;
  position: relative;
}

.bt-pullquote::before,
.bt-pullquote::after {
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 0 auto;
  opacity: 0.7;
}

.bt-pullquote::before { margin-bottom: var(--space-xl); }
.bt-pullquote::after  { margin-top: var(--space-xl); }

/* ────────────────────────────────────────────────────────────────────────
 * Layout containers for editorial / exhibition pages
 * ──────────────────────────────────────────────────────────────────────── */

.bt-section {
  padding: var(--space-4xl) var(--space-lg);
}

.bt-section--major {
  padding: var(--space-5xl) var(--space-lg);
}

.bt-container {
  max-width: var(--max-content);
  margin: 0 auto;
}

.bt-container--narrow {
  max-width: var(--max-content-narrow);
  margin: 0 auto;
}

.bt-container--wide {
  max-width: var(--max-content-wide);
  margin: 0 auto;
}

/* Hover lift utility — reusable subtle 2px lift with shadow */
.bt-hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.bt-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover-lift);
}