/* fonts */
@font-face {
  font-family: "Vollkorn";
  src: url("fonts/Vollkorn.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/HankenGrotesk.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* colour: plaster whites, charcoal from the trowel and phone number on his sign, one olive gold */
  --color-paper:       oklch(96.5% 0.012 92);
  --color-paper-2:     oklch(93.4% 0.017 90);
  --color-paper-3:     oklch(89.6% 0.021 88);
  --color-ink:         oklch(25% 0.008 80);
  --color-ink-2:       oklch(42% 0.011 82);
  --color-rule:        oklch(85.5% 0.016 90);
  --color-rule-strong: oklch(70% 0.022 95);
  --color-gold:        oklch(50% 0.092 104);   /* the sign's lettering, dark enough to read as text */
  --color-gold-bright: oklch(70% 0.108 104);   /* rules and marks only, never text */
  --color-accent:      oklch(44% 0.080 106);
  --color-accent-deep: oklch(37% 0.068 106);
  --color-accent-ink:  oklch(97.5% 0.010 92);
  --color-field:       oklch(97.5% 0.010 92);   /* form inputs */
  --color-focus:       oklch(40% 0.105 112);
  --color-bar:         oklch(25% 0.008 80);
  --color-on-bar:      oklch(96.5% 0.012 92);
  --color-on-bar-2:    oklch(84% 0.014 90);
  /* the three stages of a wall */
  --color-wrap:        oklch(97.6% 0.006 240);  /* building paper */
  --color-wire:        oklch(74% 0.008 240);    /* lath wire */
  --color-brown:       oklch(46% 0.006 90);     /* the gray cement coat plasterers call the brown coat */
  --color-on-brown:    oklch(96.5% 0.012 92);
  --color-on-brown-2:  oklch(88% 0.010 90);
  --color-finish:      oklch(94.6% 0.015 92);   /* finish coat */
  --color-edge:        oklch(25% 0.008 80 / 0.1);  /* hairline round a photo */
  --mask-fade: linear-gradient(to bottom, oklch(0% 0 0) 0 40%, transparent 92%);
  --mask-fade-up: linear-gradient(to top, oklch(0% 0 0) 0 30%, transparent 70%);
  --color-error:       oklch(45% 0.150 28);

  /* texture: grain for the finish, float marks for the brown coat (alpha-only noise, drawn by the browser) */
  --tex-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-float: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .03' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* type */
  --font-display: "Vollkorn", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", -apple-system, system-ui, sans-serif;
  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-md: 1.25rem;
  --text-lg: 1.5rem;
  --text-xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.625rem);
  --text-display: clamp(2.375rem, 1.3rem + 5.2vw, 5rem);
  --text-num: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  --text-stage: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);
  --text-field: 1rem;            /* 16 px, so phones don't zoom the form */
  --text-list: 1.125rem;         /* service headings */
  --text-quote: 1.125rem;
  --text-quote-lead: clamp(1.3125rem, 1.05rem + 1.2vw, 1.875rem);
  --text-foot: clamp(1.75rem, 1.2rem + 2.7vw, 3.25rem);
  --text-brand: 1.1875rem;       /* the name in the header */
  --text-brand-lg: 1.375rem;
  --text-brand-sub: 0.6875rem;

  /* space: 4 pt scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1.125rem, 0.5rem + 2.6vw, 2.75rem);
  --page-max: 76rem;

  /* shape + rules */
  --radius-sm: 3px;
  --radius-img: 2px;
  --rule-hair: 1px;
  --rule-heavy: 2px;
  --rule-slab: 6px;
  --dock-clear: 5.25rem;   /* room under the footer for the phone dock */

  /* layers */
  --z-bar: 100;
  --z-sticky: 200;

  /* motion: buttons and the phone dock, nothing on scroll */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
}