/* ============================================================
   NOURRIR — Colors & Type
   The three-colour palette is LOCKED. Do not introduce new hues.
   Cream is the only light value. White (#FFFFFF) is never used.
   ============================================================ */

/* Brand fonts.
   - Cormorant Garamond: served LOCALLY from /fonts (variable, weight axis).
   - Cormorant Garamond italic + Jost: from Google Fonts. No italic axis exists
     in the supplied variable file, so italic is loaded separately.           */
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,300;1,400;1,500;1,600&family=Jost:wght@300;400;500;600&display=swap");
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* -- Locked palette ------------------------------------------ */
  --forest:        #3B542A;   /* Primary    — Forest Green        */
  --cream:         #FFFDF5;   /* Background — Cream (never white) */
  --gold:          #B2914A;   /* Accent     — Gold (sparingly)    */

  /* -- Tonal extensions (derived; use only when an interface
        genuinely needs depth — never invent new hues) ----------- */
  --forest-deep:   #2A3D1E;   /* Deeper green for shadows / wax-seal */
  --forest-soft:   #4D6A3A;   /* Hover lift on forest surfaces       */
  --cream-warm:    #F6F1E2;   /* Card on cream / subtle separation   */
  --cream-edge:    #E8E2D0;   /* 1px hairlines on cream              */
  --gold-soft:     #C8A968;   /* Hover state on gold                 */
  --ink:           #1A1F14;   /* Near-black for slate-surface text   */

  /* -- Semantic foreground / background ------------------------ */
  --bg:            var(--cream);
  --bg-elevated:   var(--cream-warm);
  --bg-inverse:    var(--forest);
  --fg:            var(--forest);
  --fg-muted:      color-mix(in oklab, var(--forest) 65%, var(--cream));
  --fg-on-forest:  var(--cream);
  --fg-on-gold:    var(--cream);
  --accent:        var(--gold);
  --hairline:      var(--cream-edge);
  --hairline-on-forest: color-mix(in oklab, var(--cream) 18%, var(--forest));

  /* -- Type families ------------------------------------------- */
  --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-label:   "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;

  /* -- Type scale ---------------------------------------------- *
     Cormorant Garamond is set Light or Regular only — never bold.
     Display sizes carry generous tracking; label sizes track open. */
  --t-display-xl: 400 clamp(56px, 9vw, 128px)/0.95 var(--font-display);
  --t-display:    400 clamp(44px, 6vw, 88px)/1.02 var(--font-display);
  --t-h1:         400 clamp(36px, 4.4vw, 64px)/1.08 var(--font-display);
  --t-h2:         400 clamp(28px, 3.2vw, 44px)/1.15 var(--font-display);
  --t-h3:         400 28px/1.2 var(--font-display);
  --t-lede:       500 22px/1.45 var(--font-display);   /* italic-capable */
  --t-body:       400 16px/1.6 var(--font-label);
  --t-body-sm:    400 14px/1.55 var(--font-label);
  --t-label:      500 12px/1.2 var(--font-label);     /* uppercase, tracked */
  --t-label-sm:   500 10.5px/1.2 var(--font-label);
  --t-eyebrow:    500 11px/1 var(--font-label);
  --t-button:     500 13px/1 var(--font-label);
  --t-price:      400 20px/1 var(--font-display);

  /* -- Tracking ------------------------------------------------ */
  --tr-display: 0.005em;   /* almost nothing — letters breathe */
  --tr-display-loose: 0.04em;
  --tr-label:   0.14em;    /* uppercase Jost                   */
  --tr-label-tight: 0.08em;
  --tr-button:  0.18em;

  /* -- Spacing (8-grid, with a 4px micro step) ----------------- */
  --s-0:  0;        /* @kind spacing */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* -- Radii — restrained. Nothing pillowy. -------------------- */
  --r-none: 0;      /* @kind radius */
  --r-xs:   2px;     /* form controls, chips                     */
  --r-sm:   4px;     /* inputs, secondary buttons                */
  --r-md:   6px;     /* cards                                    */
  --r-pill: 999px;   /* membership pills, plan chips             */

  /* -- Borders & hairlines ------------------------------------- */
  --bd-hair:    1px solid var(--hairline);
  --bd-strong:  1px solid var(--forest);
  --bd-gold:    1px solid var(--gold);

  /* -- Shadows — restrained. No glow. No digital-looking lifts. */
  --shadow-rest: 0 1px 0 rgba(58,72,38,0.06);
  --shadow-card: 0 2px 8px rgba(42,61,30,0.06), 0 1px 2px rgba(42,61,30,0.05);
  --shadow-lift: 0 16px 40px -20px rgba(42,61,30,0.25);

  /* -- Motion — editorial. Slow. Never bouncy. ----------------- */
  --ease-quiet: cubic-bezier(0.2, 0.6, 0.2, 1);  /* @kind other */
  --d-fast:  160ms;  /* @kind other */
  --d-base:  280ms;  /* @kind other */
  --d-slow:  520ms;  /* @kind other */
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--forest); color: var(--cream); }

/* ============================================================
   Semantic type
   ============================================================ */
.display-xl,
h1.display { font: var(--t-display-xl); letter-spacing: var(--tr-display); color: var(--fg); margin: 0; text-wrap: balance; }
.display    { font: var(--t-display);    letter-spacing: var(--tr-display); margin: 0; text-wrap: balance; }
h1          { font: var(--t-h1);         letter-spacing: var(--tr-display); margin: 0; text-wrap: balance; }
h2          { font: var(--t-h2);         letter-spacing: var(--tr-display); margin: 0; text-wrap: balance; }
h3          { font: var(--t-h3);         letter-spacing: var(--tr-display); margin: 0; }
.lede       { font: var(--t-lede);       letter-spacing: 0; color: var(--fg-muted); margin: 0; text-wrap: pretty; }
p           { font: var(--t-body);       margin: 0 0 1em 0; text-wrap: pretty; }
.body-sm    { font: var(--t-body-sm); }
.price      { font: var(--t-price); letter-spacing: var(--tr-display); }

.label,
.eyebrow {
  font: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow { font: var(--t-eyebrow); letter-spacing: var(--tr-label); }

/* Italic variant of Cormorant — used for short pull quotes only */
.italic-quote { font: italic 500 26px/1.35 var(--font-display); color: var(--fg); }

/* Hairline divider — a single 1px rule, never decorated */
.rule { border: 0; border-top: var(--bd-hair); margin: var(--s-6) 0; }
.rule--gold { border-top-color: var(--gold); }
.rule--forest { border-top-color: var(--forest); }