/* Ink Atelier — shared design tokens + motifs, linked from all 7 pages (no build step, same pattern as fonts.css). */

:root {
  /* spacing scale — only the steps actually used across the site */
  --space-4: 24px;
  --space-6: 48px;
  --space-8: 96px;

  --hairline: 1px solid rgba(10,10,10,0.12);
  --hairline-dark: 1px solid rgba(250,248,245,0.1);
  --grain-opacity-light: 0.045;
}

/* Noise texture overlay — global, low-opacity, works on both light and dark sections */
body::before {
  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='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9997;
  opacity: 0.5;
}

/* Warm paper-grain scoped to light sections — sits under content, multiplies onto --paper/--cream.
   Deliberately on ::after, not ::before: .booking-section already owns a ::before for its
   decorative rust gradient line, and a second pseudo-element on the same side would collide
   with it (properties merge onto one rendered box, silently breaking one or the other).
   Keep any future full-bleed section decoration on ::before and grain on ::after. */
.paper-grain { position: relative; }
.paper-grain::after {
  content: '';
  position: absolute;
  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.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: var(--grain-opacity-light);
  pointer-events: none;
  z-index: 1;
}
.paper-grain > * { position: relative; z-index: 2; }

/* Hairline section divider — hand-drawn single-stroke line, reused across sections */
.needle-line {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0 auto;
}
.needle-line path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0.35;
}
.needle-line--ink { color: var(--ink); }
.needle-line--paper { color: var(--paper); }