/* ===========================================================================
   Kwant Klubben — bundled stylesheet for the static recruiting site.
   Single file = one HTTP request. Sourced verbatim from the club's design
   system (D:\local-repos\kwantklubben\design-system\), concatenated here so
   this repo has no build step. Re-sync against that source if the brand
   system changes; each block below names its origin file.
   =========================================================================== */

/* --- source: tokens/base.css (reset) --- */
*, *::before, *::after { box-sizing: border-box; }

/* --- source: tokens/colors.css --- */
:root {
  --ink-900: #0C1016;
  --ink-800: #14181F;
  --ink-700: #1E2530;
  --ink-600: #2B3340;
  --ink-500: #3C4756;
  --ink-400: #5A6677;

  --paper-50:  #FBF9F2;
  --paper-100: #F5F1E4;
  --paper-200: #ECE6D4;
  --paper-300: #DCD4BD;
  --paper-400: #C2B79A;
  --paper-500: #9C9173;

  --lime-300: #E4F79A;
  --lime-400: #D5F25A;
  --lime-500: #C2EB2B;
  --lime-600: #A6CE12;
  --lime-700: #7E9C0A;

  --coral-300: #FFC2B3;
  --coral-400: #FF8366;
  --coral-500: #FF5A3C;
  --coral-600: #E63A1C;
  --coral-700: #B82A12;

  --blue-300: #B7C6FF;
  --blue-400: #6E86FF;
  --blue-500: #2F58F6;
  --blue-600: #1B3CD6;
  --blue-700: #142BA0;

  --gold-300: #FBE3A0;
  --gold-400: #F6C84E;
  --gold-500: #EBA91E;
  --gold-600: #C4860C;

  --bg-page:          var(--paper-50);
  --bg-page-alt:      var(--paper-100);
  --bg-ink:           var(--ink-800);
  --bg-ink-deep:      var(--ink-900);

  --surface-card:     #FFFFFF;
  --surface-raised:   var(--paper-50);
  --surface-sunken:   var(--paper-100);
  --surface-ink:      var(--ink-700);

  --text-strong:      var(--ink-900);
  --text-body:        var(--ink-700);
  --text-muted:       var(--ink-400);
  --text-inverse:     var(--paper-50);
  --text-inverse-mut: var(--paper-400);
  --text-on-accent:   var(--ink-900);

  --border-default:   var(--paper-300);
  --border-strong:    var(--ink-800);
  --border-ink-soft:  var(--ink-600);

  --accent:           var(--lime-500);
  --accent-hover:     var(--lime-400);
  --accent-press:     var(--lime-600);
  --accent-ink:       var(--lime-700);

  --positive:         var(--lime-600);
  --positive-soft:    var(--lime-300);
  --negative:         var(--coral-500);
  --negative-soft:    var(--coral-300);
  --info:             var(--blue-500);
  --info-soft:        var(--blue-300);
  --caution:          var(--gold-500);
  --caution-soft:     var(--gold-300);

  --link:             var(--blue-600);
  --link-hover:       var(--blue-500);

  --focus-ring:       var(--blue-500);
  --selection-bg:     var(--lime-300);
}

/* --- source: tokens/typography.css --- */
:root {
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --text-3xs: 0.6875rem;
  --text-2xs: 0.75rem;
  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.25rem;
  --text-xl:  1.5rem;
  --text-2xl: 1.9375rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;
  --text-5xl: 4.25rem;
  --text-6xl: 5.5rem;

  --leading-tight:  1.04;
  --leading-snug:   1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  --type-display:  var(--weight-bold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:       var(--weight-bold) var(--text-3xl)/var(--leading-tight) var(--font-display);
  --type-h2:       var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-h3:       var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-body:     var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-body);
  --type-body-sm:  var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --type-label:    var(--weight-medium) var(--text-xs)/var(--leading-snug) var(--font-display);
  --type-mono:     var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-data:     var(--weight-bold) var(--text-lg)/1 var(--font-mono);
}

/* --- source: tokens/spacing.css --- */
:root {
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-12: 7rem;

  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1320px;

  --grid-unit: 8px;
  --grid-major: 80px;
}

/* --- source: tokens/effects.css --- */
:root {
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-badge: 28%;

  --border-hair: 1px;
  --border-thin: 1.5px;
  --border-bold: 2px;
  --border-heavy: 3px;

  --pop-2: 2px 2px 0 var(--ink-800);
  --pop-3: 3px 3px 0 var(--ink-800);
  --pop-4: 4px 4px 0 var(--ink-800);
  --pop-6: 6px 6px 0 var(--ink-800);
  --pop-accent: 4px 4px 0 var(--lime-600);
  --pop-coral: 4px 4px 0 var(--coral-600);

  --shadow-sm: 0 1px 2px rgba(12, 16, 22, 0.08), 0 1px 1px rgba(12, 16, 22, 0.04);
  --shadow-md: 0 4px 12px rgba(12, 16, 22, 0.10), 0 2px 4px rgba(12, 16, 22, 0.06);
  --shadow-lg: 0 16px 40px rgba(12, 16, 22, 0.16), 0 4px 10px rgba(12, 16, 22, 0.08);

  --focus-width: 3px;
  --focus-offset: 2px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 110ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;

  --grid-line: rgba(20, 24, 31, 0.06);
  --grid-line-strong: rgba(20, 24, 31, 0.10);
}

/* --- source: tokens/base.css (remainder) --- */
body {
  margin: 0;
  font: var(--type-body);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 { color: var(--text-strong); margin: 0; text-wrap: balance; }
p { text-wrap: pretty; }

a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

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

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.kk-gridpaper {
  background-color: var(--bg-page);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}
.kk-gridpaper-major {
  background-color: var(--bg-page);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(var(--grid-line-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px);
  background-size:
    var(--grid-unit) var(--grid-unit),
    var(--grid-unit) var(--grid-unit),
    var(--grid-major) var(--grid-major),
    var(--grid-major) var(--grid-major);
}

.kk-overline {
  font-family: var(--font-mono);
  font-size: var(--text-3xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- source: tokens/motion.css --- */
@keyframes kk-reveal { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes kk-rise   { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes kk-slam   { 0% { opacity:0; transform:rotate(-14deg) scale(2.6); }
                       70% { opacity:1; transform:rotate(-2deg) scale(.94); }
                       100% { opacity:1; transform:rotate(-4deg) scale(1); } }
@keyframes kk-draw   { to { stroke-dashoffset:0; } }
@keyframes kk-blink  { 0%,55% { opacity:1; } 56%,100% { opacity:0; } }
@keyframes kk-ticker { to { transform:translateX(-50%); } }

@media (prefers-reduced-motion: no-preference) {
  .kk-reveal { animation: kk-reveal var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--kk-i, 0) * 90ms); }
  .kk-rise { transform-origin: bottom; animation: kk-rise .5s var(--ease-spring) both; animation-delay: calc(var(--kk-i, 0) * 50ms); }
  .kk-slam { animation: kk-slam .38s var(--ease-spring) both; }
  .kk-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: kk-draw 1.4s var(--ease-out) forwards; }
  .kk-blink { animation: kk-blink 1.15s steps(1) infinite; }
  .kk-ticker { animation: kk-ticker 14s linear infinite; }
  .kk-ticker-wrap:hover .kk-ticker { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .kk-reveal, .kk-rise, .kk-slam { opacity:1; transform:none; }
  .kk-draw { stroke-dasharray:none; stroke-dashoffset:0; }
}

/* --- source: components/core/Button.jsx --- */
.kk-btn{
  --_bg: var(--ink-800); --_fg: var(--paper-50); --_bd: var(--ink-800);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:600; letter-spacing:-.01em;
  border:var(--border-bold) solid var(--_bd); background:var(--_bg); color:var(--_fg);
  border-radius:var(--radius-md); cursor:pointer; white-space:nowrap;
  box-shadow:var(--pop-3); transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  text-decoration:none;
}
.kk-btn:hover{ transform:translate(-1px,-1px); box-shadow:var(--pop-4); }
.kk-btn:active{ transform:translate(2px,2px); box-shadow:var(--pop-1, 1px 1px 0 var(--ink-800)); }
.kk-btn:focus-visible{ outline:var(--focus-width) solid var(--focus-ring); outline-offset:var(--focus-offset); }
.kk-btn[disabled]{ cursor:not-allowed; opacity:.45; box-shadow:none; transform:none; }

.kk-btn--sm{ font-size:var(--text-xs); padding:.42em .85em; border-radius:var(--radius-sm); }
.kk-btn--md{ font-size:var(--text-sm); padding:.6em 1.1em; }
.kk-btn--lg{ font-size:var(--text-md); padding:.72em 1.4em; }

.kk-btn--primary{ --_bg:var(--lime-500); --_fg:var(--ink-900); --_bd:var(--ink-800); }
.kk-btn--primary:hover{ --_bg:var(--lime-400); }
.kk-btn--secondary{ --_bg:var(--surface-card); --_fg:var(--ink-900); --_bd:var(--ink-800); }
.kk-btn--secondary:hover{ --_bg:var(--paper-100); }
.kk-btn--danger{ --_bg:var(--coral-500); --_fg:#fff; --_bd:var(--ink-800); }
.kk-btn--danger:hover{ --_bg:var(--coral-400); }
.kk-btn--ghost{ --_bg:transparent; --_fg:var(--ink-900); --_bd:transparent; box-shadow:none; }
.kk-btn--ghost:hover{ --_bg:var(--paper-100); transform:none; box-shadow:none; }
.kk-btn--ghost:active{ transform:none; box-shadow:none; }

/* --- source: components/core/Card.jsx --- */
.kk-card{
  background:var(--surface-card); border:var(--border-bold) solid var(--ink-800);
  border-radius:var(--radius-lg); box-shadow:var(--pop-4); overflow:hidden;
}
.kk-card--flat{ box-shadow:none; border-color:var(--border-default); border-width:var(--border-thin); }
.kk-card--ink{ background:var(--surface-ink); border-color:var(--ink-900); color:var(--paper-100); }
.kk-card--accent{ box-shadow:var(--pop-accent); }
.kk-card--pad-sm{ padding:var(--space-4); }
.kk-card--pad-md{ padding:var(--space-5); }
.kk-card--pad-lg{ padding:var(--space-6); }
.kk-card--pad-none{ padding:0; }
.kk-card--hover{ transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kk-card--hover:hover{ transform:translate(-2px,-2px); box-shadow:var(--pop-6); }

/* --- source: components/core/Badge.jsx --- */
.kk-badge{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono); font-weight:700; font-size:var(--text-3xs);
  letter-spacing:.06em; text-transform:uppercase; line-height:1;
  padding:.45em .7em; border-radius:var(--radius-pill);
  border:var(--border-thin) solid transparent; white-space:nowrap;
}
.kk-badge--dot::before{ content:""; width:.5em; height:.5em; border-radius:50%; background:currentColor; }
.kk-badge--neutral{ background:var(--paper-200); color:var(--ink-700); border-color:var(--paper-300); }
.kk-badge--survived{ background:var(--lime-300); color:var(--lime-700); border-color:var(--lime-500); }
.kk-badge--killed{ background:var(--coral-300); color:var(--coral-700); border-color:var(--coral-500); }
.kk-badge--review{ background:var(--gold-300); color:var(--gold-600); border-color:var(--gold-500); }
.kk-badge--info{ background:var(--blue-300); color:var(--blue-700); border-color:var(--blue-500); }
.kk-badge--solid{ background:var(--ink-800); color:var(--paper-50); border-color:var(--ink-800); }

/* --- source: components/core/Tag.jsx --- */
.kk-tag{
  display:inline-flex; align-items:center; gap:.4em;
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:400;
  color:var(--ink-700); background:var(--paper-100);
  border:var(--border-thin) solid var(--paper-300); border-radius:var(--radius-sm);
  padding:.3em .55em; line-height:1; white-space:nowrap;
}
.kk-tag__x{ cursor:pointer; opacity:.5; font-weight:700; }
.kk-tag__x:hover{ opacity:1; color:var(--coral-600); }
.kk-tag--accent{ background:var(--lime-300); border-color:var(--lime-500); color:var(--lime-700); }

/* --- source: components/data/StatBlock.jsx --- */
.kk-stat{ display:flex; flex-direction:column; gap:.25em; font-family:var(--font-mono); }
.kk-stat__label{ font-size:var(--text-3xs); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-400); }
.kk-stat__value{ display:flex; align-items:baseline; gap:.4em; }
.kk-stat__num{ font-size:var(--text-3xl); font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--ink-900); }
.kk-stat__num--sm{ font-size:var(--text-2xl); }
.kk-stat__num--lg{ font-size:var(--text-4xl); }
.kk-stat__unit{ font-size:var(--text-sm); color:var(--ink-400); font-weight:400; }
.kk-stat__delta{ font-size:var(--text-xs); font-weight:700; }
.kk-stat__delta--up{ color:var(--lime-700); }
.kk-stat__delta--down{ color:var(--coral-600); }
.kk-stat__delta--flat{ color:var(--ink-400); }
.kk-stat__sub{ font-size:var(--text-3xs); color:var(--ink-400); }
.kk-stat--ink .kk-stat__num{ color:#fff; }
.kk-stat--ink .kk-stat__label,.kk-stat--ink .kk-stat__sub,.kk-stat--ink .kk-stat__unit{ color:var(--paper-400); }
.kk-stat--ink .kk-stat__delta--up{ color:var(--lime-400); }
.kk-stat--ink .kk-stat__delta--down{ color:var(--coral-400); }

/* --- source: components/data/VerdictStamp.jsx --- */
.kk-stamp{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--font-mono); font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; line-height:1; padding:.5em .8em .45em;
  border:var(--border-heavy) solid currentColor; border-radius:var(--radius-sm);
  transform:rotate(-4deg); user-select:none;
}
.kk-stamp::before{ content:""; width:.6em; height:.6em; border-radius:50%; background:currentColor; opacity:.85; }
.kk-stamp--md{ font-size:var(--text-md); }
.kk-stamp--sm{ font-size:var(--text-xs); padding:.4em .6em .35em; border-width:var(--border-bold); }
.kk-stamp--lg{ font-size:var(--text-2xl); padding:.4em .7em .35em; }
.kk-stamp--survived{ color:var(--lime-700); background:color-mix(in srgb, var(--lime-300) 55%, transparent); }
.kk-stamp--killed{ color:var(--coral-600); background:color-mix(in srgb, var(--coral-300) 50%, transparent); }
.kk-stamp--review{ color:var(--gold-600); background:color-mix(in srgb, var(--gold-300) 55%, transparent); }
.kk-stamp--paper{ color:var(--blue-600); background:color-mix(in srgb, var(--blue-300) 45%, transparent); }

/* ===========================================================================
   Site-specific layout — new for this static port (not in the original
   mockup). Section content stays inline-styled for easy hand-editing;
   these are ONLY the layout containers that must reflow on mobile, since
   inline style="grid-template-columns:..." cannot itself respond to a
   media query.
   =========================================================================== */

.kk-nav{
  position:sticky; top:0; z-index:10; background:rgba(251,249,242,.86);
  backdrop-filter:blur(8px); border-bottom:var(--border-bold) solid var(--ink-800);
}
.kk-nav__inner{
  max-width:1200px; margin:0 auto; padding:18px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.kk-nav__links{ display:flex; align-items:center; gap:26px; }

/* Vertical padding is left to each section instance (varies 44–72px in the
   original, on purpose, for rhythm) — only horizontal padding + max-width
   are shared, so the mobile query below can target them without fighting
   each section's inline padding-top/padding-bottom. */
.kk-section{ max-width:1200px; margin:0 auto; padding-left:28px; padding-right:28px; }

.kk-two-col{ display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.kk-two-col--join{ display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center; }

.kk-manifesto-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-left:var(--border-bold) solid var(--ink-800); }
.kk-manifesto-grid > div{ border-right:var(--border-bold) solid var(--ink-800); padding:4px 22px 0; }

.kk-stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; }

.kk-projects-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

.kk-footer__inner{
  max-width:1200px; margin:0 auto; padding:28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:12px;
}
.kk-footer__brand{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

@media (max-width: 700px){
  .kk-nav__inner{ padding:14px 16px; }
  .kk-nav__links{ gap:14px; }
  .kk-nav__links a:not(:last-child){ display:none; } /* keep only the primary CTA on very small nav bars */
  .kk-section{ padding-left:16px; padding-right:16px; }
  .kk-two-col, .kk-two-col--join{ grid-template-columns:1fr; gap:32px; }
  .kk-manifesto-grid{ grid-template-columns:repeat(2,1fr); }
  .kk-manifesto-grid > div:nth-child(2n){ border-right:none; }
  .kk-stats-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .kk-projects-grid{ grid-template-columns:1fr; }
  h1{ font-size:2.5rem !important; }
  .kk-footer__inner{ flex-direction:column; align-items:flex-start; }
}