/* Self-hosted Google Fonts (OFL): Inter Tight 400/500 (variable) and Fragment Mono 400, latin + latin-ext. */
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fragment-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fragment-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Khala design system. Tokens are modelled on Kled.ai's measured system (warm off-white,
   near-black ink, navy accent, seven-step slate scale, regular-weight grotesk headlines,
   mono uppercase labels, 10/12/16px radii, no shadows). Written from scratch for Khala;
   Inter Tight and Fragment Mono stand in for Kled's commercial Neue Montreal / Aeonik Fono. */

:root, [data-theme="light"] {
  color-scheme: light;
  --k-bg: #FFFFFF;
  --k-bg-alt: #F4F5F7;
  --k-panel: #EFF0F3;
  --k-panel-2: #E6E8ED;
  --k-ink: #0E1014;
  --k-navy: #15254E;
  --k-ink-2: #505C7A;
  --k-ink-3: #5F6A86;
  --k-line: #DCDEE4;
  --k-line-strong: #B9BECA;
  --k-accent: #15254E;
  --k-nav-bg: #FFFFFF;
  --k-announce-bg: #15254E;
  --k-announce-fg: #FFFFFF;
  --k-announce-muted: rgba(255, 255, 255, .72);
  --k-btn-bg: #15254E;
  --k-btn-fg: #FFFFFF;
  --k-btn-hover: #24376A;
  --k-btn2-bg: #EFF0F3;
  --k-btn2-fg: #15254E;
  --k-btn2-hover: #E3E6EC;
  --k-media: #0E1014;
  --k-logo-filter: none;
  --k-mark-filter: brightness(0);
  --k-ink-rgb: 14 16 20;
  --k-accent-rgb: 21 37 78;
  --k-on-accent: #FFFFFF;
  --k-danger: #B42318;
}
/* Dark is drawn from the same slate family (deep slate-navy), not an inversion of light. */
[data-theme="dark"] {
  color-scheme: dark;
  --k-bg: #0B0E15;
  --k-bg-alt: #0F131D;
  --k-panel: #151A26;
  --k-panel-2: #1C2231;
  --k-ink: #EEF0F4;
  --k-navy: #C9D3EE;
  --k-ink-2: #B9BECA;
  --k-ink-3: #9AA2B6;
  --k-line: #232A3A;
  --k-line-strong: #333C51;
  --k-accent: #A9B8E3;
  --k-nav-bg: #0B0E15;
  --k-announce-bg: #1C2231;
  --k-announce-fg: #EEF0F4;
  --k-announce-muted: rgba(238, 240, 244, .72);
  --k-btn-bg: #DCE3F5;
  --k-btn-fg: #0B0E15;
  --k-btn-hover: #FFFFFF;
  --k-btn2-bg: #1C2231;
  --k-btn2-fg: #EEF0F4;
  --k-btn2-hover: #252C3E;
  --k-media: #05070B;
  --k-logo-filter: invert(1);
  --k-mark-filter: brightness(0) invert(1);
  --k-ink-rgb: 238 240 244;
  --k-accent-rgb: 169 184 227;
  --k-on-accent: #0B0E15;
  --k-danger: #F97066;
}
:root {
  --k-font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --k-mono: "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --k-r-btn: 10px;
  --k-r-panel: 12px;
  --k-r-card: 16px;
  --k-max: 1680px;
  --k-gutter: 32px;
  --k-ease: cubic-bezier(.22, 1, .36, 1);
  /* Type scale (Kled): 54 / 48 / 24 / 18 / 16 / 14 / 12, line-height 1.2 for display text */
  --k-fs-display: clamp(38px, 4.4vw, 54px);
  --k-fs-statement: clamp(30px, 3.6vw, 48px);
  --k-fs-title: 24px;
  --k-fs-lead: 18px;
  --k-fs-body: 16px;
  --k-fs-small: 14px;
  --k-fs-label: 13px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--k-chrome-h, 120px) + 16px); -webkit-text-size-adjust: 100%; }
body.k {
  margin: 0;
  background: var(--k-bg);
  color: var(--k-ink);
  font-family: var(--k-font);
  font-size: var(--k-fs-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s, color .2s;
}
:where(.k) img { max-width: 100%; display: block; }
:where(.k) a { color: inherit; }
:where(.k) :where(h1, h2, h3, p) { margin: 0; font-weight: 400; }
.k :focus-visible { outline: 2px solid var(--k-accent); outline-offset: 3px; border-radius: 6px; }
.k-skip { position: absolute; left: -9999px; }
.k-skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--k-panel); padding: 8px 12px; }

/* One fluid frame: up to 1680px of content, 32px gutters (16px on phones) */
.k-wrap { max-width: calc(var(--k-max) + 2 * var(--k-gutter)); margin: 0 auto; padding: 0 var(--k-gutter); }
.k-section { padding: 120px 0; }
.k-section--alt { background: var(--k-bg-alt); }
/* Hairline between stacked sections: the light alt background alone is too faint to separate them. */
.k-section + .k-section { border-top: 1px solid var(--k-line); }

/* Mono label: Kled's uppercase small tag, used for eyebrows, tags, dates and meta */
.k-label {
  font-family: var(--k-mono); font-size: var(--k-fs-label); line-height: 1;
  text-transform: uppercase; letter-spacing: .04em; color: var(--k-ink-2);
}
.k-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 6px;
  background: var(--k-panel); font-family: var(--k-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; color: var(--k-ink-2);
}
.k-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Section header: mono label above a regular-weight title, link aligned right */
.k-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.k-head .k-label { display: block; margin-bottom: 14px; }
.k-h2 { font-size: clamp(28px, 2.2vw, 40px); line-height: 1.15; letter-spacing: -.015em; color: var(--k-ink); }
.k-lede { font-size: var(--k-fs-lead); line-height: 1.45; color: var(--k-ink-2); max-width: 56ch; margin-top: 12px; }
.k-link {
  font-size: var(--k-fs-small); font-weight: 500; text-decoration: none; white-space: nowrap; color: var(--k-accent);
  display: inline-flex; align-items: center; gap: 6px;
}
.k-link::after { content: "\2192"; transition: transform .2s var(--k-ease); }
.k-link:hover::after { transform: translateX(3px); }

/* Buttons: 10px radius, 16px medium label */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px; border-radius: var(--k-r-btn); border: 0;
  font: 500 16px/1 var(--k-font); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  background: var(--k-btn-bg); color: var(--k-btn-fg); transition: background-color .2s;
}
.k .k-btn { color: var(--k-btn-fg); }
.k-btn:hover { background: var(--k-btn-hover); }
.k .k-btn--ghost { background: var(--k-btn2-bg); color: var(--k-btn2-fg); }
.k-btn--ghost:hover { background: var(--k-btn2-hover); }
.k-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.k-btn[aria-disabled="true"] { cursor: default; }
.k-btn:active { transform: scale(.98); }
/* Text roll on hover: label slides up, an identical copy rises from below (wrapped by khala.js) */
.k-roll { display: inline-grid; overflow: hidden; height: 1.1em; line-height: 1.1; }
.k-roll > span { grid-area: 1 / 1; transition: transform .6s var(--k-ease); }
.k-roll > span + span { transform: translateY(110%); }
.k-btn:hover .k-roll > span:first-child { transform: translateY(-110%); }
.k-btn:hover .k-roll > span + span { transform: translateY(0); }

/* Announcement bar: a solid navy band so it reads as a deliberate strip above the nav */
/* Announcement bar and nav are pinned together as one header unit on every page */
.k-announce {
  position: sticky; top: 0; z-index: 51;
  display: block; text-align: center; padding: 11px 16px; text-decoration: none;
  font-size: 13px; line-height: 22px; letter-spacing: .01em; color: var(--k-announce-fg); background: var(--k-announce-bg);
}
.k .k-announce { color: var(--k-announce-fg); }
.k-announce .k-label { margin-right: 10px; color: var(--k-announce-muted); }
.k-announce u { text-underline-offset: 3px; margin-left: 10px; color: var(--k-announce-muted); }
.k-announce:hover u { color: var(--k-announce-fg); }

/* Navigation: solid bar with a permanent rule, full-strength links, current page underlined */
.k-nav {
  position: sticky; top: calc(var(--k-announce-h, 44px) - 1px); z-index: 50; background: var(--k-nav-bg);
  border-bottom: 1px solid var(--k-line); transition: box-shadow .2s;
}
.k-nav.is-scrolled { box-shadow: 0 1px 0 var(--k-line), 0 8px 24px -16px rgb(var(--k-ink-rgb) / .25); }
.k-nav-inner { display: flex; align-items: center; height: 76px; gap: 12px; }
.k-logo img { height: 26px; width: auto; filter: var(--k-logo-filter); }
.k-nav-links { display: flex; gap: 32px; margin-left: auto; margin-right: 20px; }
.k-nav-links a {
  position: relative; font-size: 15px; font-weight: 500; color: var(--k-ink); text-decoration: none; padding: 6px 0;
  transition: color .15s;
}
.k-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--k-accent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--k-ease);
}
.k-nav-links a:hover::after, .k-nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.k-theme-btn, .k-menu-btn {
  width: 40px; height: 40px; border-radius: var(--k-r-btn); flex: 0 0 auto; cursor: pointer;
  display: grid; place-items: center; color: var(--k-ink); border: 0; background: var(--k-panel);
  transition: background-color .2s;
}
.k-theme-btn:hover, .k-menu-btn:hover { background: var(--k-panel-2); }
.k-theme-btn svg { width: 18px; height: 18px; }
[data-theme="dark"] .k-icon-moon, [data-theme="light"] .k-icon-sun { display: none; }
.k-menu-btn { display: none; }
.k-menu-btn span, .k-menu-btn span::before, .k-menu-btn span::after {
  display: block; width: 16px; height: 1.5px; background: var(--k-ink); position: relative;
}
.k-menu-btn span::before, .k-menu-btn span::after { content: ""; position: absolute; left: 0; }
.k-menu-btn span::before { top: -5px; }
.k-menu-btn span::after { top: 5px; }

/* Footer: tagline + link columns + legal line */
.k-footer { padding: 88px 0 40px; font-size: 14px; border-top: 1px solid var(--k-line); }
.k-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.k-footer-brand img { height: 20px; width: auto; margin-bottom: 20px; filter: var(--k-logo-filter); }
.k-footer-brand p { font-size: var(--k-fs-title); line-height: 1.2; max-width: 18ch; }
.k-footer h3 { font-size: 14px; font-weight: 500; color: var(--k-navy); margin-bottom: 16px; }
.k-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.k-footer li a { color: var(--k-ink-2); text-decoration: none; }
.k-footer li a:hover { color: var(--k-ink); }
.k-footer li a[target="_blank"]::after { content: " \2197"; opacity: 0; transition: opacity .3s var(--k-ease); }
.k-footer li a[target="_blank"]:hover::after { opacity: 1; }
.k-footer-legal {
  display: flex; justify-content: space-between; gap: 24px; margin-top: 72px; padding-top: 24px;
  border-top: 1px solid var(--k-line); color: var(--k-ink-2); font-size: 13px;
}
.k-footer-legal p { max-width: 80ch; }

@media (max-width: 900px) {
  .k-footer-grid { grid-template-columns: 1fr 1fr; }
  .k-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  :root { --k-gutter: 16px; }
  .k-section { padding: 80px 0; }
  .k-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
  .k-nav-inner { height: 64px; gap: 8px; }
  .k-logo img { height: 22px; }
  .k-menu-btn { display: grid; }
  .k-theme-btn { margin-left: auto; }
  .k-nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; gap: 0; margin: 0;
    background: var(--k-bg); border-bottom: 1px solid var(--k-line); padding: 8px var(--k-gutter) 16px;
  }
  .k-nav.is-open .k-nav-links { display: flex; }
  .k-nav-links a { padding: 12px 0; font-size: 17px; }
  .k-nav-links a::after { display: none; }
  .k-footer-legal { flex-direction: column; }
  .k-announce .k-hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
}

/* First-visit theme hint (khala.js initThemeHint): bubble under the toggle plus a soft pulse ring. */
.k-nav-inner { position: relative; }
.k-theme-hint {
  position: absolute; right: 0; top: calc(100% - 4px); z-index: 60; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 6px 8px 14px; border-radius: 999px; background: var(--k-accent); color: var(--k-bg);
  font: 500 14px var(--k-font); white-space: nowrap; animation: k-hint-in .35s var(--k-ease) both;
}
.k-theme-hint::before { content: ""; position: absolute; top: -6px; right: 24px; border: 6px solid transparent; border-top: 0; border-bottom-color: var(--k-accent); }
.k-theme-hint button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; opacity: .8; }
.k-theme-hint button:hover { opacity: 1; background: rgb(255 255 255 / .12); }
.k-theme-btn.is-hinted { animation: k-hint-pulse 1.8s ease-out 3; }
@keyframes k-hint-in { from { opacity: 0; transform: translateY(-4px); } }
@keyframes k-hint-pulse { 0% { box-shadow: 0 0 0 0 rgb(21 37 78 / .45); } 100% { box-shadow: 0 0 0 12px rgb(21 37 78 / 0); } }

/* Section prominence: every band is clearly delimited. Page and report heads and the footer sit on the
   light grey band; homepage sections alternate white / grey with a hairline between every section;
   section labels pick up the accent and titles step up in size. */
.k-hero--full + .k-section, .k-section { border-top: 1px solid var(--k-line); }
.k-head .k-label { color: var(--k-accent); }
.k-h2 { font-size: clamp(32px, 2.6vw, 48px); }
.k-footer { background: var(--k-bg-alt); }

/* Scroll reveal (initScrollReveal in khala.js). Uses the `translate` property, not `transform`,
   so components keep their own hover transforms. */
.k-rv { opacity: 0; translate: 0 18px; transition: opacity .7s var(--k-ease), translate .7s var(--k-ease); }
.k-rv.is-in { opacity: 1; translate: none; }
/* Infographic bars grow from zero once their panel is revealed, one after another. */
.ix-panel.k-rv .ix-bar-fill { transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--k-ease), filter .2s; }
.ix-panel.k-rv.is-in .ix-bar-fill { transform: none; }
.ix-panel.k-rv .ix-bar:nth-child(2) .ix-bar-fill { transition-delay: .12s; }
.ix-panel.k-rv .ix-bar:nth-child(3) .ix-bar-fill { transition-delay: .24s; }
.ix-panel.k-rv .ix-bar:nth-child(4) .ix-bar-fill { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) { .k-rv, .ix-panel.k-rv .ix-bar-fill { opacity: 1; translate: none; transform: none; transition: none; } }
@media print { .k-rv, .ix-panel.k-rv .ix-bar-fill { opacity: 1 !important; translate: none !important; transform: none !important; } }