/* The shared base for every outblox.com page. The homepage set the system; this file carries it.

   One meaning per colour:
   purple = built. The word BUILDER, the purple bricks, things I built (case studies, Lead Engine,
            Brick), and the one button that builds. Never decoration, never a hover tint.
   white  = the statement and anything you can act on.
   grey   = everything else.

   Two type sizes per screen: a Big Shoulders statement sized to dominate, and small text.
   Bricolage is for the wordmark and small titles. JetBrains Mono is for small data and meta only.
   No glows, gradient blobs, dot grids or noise. */
:root {
  --bg: #0a0a0a;
  --bg-card: #111111;
  --bg-elevated: #161616;
  --purple-core: #7c3aed;
  --purple-bright: #8b5cf6;
  --purple-mid: #6d28d9;
  --purple-deep: #4c1d95;
  --purple-soft: #a78bfa;
  --purple-glow: #c4b5fd;
  --white: #ffffff;
  --text-primary: #f0edf4;
  --text-secondary: #9a90a8;
  --text-muted: #847a92;
  --line: rgba(240, 237, 244, .14);
  --line-dim: rgba(240, 237, 244, .07);

  /* The content frame: the same left edge as the homepage headline */
  --gutter: clamp(16px, 5vw, 80px);
  --frame: 1680px;

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --t-snap: 140ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: 400 1rem/1.55 "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
img { max-width: 100%; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  padding: 8px 14px; background: var(--text-primary); color: var(--bg);
  border-radius: 4px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; border-radius: 2px; }

/* ===== Frame ===== */
.frame { max-width: var(--frame); margin: 0 auto; padding-inline: var(--gutter); }

/* ===== Nav: canonical spec in CLAUDE.md. Solid black once you scroll, no blur. ===== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 3vw, 40px);
  pointer-events: none;
  transition: background-color 200ms var(--ease-out);
}
.nav > * { pointer-events: auto; }
.nav.solid { background: var(--bg); pointer-events: auto; border-bottom: 1px solid var(--line); }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mark img { width: 36px; height: 36px; }
.mark span { font: 800 1.25rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -0.02em; }
.nav nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav nav a { font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--text-secondary); }
.nav nav a:hover, .nav nav a[aria-current="page"] { color: var(--text-primary); }
.nav .nav-cta { color: var(--text-primary) !important; border-bottom: 2px solid var(--purple-core); padding-bottom: 2px; }
@media (max-width: 760px) {
  .nav nav a:not(.nav-cta) { display: none; }
}

/* ===== Type ===== */
/* The statement. Big Shoulders 900, uppercase, sized per page with --say so it dominates. */
.statement {
  margin: 0;
  font-family: "Big Shoulders", sans-serif;
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: var(--say, clamp(3.4rem, 9vw, 9rem));
  line-height: .86;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.statement .built { color: var(--purple-bright); }
/* data-fit: js/site.js sizes the lines to the box. Lines measure unwrapped, then hold unless they had to wrap. */
.statement.fitting > *, .statement.fitting .title-word { width: max-content; white-space: nowrap; }
.statement[data-fit]:not(.wraps) > *, .statement[data-fit]:not(.wraps) .title-word { white-space: nowrap; }

/* Small text: everything that is not the statement */
.lede { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--text-secondary); max-width: 52ch; text-wrap: pretty; }
.meta { font: 500 .8rem/1.5 "JetBrains Mono", monospace; color: var(--text-muted); }
.meta a { text-decoration: none; color: var(--text-secondary); }
.meta a:hover { color: var(--text-primary); }
.title-sm { margin: 0; font: 700 1.15rem/1.3 "Bricolage Grotesque", sans-serif; letter-spacing: -0.01em; color: var(--text-primary); }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 0; border-radius: 4px; padding: 15px 22px; font-weight: 600; font-size: 1rem; }
/* Purple: the one action that builds */
.btn-build {
  background: var(--purple-core); color: #fff;
  box-shadow: inset 0 -4px 0 var(--purple-deep);
  transition: transform var(--t-snap) var(--ease-out), box-shadow var(--t-snap) var(--ease-out), background-color var(--t-snap) var(--ease-out);
}
.btn-build:hover { background: var(--purple-bright); }
.btn-build:active { transform: translateY(3px); box-shadow: inset 0 -1px 0 var(--purple-deep); }
.link { background: none; border: 0; padding: 6px 2px; text-decoration: underline; text-underline-offset: 4px; color: var(--text-secondary); font-size: .92rem; }
.link:hover { color: var(--text-primary); }

/* ===== The wall: purple clutch bricks in three.js (js/wall.js). Drop in on first view, lift on
   hover, open on click. The real links stay in the DOM; without WebGL they show as they are. ===== */
.wall { position: relative; height: var(--wall-h, clamp(520px, 80vh, 820px)); }
.wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.wall-links { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 12px; }
.wall-links a { display: block; padding: 22px 24px; border-radius: 6px; background: var(--purple-core); color: #fff; text-decoration: none; }
.wall-links strong { display: block; font: 900 2.4rem/1 "Big Shoulders", sans-serif; text-transform: uppercase; margin-bottom: 6px; }
.wall.live .wall-links { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }

/* ===== Footer ===== */
.foot {
  max-width: var(--frame); margin: 0 auto; padding: 72px var(--gutter) 40px;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  font: 500 .8rem/1 "JetBrains Mono", monospace; color: var(--text-muted);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  /* 0s, not 1ms: a 1ms transition on every property makes measured sizes lag a frame (js/site.js fit) */
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  html { scroll-behavior: auto !important; }
}