/* ============================================================
   V1 "The Front Page" — WIREFRAME MODE
   Loaded after styles.css. Strips brand typography, colour,
   stickers and elevation so only the layout speaks.
   ============================================================ */

:root {
  /* ---- Type: one standard family everywhere ---- */
  --ks-font-display: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ks-font-body: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ks-font-mono: system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ks-display-tracking: -0.01em;
  --ks-display-leading: 1.08;

  /* ---- Colour: grayscale mapping that preserves light/dark roles ----
     Surfaces that carried white text (blue, ink) become dark grays;
     every other brand surface becomes a light gray step. */
  --ks-peach: #ffffff;
  --ks-haze: #f1f1f1;
  --ks-paper: #ffffff;
  --ks-ink: #1c1c1c;
  --ks-blue: #4d4d4d;
  --ks-flame: #d8d8d8;
  --ks-sunflower: #ececec;
  --ks-pulse: #e3e3e3;
  --ks-moss: #cfcfcf;
  --ks-spark: #e8e8e8;
  --ks-disabled-fill: #eeeeee;

  --ks-tint-flame: #f3f3f3;
  --ks-tint-blue: #f3f3f3;
  --ks-tint-moss: #f3f3f3;
  --ks-tint-sunflower: #f7f7f7;
  --ks-tint-pulse: #f7f7f7;
  --ks-tint-spark: #f7f7f7;
  --ks-flame-tint: rgba(0, 0, 0, 0.06);
  --ks-blue-tint: rgba(0, 0, 0, 0.12);

  /* ---- Elevation & outline: flat wireframe boxes ---- */
  --ks-border: 1px solid #b9b9b9;
  --ks-border-width: 1px;
  --ks-shadow-sm: none;
  --ks-shadow-button: none;
  --ks-shadow-card: none;
  --ks-shadow-hover: none;
  --ks-shadow-soft: none;
  --ks-focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #1c1c1c;
  --ks-focus-ring-on-color: 0 0 0 2px #ffffff, 0 0 0 4px #1c1c1c;

  /* ---- Shape: quiet radii (circles set with 50% stay circles) ---- */
  --ks-radius-sm: 6px;
  --ks-radius-md: 6px;
  --ks-radius-lg: 8px;
  --ks-radius-xl: 8px;
  --ks-radius-pill: 8px;
}

/* Neutralise brand type treatments set with hardcoded values */
*,
*::before,
*::after {
  text-transform: none !important;
  letter-spacing: normal !important;
}

h1, h2, h3, h4,
.ks-display,
[class*='title'],
[class*='headline'],
[class*='wordmark'] {
  line-height: 1.12 !important;
  font-weight: 700 !important;
}

/* Hand-placed sticker rotation is branding — square it up */
.ks-tag,
[style*='rotate'] {
  transform: none !important;
}

/* Photography reads as brand: keep the boxes, drop the colour */
img {
  filter: grayscale(1) contrast(0.92);
}

/* Hard offset shadows are gone; keep hover/press feedback minimal */
.ks-btn:hover,
.ks-btn:active {
  transform: none;
}