/* Kumo Signal v1.0 · @font-face + glitch helpers
   Caps-only display face. Use from 24px up; it is sharpest at multiples of 8px cap height. */
@font-face {
  font-family: 'Kumo Signal';
  src: url('KumoSignal-Regular.woff2') format('woff2'),
       url('KumoSignal-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.ks { font-family: 'Kumo Signal', 'Archivo', sans-serif; font-weight: 400; letter-spacing: 0; line-height: 1.25; font-kerning: normal; }

/* Whole-word styles */
.ks-hollow   { font-feature-settings: "ss01" 1; }   /* flooded bowls open up */
.ks-lowres   { font-feature-settings: "ss02" 1; }   /* smooth letters fall onto the grid */
.ks-hires    { font-feature-settings: "ss03" 1; }   /* pixel letters get smooth */

/* Per-letter glitches: wrap single letters in <span class="g-lo"> etc. (site.js can do this at random) */
.g-hollow { font-feature-settings: "ss01" 1; }
.g-lo     { font-feature-settings: "ss02" 1; }
.g-hi     { font-feature-settings: "ss03" 1; }
.g-slice  { display: inline-block; position: relative; color: transparent; }
.g-slice::before, .g-slice::after { content: attr(data-ch); position: absolute; left: 0; top: 0; color: var(--fg, currentColor); }
.g-slice::before { clip-path: inset(0 0 55% 0); }
.g-slice::after  { clip-path: inset(45% 0 0 0); transform: translateX(.06em); color: var(--accent, #FF5A1F); }