/* ============================================================
   Latchpoint design system
   Mark:   Interlock — two hooks that reach into each other and stop.
   Colour: Cold Steel + Vermilion. The accent is scarce on purpose:
           it means "act here", never decoration.
   Type:   IBM Plex — engineered, self-hosted, 75KB for the whole system.
   ============================================================ */

@font-face {
  font-family: 'Plex Sans';
  src: url('/fonts/IBMPlexSans-var.woff2') format('woff2-variations'),
       url('/fonts/IBMPlexSans-var.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/fonts/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* Cold neutral base */
  --bg:        #07090D;
  --surface:   #111621;
  --surface-2: #171E2B;
  --line:      #232C3B;
  --line-2:    #2B3546;

  /* Text */
  --text:  #DFE5EE;
  --muted: #8F99AB;
  --faint: #5B6478;

  /* The one hot colour. Used sparingly. */
  --signal:      #FF5340;
  --signal-soft: rgba(255, 83, 64, .12);
  --signal-line: rgba(255, 83, 64, .28);

  --sans: 'Plex Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — 1.3 ratio between steps, so hierarchy is unmistakable */
  --t-display: clamp(38px, 6.4vw, 62px);
  --t-h1:      clamp(28px, 4vw, 38px);
  --t-h2:      24px;
  --t-h3:      17px;
  /* The lede must separate clearly from body. At 18px it was only 1.12x — read as
     "slightly bigger paragraph" rather than a distinct step. 20px gives a clean 1.25x. */
  --t-lede:    20px;
  --t-body:    16px;
  --t-sm:      14px;
  --t-xs:      12px;

  --ease: cubic-bezier(.22, .68, .28, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal); color: #fff; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -.03em; font-weight: 600; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); letter-spacing: -.025em; }
h3 { font-size: var(--t-h3); letter-spacing: -.015em; font-weight: 600; }

a { color: var(--text); text-decoration: none; }
code, pre, .mono { font-family: var(--mono); font-variant-ligatures: none; }

.wrap { max-width: 940px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 720px; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7, 9, 13, .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: 62px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand svg { width: 26px; height: 26px; flex: none; }
.brand b { font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.nav { display: flex; gap: 26px; font-size: var(--t-sm); }
.nav a { color: var(--muted); transition: color .18s var(--ease); }
.nav a:hover { color: var(--text); }

/* ---------- eyebrow ---------- */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--t-sm); font-weight: 550;
  padding: 11px 20px; border-radius: 8px;
  border: 1px solid transparent;
  transition: transform .16s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--signal); color: #fff; }
.btn-primary:hover { background: #ff6a59; }
.btn-ghost { border-color: var(--line-2); color: var(--text); }
.btn-ghost:hover { border-color: var(--faint); background: var(--surface); }

/* ---------- code ---------- */
pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px 17px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
pre .k { color: var(--signal); }
pre .c { color: var(--faint); }
p code, li code, td code {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 6px; font-size: 13px; color: var(--text);
}

/* ---------- callouts ----------
   Two kinds, and the difference matters. Vermilion is reserved for things that
   will break if ignored. A reassurance dressed as a warning teaches people to
   ignore warnings. */
.callout {
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 15px;
}
/* .note — a fact worth noticing. Neutral. */
.callout {
  background: var(--surface);
  border: 1px solid var(--line-2);
}
.callout strong { color: var(--text); font-weight: 600; }

/* .warn — ignore this and your submits fail. */
.callout.warn {
  background: var(--signal-soft);
  border-color: var(--signal-line);
}
.callout.warn strong { color: var(--signal); }

/* ---------- footer ---------- */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 88px; padding: 30px 0 46px;
  color: var(--faint); font-size: var(--t-sm);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
.site-foot a { color: var(--muted); }
.site-foot a:hover { color: var(--text); }

/* ---------- motion ----------
   One deliberate entrance, then stillness. The mark animates because the
   animation IS the product: two systems approach and stop without touching. */
@keyframes hook-a { from { transform: translate(-14px, -14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes hook-b { from { transform: translate( 14px,  14px); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes rise    { from { transform: translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }

.hero-mark .h-a { animation: hook-a .78s var(--ease) both .10s; }
.hero-mark .h-b { animation: hook-b .78s var(--ease) both .26s; }

.reveal { animation: rise .7s var(--ease) both; }
.d1 { animation-delay: .16s } .d2 { animation-delay: .26s }
.d3 { animation-delay: .36s } .d4 { animation-delay: .46s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}