/* ===================================================================
   Lumen — quiet luxury. A near-white gallery canvas, champagne-gold
   accent, an elegant Cormorant display over a thin geometric sans.
   Lots of air; built for the banner hero + lookbook. Sector-neutral.
   =================================================================== */

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --color-bg:      #faf8f5;
  --color-surface: #ffffff;
  --color-text:    #211f1c;
  --color-text-2:  #6a655d;
  --color-text-3:  #756d60; /* >=4.5:1 on --color-bg (WCAG AA) */
  --color-border:  #e8e3da;
  --color-border-lt: #f0ece4;
  --color-primary:   #a8843f;
  --color-primary-h: #8f6d2f;
  --color-primary-l: #f4eddd;
  --color-muted-bg:  #f1ede6;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
}

body { font-family: 'Jost', sans-serif; font-weight: 300; background: var(--color-bg); }

/* Airy, understated type */
.sf-hero__title,
.sf-look__name,
.sf-detail__title { font-weight: 500; letter-spacing: .005em; }
.sf-hero__eyebrow,
.sf-look__category { letter-spacing: .28em; font-weight: 400; color: var(--color-primary); }

/* Thin outline buttons over the gold */
.btn--primary { background: var(--color-primary); box-shadow: none; }
.btn--secondary { border-color: var(--color-text); }

/* Generous lookbook breathing room + soft image reveal */
.sf-lookbook { gap: 2.5rem 2rem; }
.sf-look__caption { padding-top: 1.1rem; align-items: center; text-align: center; }
.sf-hero--banner .sf-hero__scrim { background: linear-gradient(180deg, rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, .55) 100%); }