/* ============================================================
   UNFO · UNFORGETTABLE — Design tokens
   Cinematic production house. Brand manual derived.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
  /* —— Core palette (from manual) —— */
  --red:        #ea0707;   /* the pulse */
  --red-bright: #fa4040;
  --red-soft:   #f55f62;
  --red-deep:   #783d3d;
  --red-ash:    #4d3434;

  --white:      #f7f7f7;   /* technical white */
  --black:      #110101;   /* deep cinematic black */
  --void:       #050000;   /* pure void for letterbox / nav */

  /* —— Functional —— */
  --ink:        var(--white);
  --ink-dim:    rgba(247,247,247,0.62);
  --ink-faint:  rgba(247,247,247,0.34);
  --line:       rgba(247,247,247,0.12);
  --line-soft:  rgba(247,247,247,0.07);
  --surface:    #0e0303;
  --surface-2:  #160606;
  --accent:     var(--red);
  --accent-glow: rgba(234,7,7,0.55);

  /* —— Type —— */
  --display: 'Geist', system-ui, sans-serif;
  --body:    'Montserrat', system-ui, sans-serif;

  /* fluid type scale — cinematic, oversized */
  --fs-display: clamp(3.4rem, 13.5vw, 14rem);
  --fs-h1:      clamp(2.6rem, 7vw, 6.5rem);
  --fs-h2:      clamp(2rem, 4.6vw, 4.2rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.4rem);
  --fs-sub:     clamp(1.05rem, 1.5vw, 1.5rem);
  --fs-body:    clamp(1rem, 1.15vw, 1.18rem);
  --fs-small:   0.82rem;
  --fs-micro:   0.68rem;

  /* —— Spacing / rhythm —— */
  --pad-x: clamp(1.25rem, 5vw, 6rem);
  --section-y: clamp(5rem, 11vw, 11rem);
  --maxw: 1680px;

  /* —— Motion —— */
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);

  /* accent intensity (driven by tweaks) */
  --accent-amt: 1;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--black);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--red); color: var(--white); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* utility */
.u-mono {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: var(--fs-micro);
}
.u-red { color: var(--red); }
.u-italic { font-style: italic; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad-x); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}