:root {
  --color-beige:     #F2EDE2;
  --color-clair:     #F2F6F9;
  --color-nuit:      #131830;
  --color-champagne: #D6C4AB;
  --color-gris:      #C8CACE;

  --color-cream:        var(--color-beige);
  --color-surface:      var(--color-clair);
  --color-cream-soft:   var(--color-beige);
  --color-cream-deep:   var(--color-champagne);

  --color-ink:          var(--color-nuit);
  --color-ink-soft:     rgba(19, 24, 48, 0.80);
  --color-muted:        rgba(19, 24, 48, 0.64);
  --color-muted-light:  rgba(19, 24, 48, 0.50);

  --color-line:         rgba(19, 24, 48, 0.14);
  --color-line-strong:  rgba(19, 24, 48, 0.28);

  --color-slate:        var(--color-nuit);
  --color-slate-hover:  #2E3348;
  --color-slate-hover:  color-mix(in srgb, var(--color-nuit) 88%, var(--color-clair));

  --color-on-dark:      var(--color-clair);
  --color-on-dark-soft: rgba(242, 246, 249, 0.78);
  --color-on-dark-mute: rgba(242, 246, 249, 0.5);
  --color-on-dark-line: rgba(242, 246, 249, 0.22);

  --color-sand:         var(--color-champagne);
  --color-accent:       var(--color-nuit);
  --color-accent-soft:  var(--color-champagne);
  --color-star:         var(--color-nuit);

  --color-scrim:        rgba(19, 24, 48, 0.55);
  --photo-veil:         0.42;
  --gradient-hero:      linear-gradient(178deg,
                          rgba(19, 24, 48, 0.52) 0%,
                          rgba(19, 24, 48, 0.26) 26%,
                          rgba(19, 24, 48, 0.05) 46%,
                          rgba(19, 24, 48, 0) 60%);
  --gradient-hero-page: linear-gradient(180deg,
                          rgba(19, 24, 48, 0.52) 0%,
                          rgba(19, 24, 48, 0.24) 45%,
                          rgba(19, 24, 48, 0.42) 100%);
  --gradient-hero-list: linear-gradient(178deg,
                          rgba(19, 24, 48, 0.5) 0%,
                          rgba(19, 24, 48, 0.22) 42%,
                          rgba(19, 24, 48, 0.1) 100%);
  --gradient-hero-side: linear-gradient(115deg,
                          rgba(19, 24, 48, 0.34) 0%,
                          rgba(19, 24, 48, 0.08) 52%,
                          rgba(19, 24, 48, 0) 74%);
  --mask-marquee:       linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);

  --ph-base:      var(--color-gris);

  --font-serif:  "Noto Serif Display", Georgia, "Times New Roman", serif;
  --font-sans:   "Arimo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --font-signature: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;

  --fs-hero:      clamp(2.4rem, 4.8vw, 4.8rem);
  --fs-hero-page: clamp(2.2rem, 4.6vw, 4.2rem);
  --fs-hero-lg:   clamp(2.4rem, 5vw, 4.4rem);
  --fs-hero-card: clamp(2rem, 3.4vw, 3.2rem);
  --fs-headline:  clamp(30px, 5.4vw, 49px);
  --fs-display:   clamp(2rem, 5vw, 2.75rem);
  --fs-h2-lead:   clamp(2rem, 4.4vw, 4rem);
  --fs-h3:        clamp(1.7rem, 2.7vw, 2.6rem);
  --fs-h3-sm:     clamp(1.25rem, 1.9vw, 1.65rem);
  --fs-quote:     clamp(1.7rem, 3vw, 2.7rem);
  --fs-title:     2rem;
  --fs-tab:       1.375rem;
  --fs-lg:        1.125rem;
  --fs-base:      1rem;
  --fs-label:     0.9375rem;
  --fs-body:      0.875rem;
  --fs-sm:        0.8125rem;
  --fs-xs:        0.75rem;
  --fs-xxs:       0.6875rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --lh-tight:  1.05;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --ls-tight: 0.01em;
  --ls-tab:   0.12em;
  --ls-wide:  0.18em;
  --ls-wider: 0.26em;

  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-pill: 999px;
  --radius-arch: clamp(150px, 19vw, 300px);

  --frame:        24px;
  --header-h:     108px;
  --header-h-sm:  74px;
  --nav-h:        96px;
  --nav-h-sm:     64px;
  --hero-cut:     96px;
  --admin-bar:    0px;
  --gutter:       calc(var(--frame) + 2.1vw);
  --section-y:    clamp(50px, 8vw, 120px);

  --maxw-content: 1296px;
  --maxw-lead:    1088px;
  --maxw-text:    820px;
  --content-pad:  max(var(--gutter), calc((100vw - var(--maxw-content)) / 2));
  --card-w:       min(360px, 82vw);

  --shadow-menu:    0 40px 60px -40px rgba(19, 24, 48, 0.4);
  --shadow-dropdown:0 22px 44px -20px rgba(19, 24, 48, 0.4);
  --shadow-float:   0 10px 30px -10px rgba(19, 24, 48, 0.3);
  --shadow-frame:   0 24px 50px -26px rgba(19, 24, 48, 0.4);

  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:   0.25s ease;
  --t-medium: 0.35s ease;
  --t-slow:   0.5s ease;
  --t-reveal: 0.9s var(--ease-out-soft);

  --z-base:     1;
  --z-raised:   2;
  --z-sticky:   20;
  --z-utility:  25;
  --z-scrim:    30;
  --z-mega:     40;
  --z-header:   50;
  --z-floating: 60;
}

:root.is-scrolled {
  --header-h: var(--header-h-sm);
  --nav-h: var(--nav-h-sm);
}