/* Cairn site design system.
   Layout concept: a survey sheet. Content sits on map paper over live contour lines; every layer of
   Cairn keeps the colour it has in the product (contour brown = code, revision purple = specs,
   ochre = timeline, woodland green = memory and savings, water blue = agent sessions, road red = risk). */

:root {
  --paper: #F4F5F0;
  --sheet: #FBFBF8;
  --raised: #FFFFFF;
  --ink: #1F2328;
  --ink-2: #464B45;
  --muted: #6B7068;
  --rule: #DADCD2;
  --rule-strong: #C6C9BD;
  --faint: #E9EAE3;
  --contour: #D9DCCF;
  --contour-index: #C2C6B6;

  --code: #9A6434;
  --spec: #6E4A96;
  --time: #8C7424;
  --memory: #4F7F3F;
  --agent: #2F6FA3;
  --risk: #B8433A;
  --code-wash: #F1E7DC;
  --spec-wash: #ECE5F3;
  --time-wash: #F1ECD8;
  --memory-wash: #E6EEDF;
  --agent-wash: #E3ECF4;
  --risk-wash: #F5E3E0;

  --term: #1B201C;
  --term-ink: #DCE2D8;
  --term-dim: #8C9789;
  --on-ink: #F4F5F0;

  --display: "Overpass", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: "Overpass", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Overpass Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-xs: 0.75rem; --t-s: 0.875rem; --t-m: 1rem; --t-l: 1.125rem; --t-xl: 1.375rem;
  --t-2xl: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  --t-3xl: clamp(2.6rem, 1.4rem + 5.2vw, 5.4rem);

  --r-s: 4px; --r-m: 8px; --r-l: 14px;
  --shadow-pop: 0 24px 60px -20px rgba(31, 35, 40, .32), 0 2px 6px rgba(31, 35, 40, .06);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1180px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121613; --sheet: #181D19; --raised: #1F2520; --ink: #E8EAE3; --ink-2: #C2C6BC; --muted: #939888;
    --rule: #2B322C; --rule-strong: #3B433C; --faint: #202621; --contour: #232A24; --contour-index: #344036;
    --code: #D69E68; --spec: #B597DD; --time: #D2B858; --memory: #8EC078; --agent: #72AADA; --risk: #E5806F;
    --code-wash: #2C241C; --spec-wash: #261F30; --time-wash: #2A2616; --memory-wash: #1E2A1C; --agent-wash: #1B2833; --risk-wash: #2F1E1B;
    --term: #0C0F0D; --term-ink: #DCE2D8; --term-dim: #7E8A7B; --on-ink: #121613;
    --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121613; --sheet: #181D19; --raised: #1F2520; --ink: #E8EAE3; --ink-2: #C2C6BC; --muted: #939888;
  --rule: #2B322C; --rule-strong: #3B433C; --faint: #202621; --contour: #232A24; --contour-index: #344036;
  --code: #D69E68; --spec: #B597DD; --time: #D2B858; --memory: #8EC078; --agent: #72AADA; --risk: #E5806F;
  --code-wash: #2C241C; --spec-wash: #261F30; --time-wash: #2A2616; --memory-wash: #1E2A1C; --agent-wash: #1B2833; --risk-wash: #2F1E1B;
  --term: #0C0F0D; --term-ink: #DCE2D8; --term-dim: #7E8A7B; --on-ink: #121613;
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--t-m)/1.6 var(--ui);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--display); text-wrap: balance; color: var(--ink); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
code, kbd, pre { font-family: var(--mono); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--agent); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--memory-wash); color: var(--ink); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.num { font-variant-numeric: tabular-nums; }
.label {
  font: 600 var(--t-xs)/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.layer-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }

/* layer colour hooks */
.l-code { --c: var(--code); --w: var(--code-wash); }
.l-spec { --c: var(--spec); --w: var(--spec-wash); }
.l-time { --c: var(--time); --w: var(--time-wash); }
.l-memory { --c: var(--memory); --w: var(--memory-wash); }
.l-agent { --c: var(--agent); --w: var(--agent-wash); }
.l-risk { --c: var(--risk); --w: var(--risk-wash); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 1.25rem/1 var(--display); letter-spacing: -.02em; }
.brand svg { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 22px; margin-left: 8px; }
.nav-links a { text-decoration: none; color: var(--ink-2); font-size: var(--t-s); font-weight: 500; }
.nav-links a:hover { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding-inline: 18px;
  border-radius: var(--r-m); border: 1px solid var(--rule-strong); background: var(--raised); color: var(--ink);
  font: 600 var(--t-s)/1 var(--ui); text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s, background .2s;
}
.btn:hover { border-color: var(--ink-2); transform: translateY(-1px); }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn-primary:hover { border-color: var(--ink); }
.btn-sm { height: 36px; padding-inline: 14px; }
.btn svg { width: 16px; height: 16px; }

/* ---------- install chip ---------- */
.install {
  display: flex; align-items: stretch; max-width: 100%; border-radius: var(--r-m); overflow: hidden;
  border: 1px solid var(--rule-strong); background: var(--term); color: var(--term-ink);
}
.install code { flex: 1; min-width: 0; padding: 13px 16px; font-size: var(--t-s); white-space: nowrap; overflow-x: auto; }
.install code .p { color: var(--term-dim); user-select: none; }
.install button {
  flex: none; border: 0; border-left: 1px solid #2E352F; background: transparent; color: var(--term-ink);
  padding-inline: 14px; cursor: pointer; font: 600 var(--t-xs)/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.install button:hover { background: #242B25; }

/* ---------- sections ---------- */
section { position: relative; }
.sec { padding-block: clamp(72px, 10vw, 128px); }
.sec-head { display: grid; gap: 14px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.sec-head h2 { font-size: var(--t-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; }
.sec-head p { color: var(--ink-2); font-size: var(--t-l); max-width: 62ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--c, var(--muted)); }
.eyebrow .label { color: inherit; }

/* ---------- terminal ---------- */
.term {
  background: var(--term); color: var(--term-ink); border-radius: var(--r-l); box-shadow: var(--shadow-pop);
  font: 400 0.8125rem/1.65 var(--mono); overflow: hidden; min-width: 0;
}
.term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #262D27; color: var(--term-dim); font-size: var(--t-xs); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2E352F; display: block; }
.term-bar span { margin-left: 6px; }
.term pre { margin: 0; padding: 16px 18px 20px; overflow-x: auto; white-space: pre; }
.t-dim { color: var(--term-dim); }
.t-code { color: #D69E68; } .t-spec { color: #B597DD; } .t-time { color: #D2B858; }
.t-mem { color: #8EC078; } .t-agent { color: #72AADA; } .t-risk { color: #E5806F; }
.t-b { color: #F4F5F0; font-weight: 600; }
.t-tag { display: inline-block; padding: 0 6px; border-radius: 3px; background: #E5806F; color: #1B201C; font-weight: 700; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); padding-block: 40px 56px; color: var(--muted); font-size: var(--t-s); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }

/* ---------- topo canvas ---------- */
.topo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}