/* Klahr Scientific — flattened design tokens. Generated from styles.css. */

/* tokens/fonts.css */
/* Klahr Scientific webfonts — all freely licensed and self-hostable.
   Display: Chivo (900 for hero/H1, 700 H2, 600 H3 and eyebrows)
   Body/UI: Source Sans 3
   Data:    IBM Plex Mono
   NOTE: the business-card wordmark was set in Avenir Next LT Pro (commercial).
   Chivo replaces it by choice, not necessity — the wordmark artwork is unchanged. */
@import url("https://fonts.googleapis.com/css2?family=Chivo:wght@400;600;700;900&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

/* tokens/colors.css */
:root{
/* --- Base: Graphite — the structural ink (#12161C) --- */
--graphite-900:#0b0e12;--graphite-800:#12161c;--graphite-700:#1b2129;--graphite-600:#262e39;--graphite-500:#333a44;--graphite-400:#4a5361;--graphite-300:#7a838f;--graphite-200:#b2b9c2;--graphite-100:#dcdfe4;--graphite-050:#f1f2f5;
/* --- Base: Signal Amber — the accent / readout colour (#D98A00) --- */
--signal-900:#3d2600;--signal-800:#6b4300;--signal-700:#a06400;--signal-600:#d98a00;--signal-500:#ee9f1a;--signal-400:#f0b657;--signal-300:#f6cf8f;--signal-200:#fae3be;--signal-100:#fdf3e1;
/* --- Base: Neutrals --- */
--gray-950:#0a0b0d;--gray-900:#15171b;--gray-800:#232629;--gray-700:#333a44;--gray-600:#4b525c;--gray-500:#5a626e;--gray-400:#8a919b;--gray-300:#bec3ca;--gray-200:#dcdfe4;--gray-150:#e9ebee;--gray-100:#f3f4f6;--gray-050:#fafafb;--white:#ffffff;
/* --- Base: semantic hues (kept distinct from the amber accent) --- */
--green-700:#2f7d4f;--green-100:#e2f4e9;--red-700:#992014;--red-600:#b93124;--red-100:#fbe4e1;--blue-700:#1d4e89;--blue-100:#e3ecf7;

/* --- Semantic: text --- */
--text-strong:var(--graphite-900);--text-body:var(--gray-700);--text-muted:var(--gray-500);--text-subtle:var(--gray-400);--text-inverse:var(--white);--text-inverse-muted:var(--graphite-200);--text-accent:var(--signal-700);--text-link:var(--graphite-700);--text-link-hover:var(--graphite-900);
/* --- Semantic: surfaces --- */
--surface-page:var(--white);--surface-subtle:var(--gray-050);--surface-sunken:var(--gray-100);--surface-card:var(--white);--surface-inverse:var(--graphite-800);--surface-inverse-alt:var(--graphite-700);--surface-accent-soft:var(--signal-100);--surface-brand-soft:var(--graphite-050);
/* --- Semantic: borders --- */
--border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-strong:var(--gray-500);--border-brand:var(--graphite-600);--border-accent:var(--signal-600);--border-inverse:rgba(255,255,255,.22);
/* --- Semantic: interactive --- */
--action-primary:var(--graphite-600);--action-primary-hover:var(--graphite-700);--action-primary-active:var(--graphite-800);--action-accent:var(--signal-600);--action-accent-hover:var(--signal-700);--action-accent-active:var(--signal-800);--action-accent-text:var(--graphite-900);--action-disabled:var(--gray-200);--action-disabled-text:var(--gray-400);
--focus-ring:var(--signal-500);
/* --- Semantic: status --- */
--status-success-fg:var(--green-700);--status-success-bg:var(--green-100);--status-success-border:#a9d7bc;
--status-info-fg:var(--blue-700);--status-info-bg:var(--blue-100);--status-info-border:#b8cde6;
--status-warn-fg:var(--signal-800);--status-warn-bg:var(--signal-100);--status-warn-border:#eccb92;
--status-critical-fg:var(--red-700);--status-critical-bg:var(--red-100);--status-critical-border:#eab5ae;
/* --- Semantic: charting / data --- */
--data-1:var(--graphite-600);--data-2:var(--signal-600);--data-3:var(--graphite-300);--data-4:var(--signal-400);--data-5:var(--blue-700);--data-6:var(--green-700);
--grid-line:var(--gray-200);
}

/* tokens/typography.css */
:root{
/* --- Families --- */
--font-display:"Chivo","Avenir Next LT Pro","Helvetica Neue",Helvetica,sans-serif;
--font-body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
/* --- Weights (Chivo Black carries display; Source Sans 3 stays 400/600) --- */
--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:900;
/* --- Type scale (1.25 major third, 16px base) --- */
--size-3xs:11px;--size-2xs:12px;--size-xs:13px;--size-sm:14px;--size-md:16px;--size-lg:18px;--size-xl:20px;--size-2xl:24px;--size-3xl:30px;--size-4xl:38px;--size-5xl:48px;--size-6xl:60px;--size-7xl:76px;
/* --- Line heights --- */
--leading-tight:1.06;--leading-snug:1.2;--leading-normal:1.5;--leading-relaxed:1.65;
/* --- Tracking --- */
--tracking-wordmark:.16em;--tracking-eyebrow:.14em;--tracking-caps:.08em;--tracking-display:-.01em;--tracking-normal:0;
/* --- Composed roles --- */
--type-hero:var(--weight-black) var(--size-6xl)/var(--leading-tight) var(--font-display);
--type-h1:var(--weight-black) var(--size-4xl)/var(--leading-snug) var(--font-display);
--type-h2:var(--weight-bold) var(--size-3xl)/var(--leading-snug) var(--font-display);
--type-h3:var(--weight-semibold) var(--size-xl)/var(--leading-snug) var(--font-display);
--type-eyebrow:var(--weight-bold) var(--size-2xs)/var(--leading-normal) var(--font-display);
--type-lead:var(--weight-regular) var(--size-lg)/var(--leading-relaxed) var(--font-body);
--type-body:var(--weight-regular) var(--size-md)/var(--leading-relaxed) var(--font-body);
--type-body-sm:var(--weight-regular) var(--size-sm)/var(--leading-normal) var(--font-body);
--type-label:var(--weight-semibold) var(--size-xs)/var(--leading-normal) var(--font-body);
--type-data:var(--weight-medium) var(--size-sm)/var(--leading-normal) var(--font-mono);
--type-data-lg:var(--weight-medium) var(--size-3xl)/var(--leading-snug) var(--font-mono);
}

/* tokens/spacing.css */
:root{
/* 4px base ramp */
--space-0:0;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--space-32:128px;
/* Section rhythm */
--section-y:96px;--section-y-tight:64px;--section-y-loose:128px;
/* Containers */
--container-max:1200px;--container-narrow:760px;--container-wide:1440px;--gutter:24px;
/* Radii — engineered, restrained. Nothing is a pill except status chips. */
--radius-0:0;--radius-xs:2px;--radius-sm:3px;--radius-md:4px;--radius-lg:6px;--radius-xl:10px;--radius-pill:999px;
/* Strokes */
--stroke-hairline:1px;--stroke-regular:2px;--stroke-mark:3px;--rule-accent:3px;
}

/* tokens/elevation.css */
:root{
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(11,14,18,.07);
--shadow-sm:0 1px 3px rgba(11,14,18,.09),0 1px 2px rgba(11,14,18,.05);
--shadow-md:0 4px 12px rgba(11,14,18,.11);
--shadow-lg:0 12px 32px rgba(11,14,18,.16);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.08);
--ring-focus:0 0 0 3px rgba(238,159,26,.38);
--ring-brand:0 0 0 3px rgba(38,46,57,.20);
--overlay-scrim:rgba(11,14,18,.60);
--blur-panel:blur(10px); /* @kind other */
}

/* tokens/motion.css */
:root{
--duration-instant:80ms; /* @kind other */--duration-fast:140ms; /* @kind other */--duration-base:220ms; /* @kind other */--duration-slow:360ms; /* @kind other */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}

/* tokens/base.css */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-strong)}
h1{font:var(--type-h1);letter-spacing:var(--tracking-display)}
h2{font:var(--type-h2);letter-spacing:var(--tracking-display)}
h3{font:var(--type-h3)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--graphite-200);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--signal-600)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.ks-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent)}
.ks-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
/* Responsive behaviour for NavBar and Footer. Inline styles in the components
   need !important to be overridden here. */
@media (max-width:860px){
.ks-nav-inner{height:auto!important;flex-wrap:wrap!important;padding-top:var(--space-3)!important;padding-bottom:var(--space-3)!important;gap:var(--space-4)!important}
.ks-nav-links{order:3!important;width:100%!important;margin-left:0!important;overflow-x:auto!important;gap:var(--space-6)!important;padding-bottom:2px!important;scrollbar-width:none}
.ks-nav-links::-webkit-scrollbar{display:none}
.ks-nav-links button{flex:0 0 auto!important;min-height:44px!important;padding:var(--space-3) 0!important}
.ks-nav-cta{margin-left:auto!important}
.ks-nav-cta button{min-height:44px!important;padding-left:var(--space-5)!important;padding-right:var(--space-5)!important}
.ks-footer-grid{grid-template-columns:1fr 1fr!important;gap:var(--space-8)!important}
}
@media (max-width:560px){.ks-footer-grid{grid-template-columns:1fr!important}}

/* Site */
body{background:var(--surface-page)}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--text-accent) 40%,transparent)}
a:hover{color:var(--signal-600,var(--text-accent));border-bottom-color:var(--text-accent)}
img{max-width:100%}
@media (max-width:980px){.rw-3,.rw-4{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:860px){
.rw-split{grid-template-columns:1fr!important;gap:var(--space-10)!important}
.rw-hero{padding-top:var(--space-12)!important}
.rw-hero h1{font-size:44px!important;line-height:1.08!important}
.rw-hero-media{order:2}
.rw-2{grid-template-columns:1fr!important}
.rw-cta{flex-direction:column!important;align-items:stretch!important}
.rw-cta button{width:100%}
.rw-portrait{max-width:280px}
section{padding-top:var(--section-y-tight)!important;padding-bottom:var(--section-y-tight)!important}
}
@media (max-width:620px){.rw-3,.rw-4{grid-template-columns:1fr!important}.rw-hero h1{font-size:36px!important}}