/* ============================================================
   okeke.us — Quiet Authority
   Editorial restraint. Ink on warm paper. Asymmetric grid.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Color — warm-paper background, ink foreground, single deep accent */
  --color-ink:        #0E0E0C;   /* near-black with warmth */
  --color-ink-soft:   #2A2A26;
  --color-mute:       #6B6A63;
  --color-mute-soft:  #ABA89D;
  --color-paper:      #FAF8F2;   /* warm off-white */
  --color-paper-edge: #F1EEE4;
  --color-rule:       #E5E1D3;   /* subtle warm border */
  --color-accent:     #B85C1F;   /* deep amber — single hero color */
  --color-accent-ink: #6E3711;
  --color-success:    #4C6B3A;
  --color-error:      #A33A2A;

  /* Type — Geist throughout, mono for small marks */
  --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Tracking & weight — Geist runs tight */
  --tracking-tight: -0.025em;
  --tracking-snug:  -0.01em;
  --tracking-flat:  0;
  --tracking-wide:  0.08em;
  --tracking-edge:  0.18em;     /* for edge-stack micro-caps */

  /* Type scale — editorial, opinionated */
  --type-eyebrow: 0.6875rem;    /* 11px */
  --type-meta:    0.8125rem;    /* 13px */
  --type-body:    1rem;
  --type-lead:    1.1875rem;    /* 19px */
  --type-h3:      1.5rem;
  --type-h2:      clamp(2rem, 4vw, 3rem);
  --type-h1:      clamp(2.75rem, 7vw, 5rem);

  /* Space — generous */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* Radius — almost-none, hard edges */
  --r-tight: 2px;
  --r-soft:  4px;
  --r-pill:  999px;

  /* Rule weight */
  --rule-hair: 0.5px;
  --rule-thin: 1px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.55;
  color: var(--color-ink);
  background: var(--color-paper);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial layout primitive — content rail + outer edge */
.rail {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s-6);
  position: relative;
}
@media (min-width: 900px) {
  .rail { padding: 0 var(--s-8); }
}

/* Edge-stack labels — vertical micro-caps anchored to left edge.
   This is the signature spatial move for okeke.us. */
.edge-stack {
  position: absolute;
  left: var(--s-4);
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--tracking-edge);
  color: var(--color-mute-soft);
  text-transform: uppercase;
}
@media (max-width: 899px) { .edge-stack { display: none; } }

/* Eyebrow — small label above section headings */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--type-eyebrow);
  letter-spacing: var(--tracking-edge);
  color: var(--color-accent-ink);
  text-transform: uppercase;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--color-accent);
}

/* Typography */
.display {
  font-family: var(--font-display);
  font-size: var(--type-h1);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  color: var(--color-ink);
  margin: 0;
}
.display em {
  font-style: normal;
  color: var(--color-accent);
  font-weight: 700;
}
h2.section-title {
  font-size: var(--type-h2);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  margin: 0;
}
.lead {
  font-size: var(--type-lead);
  line-height: 1.55;
  color: var(--color-ink-soft);
  max-width: 56ch;
  margin: 0;
  font-weight: 400;
}

/* Buttons — sharp, restrained, no gradient */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-tight);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.btn-primary:hover { background: var(--color-accent-ink); border-color: var(--color-accent-ink); }
.btn-ghost {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.btn-ghost:hover { border-color: var(--color-ink); }
.btn svg { width: 16px; height: 16px; }

/* Cards — hairline border, no shadow, single accent line */
.card {
  background: var(--color-paper);
  border: 1px solid var(--color-rule);
  border-radius: var(--r-soft);
  padding: var(--s-6);
  position: relative;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 36px;
  height: 2px;
  background: var(--color-accent);
}

/* Icon language — 1.5px Lucide stroke, ink color */
.icon {
  width: 22px;
  height: 22px;
  stroke: var(--color-ink);
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Horizontal rule — hairline warm */
.rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}

/* Meta row — small key-value bands */
.meta {
  display: flex;
  gap: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--type-meta);
  letter-spacing: var(--tracking-snug);
  color: var(--color-mute);
}
.meta-key { color: var(--color-mute-soft); margin-right: var(--s-2); }
.meta-val { color: var(--color-ink); }

</invoke>