/* Archbotics brand core. Shared by every page on archbotics.com.
   Identity lives here (tokens, type, the label voice, buttons, the mark);
   page composition lives in root.css and sivut.css. Two grounds, one accent.
   No external requests: fonts are self-hosted subsets under assets/fonts/. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geist-mono-var.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  /* Paper: the light ground (Archbotics Sivut, the notice, kiitos). */
  --paper: #F6F3EC;
  --paper-1: #EEEAE0;
  --paper-line: rgba(20, 18, 15, .10);
  --paper-line-2: rgba(20, 18, 15, .22);
  --paper-ink: #14120F;
  --paper-ink-body: #3A3631;
  --paper-ink-mute: #5E5850;
  /* #77706A measured 4.40:1 on --paper and 4.06:1 on --paper-1, so the documented floor
     ("dim is the floor, 4.6:1 on paper", BRAND.md 4) was not met and every metadata line set in
     it failed WCAG AA at small sizes on both light grounds. #6F6862 measures 4.94:1 on --paper
     and 4.56:1 on --paper-1. Same hue, same role, one proven bug fixed (2026-09-04). */
  --paper-ink-dim: #6F6862;

  /* Night: the dark ground (the company page). */
  --night: #0E0D0B;
  --night-1: #151310;
  --night-line: rgba(243, 239, 230, .10);
  --night-line-2: rgba(243, 239, 230, .22);
  --night-ink: #F3EFE6;
  --night-ink-body: #D6D0C4;
  --night-ink-mute: #A39C90;
  --night-ink-dim: #857E73;

  /* Ember: the one accent. It marks the threshold, the place where a human acts. */
  --ember: #C64518;        /* fills and large text on paper (white text on it passes AA) */
  --ember-ink: #B53E13;    /* small text on paper */
  --ember-light: #FF7A50;  /* marks and text on night */

  /* Type. Display and prose in one grotesk; every piece of chrome in the mono label voice. */
  --sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --label: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Scale: fluid, poster at desktop, clearly different at 390 and 1440. */
  --fs-hero: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem);
  --fs-h2: clamp(1.75rem, 1rem + 2.6vw, 3.25rem);
  --fs-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
  --fs-lede: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  --fs-body: 1rem;
  --fs-label: .75rem;

  /* Layout. The gutter is a constant at every breakpoint. */
  --max: 76rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --sec-pad: clamp(4.5rem, 10vw, 9rem);
  --head-gap: clamp(2rem, 4vw, 3.5rem);

  /* Radius inventory: 0, 2px, and 50% for dots. Nothing else. */
  --r: 2px;
}

/* A ground is chosen per page (or per band) by setting these five aliases. */
.ground-paper, [data-ground="paper"] {
  --bg: var(--paper); --bg-1: var(--paper-1);
  --line: var(--paper-line); --line-2: var(--paper-line-2);
  --ink: var(--paper-ink); --ink-body: var(--paper-ink-body);
  --ink-mute: var(--paper-ink-mute); --ink-dim: var(--paper-ink-dim);
  --accent: var(--ember); --accent-text: var(--ember-ink);
  color-scheme: light;
}
.ground-night, [data-ground="night"] {
  --bg: var(--night); --bg-1: var(--night-1);
  --line: var(--night-line); --line-2: var(--night-line-2);
  --ink: var(--night-ink); --ink-body: var(--night-ink-body);
  --ink-mute: var(--night-ink-mute); --ink-dim: var(--night-ink-dim);
  --accent: var(--ember-light); --accent-text: var(--ember-light);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
h1, h2, h3 { color: var(--ink); margin: 0; font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -.035em; }
h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.01em; font-weight: 600; }
p { margin: 0; }
.lede { font-size: var(--fs-lede); line-height: 1.55; max-width: 34em; }
.prose { max-width: 62ch; }

/* The label voice: every piece of chrome, never prose.
   Overflow stays visible and the line-height holds Finnish diacritics. */
.label {
  font-family: var(--label);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink-mute);
  overflow: visible;
}
.label.dim { color: var(--ink-dim); }
.label.accent { color: var(--accent-text); }

.container { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

/* Buttons: the ink block and the ghost. On paper the primary may be ember (one per view). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 2.9rem; padding: .7rem 1.35rem;
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
  text-decoration: none; border-radius: var(--r); cursor: pointer;
  border: 1px solid transparent; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-body); }
.btn-ember { background: var(--ember); color: #fff; }
.btn-ember:hover { background: var(--ember-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-mute); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* The mark: a rounded arch with the ember rung, the gate. currentColor draws the arch. */
.mark { width: 1.5rem; height: 1.5rem; color: var(--ink); flex: none; }
.mark .rung { stroke: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); text-decoration: none; font-weight: 700; letter-spacing: -.03em; font-size: 1.25rem; line-height: 1; }
.brand .product { color: var(--accent-text); font-weight: 500; }

.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--pad); top: var(--pad); background: var(--ink); color: var(--bg); padding: .5rem .75rem; z-index: 99; }

/* Motion: colour transitions on hover and focus, and nothing else. There is no
   scroll reveal on this site (removed 2026-09-04): a reader who taps a nav link
   must never land on a section that is still fading in. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}