/* ============================================================
   RESET.CSS — Global variables, reset, base typography
   VM Branding House
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --c-black:        #000000;
  --c-charcoal:     #111111;
  --c-dark:         #1a1a1a;
  --c-white:        #ffffff;
  --c-soft-white:   #f5f5f2;
  --c-light:        #f1f1f1;
  --c-grey:         #eeeeef;
  --c-mid:          #b8b8b8;
  --c-chrome:       #d8d8d8;
  --c-silver:       #c0c0c0;
  --c-accent:       #8fa36f;
  --c-overlay:      rgba(0, 0, 0, 0.55);

  /* ── Typography ── */
  --f-heading:    'Montserrat', sans-serif;
  --f-editorial:  'Big Shoulders Display', sans-serif;

  /* ── Fluid Type Scale ── */
  --t-xxs:    clamp(0.625rem, 0.8vw,  0.75rem);
  --t-xs:     clamp(0.75rem,  1vw,    0.875rem);
  --t-sm:     clamp(0.875rem, 1.2vw,  1rem);
  --t-base:   clamp(1rem,     1.4vw,  1.1rem);
  --t-md:     clamp(1.125rem, 1.8vw,  1.375rem);
  --t-lg:     clamp(1.5rem,   2.5vw,  2rem);
  --t-xl:     clamp(2rem,     3.5vw,  2.75rem);
  --t-2xl:    clamp(2.5rem,   5vw,    4rem);
  --t-3xl:    clamp(3.5rem,   6.5vw,  5.5rem);
  --t-hero:   clamp(3rem,     7vw,    6.5rem);

  /* ── Editorial type (condensed) ── */
  --t-ed-sm:  clamp(1.5rem,   2.5vw,  2.25rem);
  --t-ed-md:  clamp(2rem,     3.5vw,  3.25rem);
  --t-ed-lg:  clamp(2.5rem,   5vw,    4.5rem);

  /* ── Letter Spacing ── */
  --ls-tight:   -0.025em;
  --ls-normal:   0;
  --ls-sm:       0.04em;
  --ls-md:       0.1em;
  --ls-lg:       0.18em;
  --ls-xl:       0.28em;

  /* ── Line Height ── */
  --lh-tight:   1.08;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.75;
  --lh-loose:   2;

  /* ── Spacing ── */
  --sp-1:   0.25rem;
  --sp-2:   0.5rem;
  --sp-3:   0.75rem;
  --sp-4:   1rem;
  --sp-6:   1.5rem;
  --sp-8:   2rem;
  --sp-12:  3rem;
  --sp-16:  4rem;
  --sp-20:  5rem;
  --sp-24:  6rem;
  --sp-32:  8rem;
  --sp-40: 10rem;

  /* ── Layout ── */
  --container:      1360px;
  --container-sm:   900px;
  --nav-h:          300px;   /* desktop: auto-height driven by logo size */
  --band:           3px;

  /* ── Borders ── */
  --b-black:   1px solid var(--c-charcoal);
  --b-chrome:  1px solid var(--c-chrome);
  --b-light:   1px solid var(--c-grey);
  --b-white:   1px solid rgba(255, 255, 255, 0.12);

  /* ── Shadows ── */
  --sh-xs:   0 2px 8px rgba(0,0,0,0.06);
  --sh-sm:   0 4px 20px rgba(0,0,0,0.09);
  --sh-md:   0 8px 40px rgba(0,0,0,0.13);
  --sh-lg:   0 20px 60px rgba(0,0,0,0.18);
  --sh-xl:   0 30px 80px rgba(0,0,0,0.25);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --tr-fast:  180ms var(--ease-in-out);
  --tr-base:  360ms var(--ease-out);
  --tr-slow:  640ms var(--ease-out);
  --tr-long:  900ms var(--ease-out);

  /* ── Z-index ── */
  --z-canvas:  -1;
  --z-base:     1;
  --z-content: 10;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;
}

/* ── Hard Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
  /*
   * The reveal animations slide elements in from ±24px, which briefly
   * pokes past the viewport on narrow screens. `clip` contains that
   * without creating a scroll container, so the fixed header and the
   * hero parallax keep working.
   */
  overflow-x: clip;
}

body {
  font-family: var(--f-heading);
  font-size: var(--t-base);
  color: var(--c-charcoal);
  background-color: var(--c-soft-white); /* light base — Three.js removed, chrome image is hero bg */
  line-height: var(--lh-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--tr-fast);
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  appearance: none;
  -webkit-appearance: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

p { line-height: var(--lh-relaxed); }

::selection {
  background: var(--c-charcoal);
  color: var(--c-soft-white);
}

/* ── Utility: visually hidden ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}