/* ============================================================
   CHARLES FONTANA & CIE — Colors & Type
   Maison de haute joaillerie fondée en 1840
   Place Vendôme · 75001 Paris
   Source of truth: charles_fontana_brand_manual.pdf (v1.0, MMXXVI)
   ============================================================ */

/* -- Fonts --------------------------------------------------- */
/* Display (apparat) : Bodoni Moda — neoclassical didone, used for
   sigle, titres, citations only. Never below 11pt on screen.
   Body (labeur)     : Jost Light — geometric sans, for addresses,
   mentions légales, descriptions, courants. Default everywhere
   that is not a title.
   The brand manual EXPLICITLY forbids Playfair Display as a
   Bodoni substitute. Source the licensed Bodoni when possible. */
@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;1,6..96,400;1,6..96,500&display=swap");

@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Jost-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-Italic-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Jost-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Palette (three colors, no exceptions) -------------- */
  --noir:          #2A2520;       /* noir d'encre · warm black */
  --ivoire:        #FAF6EE;       /* ivoire coton · paper      */
  --or-grave:      #8B6F3F;       /* or gravé · emboss / foil
                                     ONLY — never used as a
                                     screen fill. Color token
                                     exists for documentation. */

  /* Soft helpers derived from noir, never as independent
     accents. Used for hairline rules, muted captions, etc. */
  --rule-soft:     rgba(42,37,32,0.18);
  --noir-muted:    rgba(42,37,32,0.60);
  --noir-faint:    rgba(42,37,32,0.40);

  /* ---- Semantic surfaces (only two) ---------------------- */
  --bg:            var(--ivoire);
  --bg-inverse:    var(--noir);
  --fg:            var(--noir);
  --fg-muted:      var(--noir-muted);
  --fg-faint:      var(--noir-faint);
  --fg-inverse:    var(--ivoire);
  --border:        var(--rule-soft);
  --border-strong: var(--noir);

  /* ---- Type families ------------------------------------- */
  --font-display:  "Bodoni Moda", "Didot LT Std", "Bauer Bodoni", "Bodoni 72", Georgia, serif;
  --font-body:     "Jost", "Futura", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-label:    "Jost", "Futura", "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* ---- Type scale ---------------------------------------- */
  --fs-display-xl: 96px;
  --fs-display-lg: 72px;
  --fs-display:    56px;
  --fs-h1:         44px;
  --fs-h2:         32px;
  --fs-h3:         24px;
  --fs-h4:         20px;
  --fs-body-lg:    20px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-overline:   11px;

  --lh-tight:      1.05;
  --lh-snug:       1.2;
  --lh-body:       1.6;
  --lh-loose:      1.85;

  /* Letter-spacing.
     The brand manual mandates +340/1000 em minimum tracking on
     all-caps Bodoni sigle and apparat. Smaller caps may use
     0.22 em; never less. */
  --ls-sigle:      0.34em;       /* sigle / hero apparat        */
  --ls-display:    -0.005em;     /* Bodoni titles, mixed case   */
  --ls-overline:   0.30em;       /* Jost overlines (Jost 500)   */
  --ls-caps:       0.22em;       /* Jost / Bodoni small caps    */

  /* ---- Spacing & layout ---------------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* ---- Corner radii (square is the maison default) ------- */
  --radius-0:      0px;          /* default · maison           */
  --radius-1:      2px;          /* image plate · rare         */
  --radius-pill:   999px;        /* used once per page maximum */

  /* ---- Rules & shadows ----------------------------------- */
  --hairline:      1px solid var(--noir);
  --hairline-soft: 1px solid var(--rule-soft);
  --shadow-plate:  0 1px 0 rgba(42,37,32,0.04), 0 20px 40px -24px rgba(42,37,32,0.18);
  --shadow-card:   0 1px 0 rgba(42,37,32,0.06), 0 30px 60px -40px rgba(42,37,32,0.32);

  /* ---- Motion -------------------------------------------- */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.25, 1);
  --ease-out:      cubic-bezier(0.16, 0.84, 0.32, 1);
  --dur-fast:      120ms;
  --dur-base:      240ms;
  --dur-slow:      480ms;
  --dur-stately:   720ms;
}

/* -- Base elements ------------------------------------------ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;                /* Jost Light is the default */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* ---- Display / apparat (Bodoni Moda, caps, wide tracked) -- */
.cf-sigle {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--ls-sigle);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}

h1, .cf-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-sigle);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}

h2, .cf-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-sigle);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  margin: 0 0 var(--space-4);
}

h3, .cf-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-caps);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

/* Italic-mixed Bodoni (think: "L'essence" / chapter titles).
   Used in long form — never in the sigle. */
.cf-titre-italic {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

h4, .cf-h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- Body / labeur (Jost Light) ---------------------------- */
p, .cf-p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.cf-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg);
}

.cf-overline {
  font-family: var(--font-label);
  font-weight: 400;                /* Jost regular for overlines */
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.cf-caps {
  font-family: var(--font-label);
  font-weight: 400;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.cf-address {
  font-family: var(--font-label);
  font-weight: 300;
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  line-height: 1.9;
  text-transform: uppercase;
  text-align: center;
}

.cf-caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-caption);
  color: var(--fg-muted);
}

a, .cf-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover, .cf-link:hover { opacity: 0.6; }

/* The short horizontal rule — the maison's only "ornament". */
.cf-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: currentColor;
  margin: var(--space-4) auto;
}
.cf-rule--long { width: 120px; }
.cf-rule--full { width: 100%; }

/* ---- THE SIGLE -------------------------------------------- */
/* The three-element lock-up. Never on a single line. Never
   tracked below 0.34em on the capital lines. The italic
   "Fontana" line is NEVER used alone.                          */
.cf-logo {
  font-family: var(--font-display);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
  color: var(--noir);
}
.cf-logo__caps {
  font-weight: 400;
  letter-spacing: var(--ls-sigle);
  text-transform: uppercase;
}
.cf-logo__italic {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  margin: -0.06em 0;
  text-transform: none;
}
/* Sizes */
.cf-logo--sm { font-size: 16px; gap: 0; }
.cf-logo--md { font-size: 22px; }
.cf-logo--lg { font-size: 36px; }
.cf-logo--xl { font-size: 72px; }
.cf-logo--xxl{ font-size: 120px; }
.cf-logo--inverse { color: var(--ivoire); }