@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/IBMPlexMono-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Sans";src:url("fonts/IBMPlexSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"IBM Plex Serif";src:url("fonts/IBMPlexSerif-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap;}

:root {
  /* ============================================================
     COLOR — three brand colors + extended digital tokens.
     Ratio target: ~70% field (Bone or Ink) · 25% opposite · 5% Signal.
     ============================================================ */

  /* — Bone (warm paper / light field) — */
  --bone:    #EFE9DD;  /* primary background */
  --bone-2:  #E4DDCB;  /* hover / card backgrounds, secondary surfaces */
  --bone-3:  #D6CDB6;  /* borders on light, subtle section dividers */

  /* — Ink (near-black / dark field & text) — */
  --ink:     #14110E;  /* primary text, dark backgrounds (canonical) */
  --ink-2:   #1F1B16;  /* secondary text, headings on dark surfaces */
  --ink-3:   #2A2520;  /* muted body text, disabled states on dark */

  /* — Signal (the slash — used once per layout) — */
  --red:      #CB4A3A;            /* Signal accent — slash, CTA buttons */
  --red-dk:   #B23E2F;            /* hover for Signal; pressed buttons */
  --red-soft: rgba(203,74,58,.16);/* soft Signal tint — tag pills, backgrounds */

  /* — Stone (labels & secondary text) — */
  --stone:   #8C8676;  /* tracked labels, captions, secondary text */

  /* — Rules / hairlines — */
  --rule:          rgba(20,17,14,.10);   /* hairline on light */
  --rule-strong:   rgba(20,17,14,.22);   /* section dividers on light */
  --rule-bone:     rgba(239,233,221,.10);/* hairline on dark */
  --rule-bone-2:   rgba(239,233,221,.22);/* stronger rule on dark */

  /* ============================================================
     SEMANTIC COLOR (light field = default)
     ============================================================ */
  --bg:        var(--bone);
  --surface:   var(--bone-2);
  --fg:        var(--ink);     /* primary text */
  --fg-2:      var(--ink-3);   /* body / muted */
  --fg-label:  var(--stone);   /* tracked labels */
  --accent:    var(--red);
  --accent-dk: var(--red-dk);
  --border:    var(--rule);
  --border-strong: var(--rule-strong);

  /* ============================================================
     TYPE FAMILIES
     ============================================================ */
  --font-mono:  "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-sans:  "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;

  /* ============================================================
     TYPE SCALE  (mono display is tight; sans body is relaxed)
     ============================================================ */
  --fs-display: clamp(2.75rem, 6vw, 5rem); /* @kind font */ /* hero headline */
  --fs-h1:      clamp(2.25rem, 4.5vw, 3.5rem); /* @kind font */
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem); /* @kind font */
  --fs-h3:      clamp(1.25rem, 2vw, 1.625rem); /* @kind font */
  --fs-body-lg: 1.25rem; /* @kind font */
  --fs-body:    1.0625rem; /* @kind font */
  --fs-small:   0.9375rem; /* @kind font */
  --fs-label:   0.8125rem; /* @kind font */ /* tracked uppercase label */
  --fs-micro:   0.6875rem; /* @kind font */

  --lh-tight:  1.04; /* @kind font */ /* mono headlines */
  --lh-snug:   1.25; /* @kind font */
  --lh-body:   1.6; /* @kind font */ /* sans body */

  --tracking-tight:  -0.035em; /* @kind font */ /* headline letter-spacing, per live site */
  --tracking-hero:   -0.045em; /* @kind font */ /* hero display, extra tight */
  --tracking-label:   0.22em; /* @kind font */ /* sec-tag / tracked uppercase label */
  --tracking-nav:     0.14em; /* @kind font */ /* nav + button labels */
  --tracking-wide:    0.14em; /* @kind font */

  /* Layout (matches live site) */
  --maxw: 1320px; /* @kind spacing */
  --gutter: clamp(20px, 4vw, 56px); /* @kind spacing */
  --nav-h: 68px; /* @kind spacing */

  /* ============================================================
     SPACING  (8px base rhythm)
     ============================================================ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ============================================================
     RADII — small & restrained. The brand reads square/typeset.
     ============================================================ */
  --radius-0: 0px;     /* default — most surfaces are sharp */
  --radius-1: 2px;     /* pills / tags, very subtle */
  --radius-2: 4px;     /* buttons, inputs */
  --radius-3: 8px;     /* cards (used sparingly) */
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — flat brand. Shadows are faint, warm, low.
     ============================================================ */
  --shadow-sm: 0 1px 2px rgba(20,17,14,.06);
  --shadow-md: 0 4px 16px rgba(20,17,14,.08);
  --shadow-lg: 0 16px 48px rgba(20,17,14,.12);

  /* ============================================================
     MOTION — quiet, deliberate. No bounce.
     ============================================================ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1); /* @kind other */ /* the calm house ease */
  --dur-fast: 120ms; /* @kind other */
  --dur:      200ms; /* @kind other */
  --dur-slow: 360ms; /* @kind other */
  --dur-rev:  800ms; /* @kind other */ /* scroll-reveal */
}

/* ============================================================
   DARK FIELD — apply .on-ink to flip semantic tokens.
   ============================================================ */
.on-ink {
  --bg:        var(--ink);
  --surface:   var(--ink-2);
  --fg:        var(--bone);
  --fg-2:      var(--bone-3);
  --fg-label:  var(--stone);
  --border:        var(--rule-bone);
  --border-strong: var(--rule-bone-2);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.ds-display {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 0.92;
  letter-spacing: var(--tracking-hero);
  color: var(--fg);
}
.ds-h1 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h2 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h3 {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg);
}
/* The signature emphasis: serif italic, Signal red. Drop into any mono
   headline — "Brief <em>in.</em>" / "Four ways <span class=slash>/</span> to work." */
.ds-em, .ds-h1 em, .ds-h2 em, .ds-display em, .ds-h3 em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--red);
}
.ds-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--fg-label);
}
.ds-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ds-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.ds-quote {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--fg);
}
.ds-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--fg-2);
}

/* The Signal slash — the brand's single point of red. */
.slash { color: var(--red); font-weight: 700; }

/* ---- static export: base + responsive helpers ---- */
html{scroll-behavior:smooth;background:#EFE9DD;}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;}
*{box-sizing:border-box;}
img{display:block;max-width:100%;}
::selection{background:var(--red);color:var(--bone);}
input::placeholder,textarea::placeholder{color:rgba(239,233,221,.34);font-family:"IBM Plex Sans",sans-serif;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red)!important;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #CB4A3A;outline-offset:2px;}
@keyframes sbl-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
section[id],#top{scroll-margin-top:84px;}
.only-desktop{display:contents;}
.only-mobile{display:none;}
@media(max-width:879px){.only-desktop{display:none;}.only-mobile{display:contents;}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}