/* Lyrebird Syntax — site styles (theme v2, 2026-08-21)
   Zero-JS static page. Editorial-technical system: Inter / IBM Plex Sans / JetBrains Mono,
   IBM-blue accent, flat surfaces, hairlines, sharp 4-8px radii. Layers keep the cascade predictable. */

@layer reset, base, layout, components, utilities;

/* ------------------------------------------------------------------- fonts */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  --font-display: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* dark palette (site default) */
  --bg: #11131c;
  --bg-elev: #191b24;
  --bg-inset: #0b0e16;
  --ink: #e1e1ee;
  --ink-2: #c3c6d8;
  --ink-3: #8f93a5;
  --line: #262a36;
  --line-strong: #424656;
  --accent: #0f62fe;          /* fills, headline device, icons */
  --accent-strong: #b4c5ff;   /* text-blue: links, checked items */
  --accent-hover: #3d77ff;
  --on-accent: #ffffff;
  --accent-soft: #182241;
  --hl-bg: #1c2a5e;           /* runbook highlighted line */
  --hl-ink: #dbe1ff;
  --focus: #b4c5ff;
  --sel-bg: #2854cc;
  --sel-ink: #f3f5ff;

  --radius: 8px;
  --radius-sm: 4px;
  --container: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section-gap: clamp(4rem, 10vw, 7rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* light theme — engaged by the header toggle (pure CSS, no reload) */
:root:has(.theme-switch:checked) {
  color-scheme: light;
  --bg: #f8f9fa;
  --bg-elev: #ffffff;
  --bg-inset: #f3f4f6;
  --ink: #191c1d;
  --ink-2: #4b5563;
  --ink-3: #5d6570;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --accent: #0f62fe;
  --accent-strong: #004ccd;
  --accent-hover: #0043ce;
  --on-accent: #ffffff;
  --accent-soft: #edf2ff;
  --hl-bg: #dbe1ff;
  --hl-ink: #003088;
  --focus: #0f62fe;
  --sel-bg: #b4c5ff;
  --sel-ink: #00174c;
}

@media (forced-colors: active) {
  :root {
    --bg: Canvas;
    --bg-elev: Canvas;
    --bg-inset: Canvas;
    --ink: CanvasText;
    --ink-2: CanvasText;
    --ink-3: GrayText;
    --line: CanvasText;
    --line-strong: CanvasText;
    --accent: LinkText;
    --accent-strong: LinkText;
    --accent-hover: LinkText;
    --on-accent: Canvas;
    --accent-soft: Canvas;
    --hl-bg: Canvas;
    --hl-ink: CanvasText;
    --focus: Highlight;
    --sel-bg: Highlight;
    --sel-ink: HighlightText;
  }
}

/* ------------------------------------------------------------------- reset */
@layer reset {
  html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
  :where(*, *::before, *::after) { box-sizing: inherit; }
  :where(body, h1, h2, h3, p, figure, blockquote, dl, dd, ul, ol, pre) { margin: 0; }
  :where(ul, ol) { padding: 0; list-style: none; }
  :where(img, svg, picture) { display: block; max-inline-size: 100%; }
  :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  :where(a) { color: inherit; }
}

/* -------------------------------------------------------------------- base */
@layer base {
  html { scroll-behavior: smooth; scroll-padding-block-start: 5.5rem; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    min-block-size: 100dvh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    accent-color: var(--accent);
  }

  .hero h1 span { display: block; }

  h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
  h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.25rem); line-height: 1.05; letter-spacing: -0.025em; }
  h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.6rem); font-weight: 600; }
  h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }
  p { text-wrap: pretty; }
  p + p { margin-block-start: 1em; }
  strong { font-weight: 600; }

  a { text-decoration-thickness: from-font; text-underline-offset: .18em; }
  a:hover { color: var(--accent-strong); }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

  ::selection { background: var(--sel-bg); color: var(--sel-ink); }

  code, pre { font-family: var(--font-mono); }
}

/* ------------------------------------------------------------------ layout */
@layer layout {
  .container { inline-size: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  .section { padding-block: var(--section-gap); }
  .section + .section { padding-block-start: 0; }
  .section-head { max-inline-size: 44rem; margin-block-end: clamp(2rem, 5vw, 3.25rem); }
  .section-head p { margin-block-start: 1rem; font-size: 1.1rem; color: var(--ink-2); }
}

/* -------------------------------------------------------------- components */
@layer components {
  /* skip link */
  .skip-link {
    position: absolute; inset-inline-start: 1rem; inset-block-start: -100%;
    z-index: 100; padding: .6rem 1rem; border-radius: var(--radius-sm);
    background: var(--accent); color: var(--on-accent);
    font-family: var(--font-mono); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
    text-decoration: none;
  }
  .skip-link:focus-visible { inset-block-start: 1rem; color: var(--on-accent); }

  /* eyebrow label */
  .eyebrow {
    display: inline-flex; align-items: center; gap: .7em;
    font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-strong);
  }
  .eyebrow::before { content: ""; inline-size: 1.6em; block-size: 1px; background: var(--ink-3); }

  /* header */
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--line);
  }
  .site-header .container {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap;
    min-block-size: 4.5rem; padding-block: .75rem;
  }
  .brand {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -0.01em;
    text-decoration: none; color: var(--ink); white-space: nowrap;
  }
  .brand b { font-weight: 700; }
  .brand:hover { color: var(--ink); }
  .brand .mark { inline-size: 2.5rem; block-size: 2.5rem; color: var(--accent); flex: none; }

  .nav-flags { display: flex; align-items: center; gap: .45rem; }
.nav-flags svg { block-size: 1rem; inline-size: auto; border-radius: 2px; outline: 1px solid var(--line); display: block; }

.site-nav ul { display: flex; align-items: center; gap: .25rem 1.7rem; flex-wrap: wrap; }
  .site-nav a:not(.button) {
    text-decoration: none; padding-block: .5rem;
    font-family: var(--font-mono); font-size: .78rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
  }
  .site-nav a:not(.button):hover { color: var(--accent-strong); }
  .site-nav .nav-cta { margin-inline-start: .5rem; }

  @media (width < 48rem) {
    .site-header { position: static; }
    .site-header .container { justify-content: center; }
    .site-nav { inline-size: 100%; }
    .nav-flags { display: flex; align-items: center; gap: .45rem; }
.nav-flags svg { block-size: 1rem; inline-size: auto; border-radius: 2px; outline: 1px solid var(--line); display: block; }

.site-nav ul { justify-content: center; gap: .25rem 1.25rem; }
    .site-nav .nav-cta { display: none; }
  }

  /* buttons — sharp, mono, engineered */
  .button {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-block-size: 2.75rem; padding: .6rem 1.3rem; border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
    text-decoration: none; white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
  }
  .button-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
  .button-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
  .button-secondary { color: var(--ink); border-color: var(--line-strong); background: transparent; }
  .button-secondary:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
  .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
  @media (forced-colors: active) { .button { border-color: ButtonText; } }

  /* hero */
  .hero { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem); }
  .hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; grid-template-columns: minmax(0, 1fr); }
  @media (width >= 60rem) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
  .hero h1 { margin-block-start: 1.25rem; max-inline-size: 30ch; font-size: clamp(2rem, 1.1rem + 2.6vw, 2.85rem); line-height: 1.14; }
  .hero h1 em { font-style: normal; color: var(--accent); }
  .hero .lead { margin-block-start: 1.5rem; max-inline-size: 38rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink-2); }
  .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; }
  .hero-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-block-start: 2.25rem; font-size: .875rem; color: var(--ink-3); }
  .hero-meta li { display: inline-flex; align-items: center; gap: .55rem; }
  .hero-meta li::before { content: ""; inline-size: .45rem; block-size: .45rem; background: var(--accent); }

  /* runbook card — code editor window */
  .runbook {
    background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius);
    overflow: hidden; font-size: .9rem;
    justify-self: center; inline-size: min(100%, 31rem);
  }
  .runbook-bar {
    display: flex; align-items: center; gap: .5rem; padding: .65rem 1rem;
    border-block-end: 1px solid var(--line); background: var(--bg-inset);
    font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3);
  }
  .runbook-bar span:first-child { display: inline-flex; gap: .35rem; }
  .runbook-bar i { display: inline-block; inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: var(--line-strong); }
  .runbook pre { padding: 1.1rem 1.25rem 1.25rem; overflow-x: auto; line-height: 1.85; color: var(--ink-2); tab-size: 2; }
  .runbook code { font-size: .84em; }
  .runbook .c { color: var(--ink-3); }
  .runbook .k { color: var(--accent-strong); font-weight: 700; }
  .runbook .hl { background: var(--hl-bg); color: var(--hl-ink); padding: .15em .45em; margin-inline: -.45em .0em; border-radius: var(--radius-sm); }
  .runbook figcaption { padding: .75rem 1.25rem; border-block-start: 1px solid var(--line); font-size: .8rem; color: var(--ink-3); }
  @media (width < 40rem) { .runbook pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .82rem; } }

  /* service cards */
  .cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
  .card {
    display: flex; flex-direction: column; gap: 1rem;
    padding: clamp(1.4rem, 3vw, 1.9rem); background: var(--bg-elev);
    border: 1px solid var(--line); border-radius: var(--radius);
    border-inline-start: 3px solid var(--line);
    transition: border-color .2s var(--ease);
  }
  .card:hover { border-inline-start-color: var(--accent); }
  .card:hover h3 { color: var(--accent-strong); }
  .card-kicker {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
    letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3);
    margin-block: 1.1rem 0;
  }

  .card h3 { font-family: var(--font-display); transition: color .2s var(--ease); }
  .card-icon { color: var(--accent); }
  .card-icon svg { inline-size: 2rem; block-size: 2rem; }
  .card p { color: var(--ink-2); flex-grow: 1; }
  .tags { display: flex; flex-wrap: wrap; gap: .4rem; }
  .tags li {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase;
    padding: .3rem .55rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); color: var(--ink-2);
  }

  /* principles */
  .principles { display: grid; gap: 1.25rem 3rem; grid-template-columns: minmax(0, 1fr); counter-reset: principle; }
  @media (width >= 48rem) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .principles li { counter-increment: principle; display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; padding-block: 1.5rem; border-block-start: 1px solid var(--line); }
  .principles li::before {
    content: counter(principle, decimal-leading-zero);
    font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; line-height: 1;
    color: var(--accent); padding-block-start: .2rem;
  }
  .principles h3 { font-size: 1.1rem; margin-block-end: .35rem; }
  .principles p { color: var(--ink-2); }

  /* about */
  .about-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (width >= 56rem) { .about-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
  .about-copy p { color: var(--ink-2); font-size: 1.05rem; }
  .about-copy .lead-copy { color: var(--ink); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-family: var(--font-display); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; margin-block-start: 1rem; }
  .aside-card { padding: clamp(1.4rem, 3vw, 1.9rem); background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); }
  .aside-card .mark { inline-size: 3.75rem; block-size: 3.75rem; color: var(--accent); margin-block-end: 1rem; }
  .aside-card h3 { font-size: 1.05rem; margin-block-end: .5rem; }
  .aside-card p { color: var(--ink-2); font-size: .95rem; }
  .facts { display: grid; gap: .55rem; margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--line); font-size: .88rem; }
  .facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
  .facts dt { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-block-start: .2em; }
  .facts dd { color: var(--ink); margin: 0; }

  /* contact */
  .contact {
    padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1.4rem, 5vw, 4rem);
    background: var(--accent); color: var(--on-accent); border-radius: var(--radius);
    text-align: center;
  }
  .contact .eyebrow { color: inherit; }
  .contact .eyebrow::before { background: currentColor; opacity: .6; }
  .contact h2 { margin-block-start: 1rem; margin-inline: auto; max-inline-size: 24ch; color: inherit; }
  .contact p { margin: 1.25rem auto 0; max-inline-size: 36rem; opacity: .97; }
  .contact-email {
    display: inline-block; margin-block-start: 2rem;
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.4rem, 1rem + 2.2vw, 2.5rem); letter-spacing: -0.015em;
    color: inherit; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
    overflow-wrap: anywhere;
  }
  .contact-email:hover { color: inherit; text-decoration-color: currentColor; }
  .contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-block-start: 2rem; }
  .contact .button-primary { background: var(--on-accent); color: var(--accent); border-color: var(--on-accent); }
  .contact .button-primary:hover { background: color-mix(in oklab, var(--on-accent) 88%, var(--accent)); }
  .contact .button-secondary { color: inherit; border-color: color-mix(in oklab, currentColor 45%, transparent); }
  .contact .button-secondary:hover { border-color: currentColor; color: inherit; }
  .contact :focus-visible { outline-color: var(--on-accent); }


  /* theme toggle — pure CSS (checkbox drives :root:has()) */
  .theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong); color: var(--ink-2); cursor: pointer;
    transition: color .15s var(--ease), border-color .15s var(--ease);
  }
  .theme-toggle:hover { color: var(--accent-strong); border-color: var(--accent-strong); }
  .theme-toggle:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
  .theme-toggle svg { inline-size: 1.15rem; block-size: 1.15rem; }
  .theme-toggle .sun { display: none; }
  :root:has(.theme-switch:checked) .theme-toggle .sun { display: block; }
  :root:has(.theme-switch:checked) .theme-toggle .moon { display: none; }

  /* footer */
  .site-footer { border-block-start: 1px solid var(--line); padding-block: 2.5rem 3rem; font-size: .9rem; color: var(--ink-2); }
  .footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem 3rem; }
  .footer-brand { display: grid; gap: .5rem; }
  .footer-brand .brand { font-size: 1.1rem; }
  .footer-brand .brand .mark { inline-size: 1.7rem; block-size: 1.7rem; }
  .footer-nav ul { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
  .footer-nav a {
    text-decoration: none;
    font-family: var(--font-mono); font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  }
  .footer-nav a:hover { color: var(--accent-strong); }
  .footer-meta {
    inline-size: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
    margin-block-start: 1rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line);
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--ink-3);
  }
  .footer-meta:only-child { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }

  /* not-found page */
  .notfound { min-block-size: 70dvh; display: grid; place-content: center; text-align: center; gap: 1rem; padding-block: var(--section-gap); }
  .notfound .mark { inline-size: 4.5rem; block-size: 4.5rem; color: var(--accent); margin-inline: auto; }
  .notfound .eyebrow { justify-content: center; margin-inline: auto; }
  .notfound p { color: var(--ink-2); max-inline-size: 34rem; margin-inline: auto; }
  .notfound .hero-actions { justify-content: center; }
}

/* --------------------------------------------------- progressive enhancement */
@layer utilities {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: fade-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
      }
    }
  }
  @keyframes fade-up {
    from { opacity: 0; translate: 0 1.25rem; }
    to { opacity: 1; translate: 0 0; }
  }

  .visually-hidden {
    position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

@media print {
  .site-header, .skip-link, .hero-actions, .contact-actions, .runbook { display: none; }
  body { background: #fff; color: #000; }
  a { color: inherit; }
}

  .site-footer .acknowledgement {
    font-size: .78rem; color: var(--ink-3); max-inline-size: 62ch;
    margin-block: 1.6rem .4rem;
  }