:root{
  /* ── palette ── */
  --paper:      #f1f0ec;
  --paper-line: #d9d8d2;
  --ink:        #16161a;
  --ink-soft:   #4a4a52;
  --ink-faint:  #8b8b93;
  --dark:       #17171a;
  --dark-2:     #101012;
  --hl:         #f3e849;   /* highlighter yellow */
  --hl-deep:    #e5d92b;
  --white:      #ffffff;

  /* ── type ── */
  --f-display: "Playfair Display", Georgia, serif;
  --f-hand:    "Caveat", cursive;
  --f-heavy:   "Archivo Black", Impact, sans-serif;
  --f-script:  "Yellowtail", cursive;
  --f-body:    "Inter", system-ui, sans-serif;

  /* fluid scale */
  --t-hero:  clamp(2rem, 5.2vw, 4.4rem);
  --t-name:  clamp(2.2rem, 4.4vw, 3.9rem);
  --t-huge:  clamp(3.6rem, 11vw, 9rem);
  --t-num:   clamp(5rem, 14vw, 12rem);
  --t-tag:   clamp(1rem, 1.5vw, 1.32rem);
  --t-body:  clamp(0.82rem, 1vw, 0.95rem);
  --t-small: 0.72rem;

  /* ── space ── */
  --gap:   clamp(1.2rem, 2.6vw, 2.6rem);
  --pad-x: clamp(1.1rem, 5vw, 5.5rem);
  --pad-y: clamp(3rem, 7vw, 6rem);
  --maxw:  1280px;

  /* ── motion ── */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .8s;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: .01ms; }
}