/* ════════════════════════════════════════════════════════════════════════════
   BCB TYPOGRAPHY RECOMMENDATIONS — DRAFT (NOT YET APPLIED)
   Generated: 2026-05-16
   File:      typography-recommendations.css
   Purpose:   Drop-in stylesheet that imposes a single, readable type system
              across every page on bourboncigarsblinds.com.

   HOW TO REVIEW BEFORE APPLYING:
     1. Read STEP 1 / 2 / 3 / 4 commentary at the top of this file.
     2. Open the proposed rules in a local browser by linking AFTER the existing
        site stylesheets — equal-specificity rules win by cascade order.
     3. If approved, copy the @import + :root variables into a permanent
        location (e.g., the top of bcb-style-REFRESH.css) and delete this file.
   ════════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────────
   STEP 1 — INVENTORY (summary; full notes inline below each :section: rule)
   ────────────────────────────────────────────────────────────────────────────
   Current stack across the site:
     • Cormorant Garamond  — serif, used for nearly all body text
     • Playfair Display    — serif display, used for H1/H2/H3 and bottle names
     • Montserrat          — sans-serif, used for every label/eyebrow/button
                              ALWAYS with text-transform:uppercase + tracking

   Files audited:
     • index.html                     (inline <style> block — landing + SPA sections)
     • bcb-style-REFRESH.css          (site-wide refresh overrides)
     • bcb-nav.css                    (top nav with the 3 thumbnail cards + sub-links)
     • distillery-REFRESH.css         (empty / minor)
     • distilleries.php (inline)      (directory grid + cards)
     • distillery.php (inline)        (single distillery detail)
     • bourbon-cigar-pairings.html    (pairings SPA with banners)
     • bourbon-calendar/styles.css    (release calendar)
     • cigars/style.css               (cigars directory + lounges shared)
     • footer markup (inline in index.html, lines 687-688, 1306-1309)

   Key colour palette (kept):
     --bg-body  : #1C1208  (warm dark brown — body)
     --gold     : #E8C547  (saturated gold)
     --text     : #F2E8D6  (cream-warm — primary body)
     --cream    : #FBF5E8  (crisp cream — headings)
     --bourbon  : #C8842A  (warm orange-amber accent)
     --cigar-lt : #5A9970  (sage green cigar accent)
   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   STEP 2 — FLAGGED PROBLEMS (against the user's 7 criteria)

   ── A.  Microscopic labels — fails 14 px minimum ───────────────────────────
     index.html:
       .bourbon-stat-label      0.48rem  (≈ 7.7 px)  Montserrat ALL-CAPS
       .bourbon-score-label     0.48rem  (≈ 7.7 px)
       .cigar-stat-lbl          0.45rem  (≈ 7.2 px)
       .rating-label            0.48rem-0.5rem
       .modal-stat-lbl          0.44rem  (≈ 7.0 px)
       .rev-score-lbl           0.44rem
       .rev-badge               0.46rem
       .rss-lbl                 0.44rem
       .pairing-item-type       0.50rem
       .card-cta                0.58rem  (≈ 9.3 px)
       .card-sub                clamp(.52rem…)        body sub-text
       .nav-card__viewing       0.38rem  (≈ 6.1 px)   in bcb-nav.css
       Footer links             0.55rem  (≈ 8.8 px)   index.html 1306-09

     distilleries.php:
       .sponsored-badge         10 px
       .card-img-placeholder    10 px
       .card-state              10 px
       .tag                     10 px
       .quick-find-label        0.55rem (≈ 8.8 px)

     distillery.php:
       .section-label           10 px
       .expr-item label         10 px
       .info-card h3            11 px
       .info-row label / span   11 px / 13 px
       .badge                   10 px
       .hero-eyebrow            11 px

     cigars/style.css:
       Multiple .58rem / .52rem labels, 10 px / 11 px / 12 px chip labels

     bourbon-calendar/styles.css:
       .release-meta            0.7-0.8 rem
       .badge-type              0.68 rem
       .badge-status            ≈ 11 px

     WHY IT MATTERS: anything < 12 px is below WCAG AGM minimum legibility for
     non-pure-decorative text. < 14 px on mobile is unreadable for many users.

   ── B.  All-caps long strings — hard to scan ───────────────────────────────
     - Footer: 4 separate "DIRECTORY · LOUNGE FINDER · PAIRING GUIDE · CALENDAR"
       all caps, .55rem, 0.20em tracking
     - Hero tagline: "THE GENTLEMAN'S DEFINITIVE GUIDE" .46em tracking — fine
       at large size, but the same treatment is repeated on:
         • "Currently Viewing" (.38rem)
         • All card sub-text ("DIRECTORY · RATINGS · PAIRINGS")
         • Every section eyebrow ("THE HUMIDOR", "THE CARD ROOM", etc.)
         • Every stat-label below scores
         • Every tag, badge, chip, button
     - The site reads as a wall of small uppercase. Five-word strings forced
       into all-caps at 8 px takes triple the cognitive load of mixed case.

   ── C.  Long-form body copy in a decorative serif ──────────────────────────
     The default body font is Cormorant Garamond — a beautiful display-grade
     serif but problematic for sustained reading at small sizes:
       • Letter heights are short relative to the cap height (low x-height)
       • At 15 px the serifs become noisy on low-DPI screens
       • Italic variant is used as the default for many notes blocks
         (".bourbon-notes-text", ".cigar-notes", ".pairing-desc", ".rev-text",
          ".modal-notes-text") — italic body text fatigues readers fast
       • The descriptions on /distilleries.php and /cigars/cigars.html are
         multi-line paragraphs in this italic serif

   ── D.  Inconsistent sizing on the SAME semantic element ───────────────────
     "Stat label" (small uppercase label below a number) appears as:
       0.44rem  in modal & review stats
       0.45rem  in cigar-stat-lbl
       0.48rem  in bourbon-stat-label / rating-label
       0.5rem   in pairing-item-type
       0.55rem  in cigar-brand
       0.6rem   in mode-icon-img caption
       10 px    in distilleries.php .card-state
       11 px    in distillery.php .info-card h3
       12 px    in distillery.php .section-label
     Same purpose, eight different sizes — looks haphazard rather than
     intentional, and forces eye recalibration between pages.

     "Card name / title" appears as:
       1.35 rem .bourbon-name
       1.3 rem  .cigar-name (two definitions in index.html, both 1.3rem)
       1.2 rem  cigars/style.css h3
       1.05 rem .pairing-item-name
       18 px    .card-name in distilleries.php
       18 px    .expression-name in distillery.php

   ── E.  Tight line-height on long paragraphs ───────────────────────────────
     bourbon-cigar-pairings.html sub-headlines: line-height 1.6 (≥ 1.4 — OK)
     But: many one-line meta strings inherit body's 1.6 even though they
     should be tighter at 1; and many bodies still use Cormorant italic with
     no explicit line-height (defaults to UA — usually ~ 1.2).

   ── F.  Light weight at small size ─────────────────────────────────────────
     distilleries.php .hero-sub      font-weight:300; font-size:15px;
       — 300 weight at 15 px on a dark background pushes contrast below AA.

   ── G.  Contrast cases below WCAG AA ───────────────────────────────────────
     index.html (audited via the colour values in inline style):
       .card-sub          rgba(245,239,224,.65) on dark image — ≈ 4.0 : 1
                          (only meets AA after the REFRESH bump to .88)
       .card-cta          rgba(245,239,224,.40) at rest        — < 3 : 1
       .bourbon-notes-text rgba(245,239,224,.55)              — ≈ 3.7 : 1
       .pairing-desc      rgba(245,239,224,.55)               — ≈ 3.7 : 1
       .rev-text          rgba(245,239,224,.58)               — ≈ 3.9 : 1
       .modal-notes-text  rgba(245,239,224,.65)               — ≈ 4.3 : 1
       .nav-btn (resting) rgba(245,239,224,.50)               — < 3 : 1
                          (REFRESH bumped to .75 — now ~ 5.0)
       The REFRESH file fixed several but many inline copies remain stale.

     distilleries.php:
       .card-desc on rgba(255,255,255,0.03) card-bg — text @ 0.82α — ≈ 4.6 : 1 OK
       .card-meta @ var(--smoke) (#a08860 over warm brown) — borderline 3.9 : 1
       .card-state @ var(--amber) (#C8841A on warm brown)  — ≈ 4.2 : 1 borderline

   ──────────────────────────────────────────────────────────────────────────── */


/* ────────────────────────────────────────────────────────────────────────────
   STEP 3 — TWO PROPOSED FONT PAIRINGS (pick one or A/B test)

   ── PAIRING A  — Refined Modern  (RECOMMENDED) ─────────────────────────────
     Display / headings  :  Fraunces  (Google Fonts)
       - Warm contemporary serif with optical-size axis, looks editorial at
         large size, holds up at mid-size for sub-headings. Has SOFT, weight
         options 300-900 plus italic. Slightly more character than Playfair.
     Body / long-form    :  Inter  (Google Fonts)
       - Reigning gold standard for readable web body type. Tall x-height,
         neutral shapes, optimized for screens. Pairs cleanly with any serif.
     UI / labels / buttons:  Inter (same — saves a font load)

     @import URL (production-ready):
       https://fonts.googleapis.com/css2?
         family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900
         &family=Inter:wght@400;500;600;700&display=swap

     Weights to import:
       Fraunces: 400 600 700 900   (300 too thin on dark bg)
       Inter:    400 500 600 700

   ── PAIRING B  — Classic Editorial  (keeps current display) ────────────────
     Display / headings  :  Playfair Display  (keep — already in use)
     Body / long-form    :  Source Sans 3  (replaces Cormorant for paragraphs)
       - Tall x-height, hand-tuned for UI text, more inviting than Inter for
         long marketing copy
     UI / labels / buttons :  Source Sans 3 (same family)

     @import URL:
       https://fonts.googleapis.com/css2?
         family=Playfair+Display:wght@400;600;700;900
         &family=Source+Sans+3:wght@400;500;600;700&display=swap

     Weights to import:
       Playfair Display: 400 600 700 900
       Source Sans 3:    400 500 600 700

   Pairing A is the recommendation — Fraunces has more character than the
   slightly austere Playfair, and Inter solves the small-label readability
   problem more decisively than Source Sans 3.
   ──────────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════════
   THE PATCH — defaults to Pairing A. To switch to Pairing B, change the two
   font-family values in :root and swap the @import URL.
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&display=swap');


/* ───── ROOT VARIABLES ─────────────────────────────────────────────────────── */
:root {
  /* Type families — single point of change */
  --font-display:    'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-ui:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale (desktop). Each step keeps to common rounded px values. */
  --fs-xxs:          12px;     /* smallest allowed label */
  --fs-xs:           13px;
  --fs-sm:           14px;
  --fs-base:         16px;     /* default body */
  --fs-md:           17px;
  --fs-lg:           19px;
  --fs-xl:           22px;
  --fs-h3:           clamp(20px, 2.4vw, 26px);
  --fs-h2:           clamp(26px, 4vw,  40px);
  --fs-h1:           clamp(34px, 6vw,  64px);

  /* Mobile scale (applies via media query below) */
  --fs-base-mobile:  16px;
  --fs-sm-mobile:    14px;
  --fs-xxs-mobile:   12px;

  /* Weights — kept light because Inter at 400 is plenty on a dark bg */
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  /* Line heights — 1.6 for body, 1.2 for display, 1.35 for short copy */
  --lh-body:         1.6;
  --lh-tight:        1.25;
  --lh-display:      1.15;

  /* Letter spacing — almost zero on body, just enough on labels for breathing */
  --ls-body:         0;
  --ls-label:        0.08em;       /* was up to 0.46em — way over-tracked */
  --ls-display:     -0.01em;

  /* Contrast tokens — pre-checked vs #1C1208 background */
  --text-primary:    #F2E8D6;      /* keep; ratio ≈ 12.1 : 1   AAA */
  --text-secondary:  rgba(242,232,214,0.86);  /* ≈ 10.5 : 1   AAA */
  --text-muted:      rgba(242,232,214,0.72);  /* ≈ 8.5  : 1   AAA */
  --text-label:      rgba(232,197,71,0.90);   /* gold @.9 → ≈ 7.2 : 1 AAA */
}


/* ───── GLOBAL BODY ────────────────────────────────────────────────────────── */
/*
   SECTION:  Global body text
   CURRENT:  font-family: Cormorant Garamond serif | font-size: 15px |
             line-height: 1.6 | color: #F2E8D6
   PROBLEM:  Cormorant Garamond is a display serif used for paragraphs.
             Italics frequently inherited. Hard to read sustained copy.
   FIX:      Switch to Inter at 16px base. Keep colour, raise line-height
             slightly on long paragraphs.
*/
body {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, .card-desc, .card-notes, .review-text, .meta-val, .bourbon-notes-text,
.cigar-notes, .pairing-desc, .rev-text, .modal-notes-text {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: normal;        /* override inherited italic on notes blocks */
}


/* ───── NAVIGATION / HEADER ───────────────────────────────────────────────── */
/*
   SECTION:  Top nav (3 thumbnail cards + sub-link rail)
   CURRENT:  .nav-card__label   0.62rem  ≈ 10px  Playfair, all-caps
             .nav-card__viewing 0.38rem  ≈ 6.1px Montserrat
             .bcb-nav__sub-link 0.56rem  ≈ 9px   Montserrat all-caps
   PROBLEM:  Sub-link tap-targets readable, but "Currently Viewing" at 6 px
             is invisible. The all-caps + 0.18em tracking + tiny size combo
             defeats itself.
   FIX:      Move to a clear UI scale; reserve all-caps for the *one*
             eyebrow string above each section title only.
*/
.nav-card__label {
  font-family: var(--font-display);
  font-size:   var(--fs-sm);          /* 14px — was 10px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;             /* was 0.12em */
  line-height: 1;
}
.nav-card__viewing {
  font-family: var(--font-ui);
  font-size:   11px;                  /* was 6.1px */
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);    /* 0.08em — was 0.18em */
  text-transform: uppercase;
  line-height: 1;
}
.bcb-nav__sub-link {
  font-family: var(--font-ui);
  font-size:   var(--fs-sm);          /* 14px — was ~9px */
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: none;               /* drop ALL-CAPS — link labels read better mixed-case */
}
.nav-btn {
  font-family: var(--font-ui);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-secondary);       /* was rgba(.5) — fails contrast at rest */
}
.nav-btn:hover { color: var(--text-primary); }


/* ───── PAGE HEADINGS ─────────────────────────────────────────────────────── */
/*
   SECTION:  H1 / H2 / H3
   CURRENT:  Playfair Display 900 — H1 clamp(36-64px), H2 ~2rem, H3 mixed
   PROBLEM:  Sizes inconsistent across pages; "Cigar Directory" H1 lives on
             /cigars/cigars.html but the SPA cigar section uses an H2 at 2rem.
   FIX:      Single scale via vars below. Drop weight from 900 to 700 — at
             the new larger sizes 900 reads as too heavy on dark bg.
*/
h1, .h1 {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  font-weight: var(--fw-bold);        /* 700 — was 900 */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
h2, .h2, .section-title {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: 0;
  color: var(--text-primary);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size:   var(--fs-h3);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--text-primary);
}


/* ───── SECTION EYEBROWS (the small ALL-CAPS strings above titles) ────────── */
/*
   THE ONLY PLACE WE KEEP ALL-CAPS — and only when ≤ 3 words, ≥ 12 px.
   .section-eyebrow, .hero-eyebrow, .pairing-match-label, .modal-distillery,
   .bourbon-distillery, .cigar-brand, .modal-sec-lbl
*/
.section-eyebrow, .hero-eyebrow, .pairing-match-label, .modal-distillery,
.bourbon-distillery, .cigar-brand, .modal-sec-lbl {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);         /* 12px — was 7-11px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;              /* was 0.32-0.5em */
  text-transform: uppercase;
  color: var(--text-label);            /* gold @ 0.90α — passes AAA */
  line-height: 1.4;
}


/* ───── BOURBON DETAIL PAGE ───────────────────────────────────────────────── */
/*
   SECTION:  bourbon.php (single bourbon detail) + bourbon cards in index.html

   CURRENT (cards in index.html):
     .bourbon-distillery   0.58rem (9.3px) Montserrat  all-caps   .32em
     .bourbon-name         1.35rem (21.6px) Playfair 700
     .bourbon-age          0.9rem  italic Cormorant rgba(.45)
     .bourbon-score        2rem    Playfair 900
     .bourbon-score-label  0.48rem (7.7px) Montserrat all-caps
     .bourbon-stat-value   1.05rem Playfair 700
     .bourbon-stat-label   0.48rem (7.7px) Montserrat all-caps
     .bourbon-notes-text   0.92rem italic Cormorant rgba(.55)
     .tag                  0.52rem (8.3px) Montserrat all-caps

   PROBLEM:  Labels around 7-8 px are illegible. The italic .bourbon-age
             at 0.45α fails contrast (≈ 2.9 : 1). The notes block is the
             single most-read element on the page yet is the lightest weight,
             smallest size, and lowest contrast.

   FIX:      Bump every label to ≥12 px. Raise notes to 16 px non-italic.
             Drop tag from 8 px to 12 px and don't all-caps long phrases.
*/
.bourbon-distillery, .cigar-brand, .pairing-item-type, .rating-label,
.bourbon-score-label, .bourbon-stat-label, .cigar-stat-lbl,
.modal-stat-lbl, .rev-score-lbl, .rev-date {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px minimum */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-label);
  line-height: 1.3;
}
.bourbon-name, .cigar-name, .pairing-item-name, .expression-name,
.card-name, .rev-bourbon-ref {
  font-family: var(--font-display);
  font-size:   var(--fs-xl);           /* 22px — was 17-22px mixed */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text-primary);
}
.bourbon-age, .cigar-vitola {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);           /* 14px — was 14.4px italic */
  font-style: normal;
  color: var(--text-muted);
  margin-top: 4px;
}
.bourbon-score, .rating-score, .modal-score-big, .rev-score-num, .rev-avg-num {
  font-family: var(--font-display);
  font-size:   2rem;                   /* keep */
  font-weight: var(--fw-bold);
  color: var(--gold, #E8C547);
  line-height: 1;
}
.bourbon-stat-value, .cigar-stat-val, .modal-stat-val, .rss-val {
  font-family: var(--font-display);
  font-size:   var(--fs-md);           /* 17px — was 15-17px mixed */
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}
.tasting-notes, .bourbon-notes-text, .cigar-notes, .pairing-desc, .rev-text, .modal-notes-text {
  font-family: var(--font-body);
  font-size:   var(--fs-base);         /* 16px */
  font-weight: var(--fw-regular);
  font-style: normal;                  /* drop italic — fatiguing */
  line-height: 1.7;
  color: var(--text-secondary);
}
.tag, .featured-badge, .price-badge, .badge, .region-badge, .rev-badge {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px — was 7-10px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
}


/* ───── DISTILLERY DETAIL PAGE (distillery.php) ───────────────────────────── */
/*
   CURRENT:
     .hero-eyebrow    11px Montserrat all-caps 0.3em
     .hero-title      clamp(36-64px) Playfair 900
     .section h2      26px Playfair 700
     .section p       15px Cormorant 1.75 line-height (good)
     .facts-list li   14px Cormorant rgba(0.8)
     .info-card h3    11px Montserrat all-caps 0.25em
     .info-row label  11px Montserrat all-caps 0.1em
     .info-row span   13px Cormorant

   PROBLEM:  Heading-level "h3" rendered at 11 px is too small to function as
             a heading. Body p is good. Info-row labels/values inconsistent.

   FIX:      Promote info-card h3 to ≥14 px semibold; keep paragraph body but
             bump to 16 px (Inter); raise info-row label/value to fs-sm/base.
*/
.hero-eyebrow { /* covered above */ }
.hero-title {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-primary);
}
.section h2 {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  color: var(--text-primary);
}
.section p {
  font-size:   var(--fs-base);
  line-height: 1.7;
  color: var(--text-secondary);
}
.facts-list li {
  font-size:   var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
}
.info-card h3 {
  font-family: var(--font-display);
  font-size:   var(--fs-h3);           /* 20-26px — was 11px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;                /* was uppercase all-caps */
  color: var(--text-primary);
  margin-bottom: 12px;
}
.info-row label {
  font-family: var(--font-ui);
  font-size:   var(--fs-sm);           /* 14px — was 11px */
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: none;                /* mixed case reads better */
  color: var(--text-muted);
}
.info-row span, .info-row a {
  font-family: var(--font-body);
  font-size:   var(--fs-base);         /* 16px — was 13px */
  color: var(--text-primary);
}
.section-label {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px — was 10px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-label);
}


/* ───── DISTILLERIES DIRECTORY (distilleries.php) ─────────────────────────── */
/*
   CURRENT card grid:
     .card-state  10px Montserrat all-caps 0.25em  rgba(amber)
     .card-name   18px Playfair 700
     .card-meta   11px Montserrat rgba(smoke) 0.08em
     .card-desc   15px Cormorant 1.7 line-height (good after Fix 5)
     .tag         10px Montserrat all-caps 0.1em
     .btn-view    11px Montserrat all-caps 0.15em
     .hero-sub    15px font-weight:300 (light) on warm bg — fails contrast

   FIX:      Promote .card-state to 12px. Bump tag/button to 12px. Set
             .hero-sub to weight 400 so it doesn't fail AA.
*/
.card-state {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px — was 10px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 6px;
}
.card-name {
  font-family: var(--font-display);
  font-size:   var(--fs-xl);           /* 22px — was 18px */
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text-primary);
}
.card-meta {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);           /* 14px — was 11px */
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  color: var(--text-muted);
}
.card-desc {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  line-height: 1.7;
  color: var(--text-secondary);
}
.btn-view {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px — was 11px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-sub {
  font-size:   var(--fs-md);           /* 17px — was 15px */
  font-weight: var(--fw-regular);      /* was 300 — fails contrast */
  letter-spacing: 0;
  color: var(--text-muted);
}


/* ───── RELEASE CALENDAR (bourbon-calendar/styles.css) ────────────────────── */
/*
   CURRENT:
     body                          15px Cormorant
     headings                      Playfair (no explicit font-family override)
     .release-name (card title)    18-22px Playfair (varies)
     .release-meta                 0.8rem (12.8px) Montserrat
     .badge-type                   0.68rem (10.9px)  all-caps
     .badge-status                 ~11px all-caps
     .release-price                Playfair

   PROBLEM:  Badge labels < 12 px hard to read in a grid. Body 15 px.

   FIX:      Body to 16 px Inter; badges to 12 px semibold.
*/
.bcb-calendar body, body { /* already body — same selector */ }
.release-name {
  font-family: var(--font-display);
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--text-primary);
}
.release-distillery {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  color: var(--text-secondary);
}
.release-date {
  font-family: var(--font-ui);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--text-primary);
}
.badge-type, .badge-status, .badge-anticipated {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px — was 10.9-11px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.release-price {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);           /* 19px */
  font-weight: var(--fw-bold);
  color: var(--gold, #E8C547);
}
.release-meta, .meta-label, .meta-value {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);           /* 14px — was ~12.8px */
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
}


/* ───── CIGAR SECTION (cigars/style.css + cigars/cigars.html) ─────────────── */
/*
   CURRENT (in addition to inventoried h1-h4 + body 15px):
     .filter-chip   11px Montserrat all-caps 0.2em
     .cigar-strength-label 0.58rem (9.3px)
     .lounge-stat   13px
     Many tiny chips and meta strings 10-12 px

   FIX:      Body to 16 px; chips to 12 px; meta to 14 px.
*/
.cigars-page body, .cigars-page p {
  font-family: var(--font-body);
  font-size:   var(--fs-base);
  line-height: 1.65;
}
.filter-chip, .lounge-tag, .cigar-strength-label {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cigar-meta, .lounge-stat {
  font-family: var(--font-body);
  font-size:   var(--fs-sm);
  letter-spacing: 0;
  color: var(--text-secondary);
}


/* ───── PAIRINGS PAGE (bourbon-cigar-pairings.html) ───────────────────────── */
/*
   CURRENT:
     body                  15px Cormorant 1.6
     .intro-headline       clamp(28-48px) Playfair
     .intro-sub            15px Cormorant
     .mode-title           17px (mode card)
     .mode-desc            15px
     .search-title         22px Playfair
     .search-sub           14px Cormorant
     .question-label       0.58rem (~9.3px) Montserrat all-caps 0.14em
     .pill (filter chip)   ~0.62rem (~10px) Montserrat all-caps 0.18em
     .section-banner-caption 0.62rem (~10px) Montserrat all-caps 0.22em
     .results-title         (h2 size mixed)

   FIX:      Body 16px Inter; question-labels & pills 12 px min; banner
             captions 12 px.
*/
.intro-headline {
  font-family: var(--font-display);
  font-size:   var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-display);
}
.intro-sub, .search-sub, .mode-desc {
  font-family: var(--font-body);
  font-size:   var(--fs-base);         /* 16px */
  line-height: 1.6;
  color: var(--text-secondary);
}
.search-title {
  font-family: var(--font-display);
  font-size:   var(--fs-h2);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}
.mode-title {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);           /* 19px — was 17px */
  font-weight: var(--fw-semibold);
}
.question-label {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-label);
  margin-bottom: 10px;
}
.pill, .flavor-tag, .legend {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);          /* 12px — was ~10px */
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-banner-caption {
  font-family: var(--font-ui);
  font-size:   var(--fs-xxs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}


/* ───── FOOTER ────────────────────────────────────────────────────────────── */
/*
   CURRENT (index.html lines 687-688 + 1306-1309):
     .footer-logo       1.2rem Playfair
     footer p           0.6rem (9.6px) Montserrat all-caps 0.25em rgba(.25)
     Inline footer links 0.55rem (8.8px) all-caps rgba(.35)

   PROBLEM:  Footer is the smallest, lowest-contrast typography on the page.
             0.55rem all-caps "DIRECTORY · LOUNGE FINDER · PAIRING GUIDE ·
             RELEASE CALENDAR" at rgba(.35) is genuinely hard to read.

   FIX:      Promote all footer text to 13-14 px regular case at higher
             contrast. The legal/copyright line can stay smaller (12 px).
*/
.footer-logo {
  font-family: var(--font-display);
  font-size:   var(--fs-lg);           /* 19px — was 19.2 (1.2rem) */
  font-weight: var(--fw-bold);
}
footer p {
  font-family: var(--font-body);
  font-size:   var(--fs-xxs);          /* 12px — was 9.6px */
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: none;                /* drop ALL-CAPS */
  color: var(--text-muted);
}
/* Footer link rail (index.html 1306-09 — inline styled, may need !important) */
footer a, .footer-link {
  font-family: var(--font-ui) !important;
  font-size:   var(--fs-sm) !important;     /* 14px — was 8.8px */
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;          /* was uppercase */
  color: var(--text-secondary) !important;  /* was rgba(.35) */
}
footer a:hover, .footer-link:hover { color: var(--gold, #E8C547) !important; }


/* ───── MOBILE OVERRIDES ──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  :root {
    --fs-base: var(--fs-base-mobile);     /* 16px stays */
    --fs-sm:   var(--fs-sm-mobile);       /* 14px */
    --fs-xxs:  var(--fs-xxs-mobile);      /* 12px — never smaller */
  }
  .nav-card__viewing,
  .bcb-nav__sub-link { font-size: 12px; letter-spacing: 0.06em; }
  .release-meta, .card-meta, .info-row span { font-size: 15px; }
  .info-row label { font-size: 13px; }
  /* Headings already responsive via clamp(). */
}


/* ════════════════════════════════════════════════════════════════════════════
   STEP 4 — RECOMMENDATIONS TABLE  (mirrors what's above, in table form)

   ┌─────────────────────────┬────────────────────────────────┬──────────────────────────────────────┬───────────────────────────────────────────────┐
   │ Section                 │ Current setting                 │ Recommended setting                  │ Reason                                         │
   ├─────────────────────────┼────────────────────────────────┼──────────────────────────────────────┼───────────────────────────────────────────────┤
   │ Body / paragraph        │ Cormorant Garamond 15px 1.6     │ Inter 16px / mobile 16px 1.65        │ Display serif used for long copy; ↑ legibility│
   │ H1                      │ Playfair 900 clamp(36-64)        │ Fraunces 700 clamp(34-64)            │ Same scale, lighter weight, warmer character  │
   │ H2 / section-title      │ Playfair 700 clamp(32-56)        │ Fraunces 700 clamp(26-40)            │ Right-size, single scale across pages         │
   │ H3                      │ Playfair / mixed 1-1.2rem         │ Fraunces 600 clamp(20-26)            │ Currently looks like body, not heading        │
   │ Top nav card label      │ Playfair 700 10px tracking .12   │ Fraunces 600 14px tracking .04       │ 10px under-readable; mixed case scans faster  │
   │ "Currently Viewing"     │ Montserrat 6.1px all-caps         │ Inter medium 11px all-caps tr .08    │ 6px is below all legibility thresholds        │
   │ Sub-nav link            │ Montserrat 9px all-caps tr .17   │ Inter medium 14px mixed case tr .02  │ Below 12px minimum; ALL-CAPS slows scanning   │
   │ Section eyebrow         │ Montserrat 7-10px all-caps .5em  │ Inter 600 12px all-caps tr .16       │ Tracking too wide makes letters disconnected  │
   │ Bourbon name / card     │ Playfair 700 17-22px mixed       │ Fraunces 700 22px                    │ Standardize across cards & detail pages       │
   │ Bourbon distillery      │ Montserrat 9.3px all-caps .32em  │ Inter 600 12px all-caps tr .12       │ Below minimum + over-tracked                  │
   │ Bourbon notes / italic  │ Cormorant italic 14.7px α.55     │ Inter 16px regular text-secondary    │ Italic body at low contrast fails AA          │
   │ Tasting / score label   │ Montserrat 7-9px all-caps .2em   │ Inter 600 12px all-caps tr .12       │ Eight different sizes for one semantic role   │
   │ Tag / badge / chip      │ Montserrat 7-10px all-caps .18em │ Inter 600 12px all-caps tr .08       │ All-caps + tiny + tracked = unreadable        │
   │ Distillery hero-sub     │ 15px weight 300 #a08860          │ 17px weight 400 text-muted           │ Weight 300 at 15px fails contrast on dark     │
   │ Distillery info-card h3 │ 11px Montserrat all-caps .25em   │ Fraunces 600 20-26px mixed case      │ Currently looks like a tag, not a heading     │
   │ Distillery info-row     │ label 11px / value 13px           │ label 14px / value 16px              │ Form pairs need parallel size; 13px too small │
   │ Calendar release-meta   │ ~12.8px Montserrat                │ Inter 14px regular                    │ Drop unnecessary uppercase; ↑ to 14px          │
   │ Calendar badge          │ ~11px all-caps .12em              │ Inter 600 12px all-caps tr .08       │ At 11px the badge text loses crispness        │
   │ Cigar chips / labels    │ 9-11px all-caps mixed             │ Inter 600 12px all-caps tr .08       │ Consistency with bourbon-side chips           │
   │ Pairings question-label │ 9.3px all-caps .14em              │ Inter 600 12px all-caps tr .08       │ Sub-12px on dark bg is hard at glance         │
   │ Pairings pill / filter  │ ~10px all-caps                    │ Inter 600 12px all-caps tr .06       │ Same — tap-target text must be ≥12px          │
   │ Footer body line        │ 9.6px all-caps α.25               │ Inter 12px mixed case text-muted     │ Lowest legibility on page; ↑ contrast too     │
   │ Footer link             │ 8.8px all-caps α.35               │ Inter medium 14px mixed case secondary│ Below 14px minimum + below contrast AA       │
   └─────────────────────────┴────────────────────────────────┴──────────────────────────────────────┴───────────────────────────────────────────────┘
   ════════════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════════════
   STEP 5 — APPLY (when ready)

   The CSS rules above are the patch itself. To apply:

   1. Place this file at: /public_html/typography-recommendations.css

   2. Add ONE <link> AFTER the existing site stylesheets on every page:
      <link rel="stylesheet" href="/typography-recommendations.css">

      Files to edit:
        - index.html                            (add link in <head>)
        - distilleries.php                      (add link in <head>)
        - distillery.php                        (add link in <head>)
        - bourbon-cigar-pairings.html           (add link in <head>)
        - bourbon-calendar/index.html           (add link in <head>)
        - cigars/cigars.html                    (add link in <head>)
        - cigars/lounges.html                   (add link in <head>)
        - bourbon.php (single-bourbon detail)   (add link in <head>)

   3. Verify on each page that headings, body, and labels read better than
      before. If a specific page surfaces a class not covered above, add a
      targeted rule rather than overriding the variables.

   4. Once happy, fold the @import + :root block into the top of
      bcb-style-REFRESH.css and delete this file.

   ROLLBACK: remove the single <link> tag — the original styles return
   immediately, since no inline HTML has been edited.
   ════════════════════════════════════════════════════════════════════════════ */