/* ═══════════════════════════════════════════
   BASE — Reset, Variables, Fonts
═══════════════════════════════════════════ */

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

:root {
  /* Palette */
  --night:     #080608;
  --deep:      #100c08;
  --parch:     #f5ebe0;
  --cream:     #fdf6ec;
  --linen:     #ede0cd;
  --terra:     #c1674f;
  --terra2:    #d4856e;
  --terra3:    #e8b09a;
  --gold:      #c9a84c;
  --gold2:     #e8c96e;
  --gold3:     #f5e4a8;
  --mocha:     #3d2b1f;
  --walnut:    #5c3d2e;
  --dust:      #8a6a5a;

  /* Typography scale */
  --fs-xs:     clamp(0.55rem, 1.5vw, 0.68rem);
  --fs-sm:     clamp(0.8rem,  2vw,   1rem);
  --fs-md:     clamp(1rem,    2.5vw, 1.25rem);
  --fs-lg:     clamp(1.5rem,  4vw,   2.2rem);
  --fs-xl:     clamp(2rem,    6vw,   3.5rem);
  --fs-2xl:    clamp(3rem,    10vw,  6rem);
  --fs-3xl:    clamp(4rem,    16vw,  10rem);
  --fs-arabic: clamp(1.8rem,  6vw,   3.2rem);

  /* Timing */
  --ease-silk: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-drop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--night);
  color: var(--cream);
  font-family: 'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  touch-action: none;
  cursor: none;
}

/* Paper grain overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.032;
  pointer-events: none;
  z-index: 9995;
  mix-blend-mode: overlay;
}

/* Scrollbar hidden */
::-webkit-scrollbar { display: none; }

/* Custom cursor */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--terra);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  mix-blend-mode: multiply;
}
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(193, 103, 79, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.35s, height 0.35s, border-color 0.3s;
}
.cursor.grab { width: 18px; height: 18px; background: var(--gold); }
.cursor-ring.grab { width: 56px; height: 56px; border-color: var(--gold); }

@media (max-width: 768px) {
  .cursor, .cursor-ring { display: none; }
  body { cursor: auto; touch-action: none; }
}

/* Full screen layer base */
.layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 28px;
  pointer-events: none;
  z-index: 10;
}
.layer.interactive { pointer-events: auto; }

/* Utility */
.hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.no-events { pointer-events: none !important; }