/* ============================================================
+   GRV — design tokens
+   Extracted without selector or value changes.
+   ============================================================ */

@font-face{
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Onest';
  src: url('../fonts/onest/Onest-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-LightItalic.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face{
  font-family: 'Cormorant';
  src: url('../fonts/cormorant/Cormorant-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   GRV — Colour tokens
   Timeless warm black-and-white base with subtle butter / chocolate /
   pastel-blue / stone accents. Accents stay in details, never dominate.
   ============================================================ */

:root{
  /* ---- Restored GRV accent palette ------------------------ */
  --grv-blue:         #AEC0CB;
  --grv-cream:        #E5C57A;
  --grv-brown:        #301C1B;
  --grv-white:        #FFFFFF;
  --grv-paper:        #F2EDDE;
  --grv-brand-gradient:linear-gradient(135deg,var(--grv-blue) 0%,var(--grv-brown) 50%,var(--grv-butter) 100%);

  /* ---- Surface aliases ------------------------------------ */
  --grv-paper-warm:   #ECE4D1;
  --grv-surface:      #F6F1E4;
  --grv-surface-pure: #FFFFFF;
  --grv-dark:         var(--grv-brown);
  --grv-dark-2:       var(--grv-brown);

  /* ---- Ink (text) ----------------------------------------- */
  --grv-ink:          var(--grv-brown);
  --grv-ink-2:        #56524B;  /* secondary text — warm graphite */
  --grv-ink-3:        #8C887F;  /* muted labels / captions — warm grey */
  --grv-ink-inverse:  #F4F1EA;

  /* ---- Greys ---------------------------------------------- */
  --grv-stone:        #9A938A;  /* stone grey — eyebrows, fine labels */
  --grv-warm-grey:    #E6DECF;  /* image placeholder fill */
  --grv-cool-grey:    #DCDAD5;  /* cool neutral grey fill */

  /* ---- Lines / dividers ----------------------------------- */
  --grv-line:         #E0D8C6;  /* hairline on linen */
  --grv-line-2:       #CFC5AF;  /* stronger divider */
  --grv-line-dark:    #3A352C;  /* divider on dark surfaces */

  /* ---- Accents (used sparingly, in details) --------------- */
  --grv-butter:       #E5C57A;
  --grv-buttermilk:   #F1E7CB;
  --grv-chocolate:    #5B4334;
  --grv-blue-tint:    #DCE5E9;
  --grv-clay:         #B0734E;

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --text-primary:     var(--grv-ink);
  --text-secondary:   var(--grv-ink-2);
  --text-muted:       var(--grv-ink-3);
  --text-faint:       var(--grv-stone);
  --text-inverse:     var(--grv-ink-inverse);

  --surface-page:     var(--grv-paper);
  --surface-warm:     var(--grv-paper-warm);
  --surface-card:     var(--grv-surface);
  --surface-dark:     var(--grv-dark);

  --border-subtle:    var(--grv-line);
  --border-strong:    var(--grv-line-2);
  --border-ink:       var(--grv-ink);
  --border-on-dark:   var(--grv-line-dark);

  --accent-butter:    var(--grv-butter);
  --accent-buttermilk:var(--grv-buttermilk);
  --accent-chocolate: var(--grv-chocolate);
  --accent-blue:      var(--grv-blue);
  --accent-blue-bg:   var(--grv-blue-tint);
  --accent-clay:      var(--grv-clay);

  --background:       var(--grv-paper);
  --paper:            var(--grv-paper);
  --ink:              var(--grv-ink);
  --accent:           var(--grv-butter);
}

/* ============================================================
   GRV — Typography tokens
   Onest (neo-grotesque, Cyrillic) is the architectural workhorse.
   Cormorant (editorial serif, Cyrillic) is a quiet accent for large
   statements & pull-quotes only. Light weights, generous tracking on
   labels, tight tracking on display.
   ============================================================ */

:root{
  /* ---- Families ------------------------------------------- */
  --font-sans:  'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Cormorant', Georgia, 'Times New Roman', serif;

  /* ---- Weights ----------------------------------- @kind other */
  --fw-light:   300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-semibold:600; /* @kind other */
  --fw-bold:    700; /* @kind other */

  /* ---- Display / heading sizes ---------------------------- */
  --fs-display: 72px;   /* hero display */
  --fs-h1:      64px;
  --fs-h2:      clamp(42px, 3.3vw, 50px);
  --fs-h3:      clamp(20px, 1.6vw, 24px);
  --fs-h4:      18px;

  /* ---- Body & support ------------------------------------- */
  --fs-large:   24px;   /* large lead statement */
  --fs-lead:    18px;   /* intro paragraph */
  --fs-body:    15px;   /* body copy */
  --fs-small:   14px;   /* compact body / buttons */
  --fs-caption: 12px;   /* captions */
  --fs-eyebrow: 13px;   /* tracked labels */

  /* ---- Semantic type aliases ------------------------------ */
  --text-section-title: var(--fs-h2);
  --text-h3:            var(--fs-h3);
  --text-lead:          var(--fs-lead);
  --text-body:          var(--fs-body);
  --text-small:         var(--fs-small);
  --text-eyebrow:       var(--fs-eyebrow);

  /* ---- Counters / statistics ------------------------------ */
  --fs-counter: 56px;

  /* ---- Line heights ------------------------------ @kind other */
  --lh-display: 1.04; /* @kind other */
  --lh-heading: 1.08; /* @kind other */
  --lh-h3:      1.2;
  --lh-snug:    1.25; /* @kind other */
  --lh-lead:    1.58;
  --lh-body:    1.6; /* @kind other */
  --lh-label:   1.4;
  --lh-relaxed: 1.7; /* @kind other */

  /* ---- Letter spacing ---------------------------- @kind other */
  --ls-display: -0.018em; /* @kind other */
  --ls-heading: -0.012em; /* @kind other */
  --ls-body:    0; /* @kind other */
  --ls-label:   0.12em;   /* eyebrows · @kind other */
  --ls-wide:    0.16em;   /* extra-tracked · @kind other */
  --ls-nav:     0.02em; /* @kind other */
}

/* ============================================================
   GRV — Spacing & layout tokens
   Architectural rhythm: 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 / 120.
   Large margins, calm grid, generous section padding.
   ============================================================ */

:root{
  /* ---- Spacing scale -------------------------------------- */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-48:  48px;
  --sp-64:  64px;
  --sp-96:  96px;
  --sp-120: 120px;
  --sp-160: 160px;

  /* ---- Layout containers ---------------------------------- */
  --container-max:   1728px;  /* capped content width on 1920–1980 displays */
  --container-text:  860px;   /* max measure for reading */

  /* ---- Page gutters (horizontal padding) ------------------ */
  --pad-desktop: 96px;
  --pad-small-desktop: 56px;
  --pad-tablet:  40px;
  --pad-mobile:  20px;

  /* ---- Grid ----------------------------------------------- */
  --grid-gutter: 32px;        /* column gap */
  --grid-gutter-wide: 64px;   /* wide column gap for editorial splits */

  /* ---- Section rhythm ------------------------------------- */
  --section-y:    120px;      /* default vertical section padding */
  --section-y-lg: 160px;      /* generous section */
  --section-y-sm: 72px;       /* compact section */
  --section-y-tablet: 96px;
  --section-y-mobile: 72px;
  --section-y-lg-tablet: 120px;
  --section-y-lg-mobile: 88px;

  /* ---- Content rhythm ------------------------------------- */
  --space-title-text: 20px;
  --space-section-head: 64px;

  /* ---- Canonical responsive thresholds (documentation) ---- */
  --bp-wide: 1600px;
  --bp-desktop: 1440px;
  --bp-small-desktop: 1200px;
  --bp-tablet: 1024px;
  --bp-tablet-mobile: 768px;
  --bp-mobile: 480px;
}

/* ============================================================
   GRV — Effects tokens
   Architectural minimalism: thin lines, almost no shadow, no radius.
   Premium = restraint. Hover = subtle opacity / line shifts. Press = nudge.
   ============================================================ */

:root{
  /* ---- Corner radius — essentially square -------------------*/
  --radius-none: 0px;
  --radius-xs:   2px;    /* the most we ever round (inputs, chips) */
  --radius-pill: 999px;  /* status dots only */

  /* ---- Borders -------------------------------------------- */
  --border-hairline: 1px solid var(--grv-line);
  --border-line:     1px solid var(--grv-line-2);
  --border-ink-1:    1px solid var(--grv-ink);

  /* ---- Shadows — used very sparingly (overlays, raised cards) */
  --shadow-none:  none;
  --shadow-inset: inset 0 0 0 1px var(--grv-line);   /* "raised" card outline */
  --shadow-soft:  0 1px 2px rgba(48,28,27,0.04),
                  0 8px 24px rgba(48,28,27,0.05);     /* dialogs / popovers */
  --shadow-lift:  0 2px 4px rgba(48,28,27,0.05),
                  0 18px 50px rgba(48,28,27,0.09);    /* modal / focus overlay */

  /* ---- Motion ------------------------------------ @kind other */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-inout:    cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   240ms; /* @kind other */
  --dur-slow:   480ms; /* @kind other */

  /* ---- Focus ring ----------------------------------------- */
  --focus-ring: 0 0 0 2px var(--grv-paper), 0 0 0 3px var(--grv-ink);

  /* ---- Aspect ratios used for imagery ------------ @kind other */
  --ar-cinema: 21 / 9; /* @kind other */
  --ar-hero:   21 / 10; /* @kind other */
  --ar-wide:   16 / 9; /* @kind other */
  --ar-square: 1 / 1; /* @kind other */
  --ar-tall:   3 / 4; /* @kind other */
}

:root{
  --ease: cubic-bezier(.19, 1, .22, 1);     /* premium architectural ease */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --pad: max(var(--pad-desktop), calc((100vw - var(--container-max)) / 2));

}