/* ==========================================================================
   Nuttall Landscapes — design tokens
   Concept: "Set out". The identity borrows from the groundworker's setting-out
   kit: porcelain-slab greys, peat black, deep turf green and one loud accent —
   the fluorescent marking-paint green that sits in their logo.
   ========================================================================== */

:root {
  /* Ground — porcelain, slab, kandla */
  --paper:       #ece9e1;
  --paper-deep:  #e2ded4;
  --kandla:      #a9a598;

  /* Ink — peat, moss, turf */
  --ink:         #0e1410;
  --ink-2:       #172019;
  --ink-soft:    #4b5149;
  --moss:        #14301d;
  --turf:        #2f6b34;

  /* Marking paint — used as a fill or on dark, never as text on paper */
  --marker:      #7be23b;

  --on-dark:      #e9e7df;
  --on-dark-soft: rgba(233, 231, 223, 0.68);

  --line:       rgba(14, 20, 16, 0.18);
  --line-strong: rgba(14, 20, 16, 0.55);
  --line-dark:  rgba(233, 231, 223, 0.2);

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-voice:   "Newsreader", Georgia, "Times New Roman", serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --pad:    clamp(20px, 4.4vw, 64px);   /* page gutter */
  --gap:    clamp(16px, 2.2vw, 32px);   /* column gap */
  --rail:   0px;                        /* width of the levelling-staff rail (desktop only) */
  --head-h: 68px;
  --section: clamp(76px, 10.5vw, 156px);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Resin-bound aggregate — a fine fleck used on dark ground */
  --speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 11 -6.1'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  /* …and a dark fleck for porcelain ground */
  --speckle-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0.08  0 0 0 0 0.04  0 0 0 11 -6.4'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 1100px) {
  :root { --rail: 56px; --head-h: 76px; }
}