/* ─────────────────────────────────────────────────────────
   venode — light editorial brand tokens · v1.2
   Wordmark: Inter Display Black 900 + burgundy o (Bold 700) + burgundy underscore
   Body: Lora · Mono: Geist Mono / JetBrains Mono
   ───────────────────────────────────────────────────────── */

/* ── Self-hosted Inter Display (not on Google Fonts) ── */
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/InterDisplay-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/InterDisplay-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/InterDisplay-Black.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* ── Base / paper ── */
  --paper:           #FAF9F5;
  --paper-raised:    #ffffff;
  --paper-sunk:      #E8E5DA;

  /* ── Ink ── */
  --ink-default:     #141412;
  --ink-muted:       #5A5854;
  --ink-subtle:      #9A9893;
  --ink-faint:       #b0aea5;

  /* ── Hairlines ── */
  --hairline:        rgba(20, 20, 18, 0.08);
  --hairline-strong: rgba(20, 20, 18, 0.16);

  /* ── Accents ── */
  --accent-orange:   #8E2436;
  --accent-blue:     #6a9bcc;
  --accent-green:    #788c5d;
  --accent-dim:      #B85F3F;

  /* Default accent (orange = primary) */
  --accent:          var(--accent-orange);

  /* ── Section accent map ── */
  --c-security:      var(--accent-orange);
  --c-ops:           var(--accent-blue);
  --c-infra:         var(--accent-blue);
  --c-networks:      var(--accent-blue);
  --c-ai:            var(--accent-green);
  --c-llm:           var(--accent-green);
  --c-models:        var(--accent-green);
  --c-tools:         var(--ink-default);
  --c-notes:         var(--ink-default);

  /* ── Typography ── */
  --font-wordmark:   'Inter Display', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:    'Poppins', 'Arial', system-ui, sans-serif;
  --font-body:       'Lora', 'Georgia', 'Times New Roman', serif;
  --font-mono:       'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  --tracking-tight:  -0.02em;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.10em;

  /* ── Scale (editorial) ── */
  --t-xxs:  11px;
  --t-xs:   12px;
  --t-sm:   14px;
  --t-md:   16px;
  --t-lg:   18px;
  --t-xl:   22px;
  --t-2xl:  28px;
  --t-3xl:  36px;
  --t-4xl:  48px;
  --t-5xl:  64px;
  --t-6xl:  84px;
  --t-7xl:  120px;

  /* ── Layout ── */
  --col-gap:         32px;
  --row-gap:         48px;
  --content-max:     1320px;

  /* ── Motion ── */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        160ms;
  --dur-med:         320ms;
  --dur-slow:        640ms;
}

/* ── Base reset / body ── */
html, body {
  background: var(--paper);
  color: var(--ink-default);
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
}

/* ── Type defaults ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-default);
  margin: 0;
}

p { margin: 0; line-height: 1.6; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* No italic — em is a semantic accent, not a style */
em, i, cite { font-style: normal; }

/* Selection */
::selection {
  background: var(--accent-orange);
  color: var(--paper);
}

/* Mono utility */
.mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-size: var(--t-xxs);
}

/* ── Wordmark · v1.2 ──
   Inter Display Black 900 + burgundy 'o' (Bold 700) + burgundy underscore.
   Markup pattern (every page):
     <span class="wm">ven<span class="o">o</span>de<span class="_"></span></span>
   The .wordmark class is an alias kept for backwards compat across pages.
*/
.wm,
.wordmark {
  font-family: var(--font-wordmark);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink-default);
  display: inline-flex;
  align-items: baseline;
}
.wm .o,
.wordmark .o {
  color: var(--accent-orange);
  font-weight: 700;
}
.wm ._,
.wordmark ._ {
  display: inline-block;
  width: 0.42em;
  height: 0.09em;
  background: var(--accent-orange);
  margin-left: 0.10em;
  align-self: flex-end;
  margin-bottom: 0.16em;
  animation: wm-blink 1s steps(2) infinite;
}
@keyframes wm-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Nav underscore — same blink, smaller */
.u-blink {
  display: inline-block;
  width: 0.5em;
  height: 0.08em;
  background: currentColor;
  margin-left: 0.06em;
  vertical-align: baseline;
  animation: wm-blink 1s steps(2) infinite;
  animation-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .wm ._, .wordmark ._, .u-blink { animation: none; }
}

/* ── Category chip (editorial pill) ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-xxs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-default);
  padding: 4px 10px;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}
.chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, var(--ink-default));
}

/* Pulse dot (live) */
.pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent-orange);
  position: relative;
}
.pulse::after {
  content: '';
  position: absolute; inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--accent-orange);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}