/* ══════════════════════════════════════════════════
   WINE SUPPLY — TYPOGRAPHY SYSTEM
   Cormorant Garamond (editorial serif) + Inter (modern sans)
   ══════════════════════════════════════════════════ */

:root {
  --font-serif:    'Cormorant Garamond', 'Georgia', serif;
  --font-display:  'Cormorant', 'Cormorant Garamond', serif;
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── Type scale (fluid) ── */
  --ts-2xs:  0.625rem;    /*  10px */
  --ts-xs:   0.6875rem;   /*  11px */
  --ts-sm:   0.75rem;     /*  12px */
  --ts-base: 0.875rem;    /*  14px */
  --ts-md:   1rem;        /*  16px */
  --ts-lg:   1.0625rem;   /*  17px */
  --ts-xl:   1.1875rem;   /*  19px */
  --ts-2xl:  1.4375rem;   /*  23px */
  --ts-3xl:  1.875rem;    /*  30px */
  --ts-4xl:  clamp(2rem, 5vw, 3rem);
  --ts-5xl:  clamp(2.75rem, 7vw, 4.5rem);
  --ts-hero: clamp(3.5rem, 12vw, 8rem);

  /* ── Leading ── */
  --lh-tight:  1.15;
  --lh-snug:   1.28;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* ── Tracking ── */
  --ls-tight:   -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.12em;
  --ls-widest:   0.22em;
  --ls-ultra:    0.32em;
}

/* ── Global reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-size: var(--ts-base);
  line-height: var(--lh-normal);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  transition: background 0.35s ease, color 0.35s ease;
}

/* ── Type utilities ── */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--ts-hero);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
}

.t-chapter {
  font-family: var(--font-serif);
  font-size: var(--ts-5xl);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.t-producer {
  font-family: var(--font-serif);
  font-size: var(--ts-4xl);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.t-line {
  font-family: var(--font-sans);
  font-size: var(--ts-2xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
}

.t-wine {
  font-family: var(--font-serif);
  font-size: var(--ts-lg);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

.t-price {
  font-family: var(--font-serif);
  font-size: var(--ts-xl);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.t-meta {
  font-family: var(--font-sans);
  font-size: var(--ts-xs);
  font-weight: 400;
  line-height: var(--lh-loose);
  letter-spacing: var(--ls-wide);
}

.t-desc {
  font-family: var(--font-sans);
  font-size: var(--ts-sm);
  font-weight: 300;
  line-height: var(--lh-loose);
  letter-spacing: 0.01em;
}

.t-label {
  font-family: var(--font-sans);
  font-size: var(--ts-2xs);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--ts-2xs);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--accent);
}

/* Placeholder text style (editable info missing) */
.placeholder {
  font-style: italic;
  color: var(--text-light);
  opacity: 0.7;
}