/*
 * Kranium family sites: shared stylesheet.
 *
 * This file is byte-identical in kranium.co/ and kranium.ai/ (each site loads
 * only its own copy; README "Rules"). Edit both copies together.
 *
 * Brand source: GL-003 (tokens below are its values, light canvas only).
 * Layout grammar: GL-008 §2 (tiers, grid, containers).
 * Page spec: 2026-11-11 kranium.co hub site page spec (Score).
 */

/* ---------- Fonts: self-hosted, Latin subset, variable weight ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
  /* GL-003 §2.1 accents. The brand --accent-ai (#12A594) fails text contrast on
     light at every size (GL-003 §2.5 item 3), so it is not defined here: kranium.ai
     teal ships only as the text-safe --accent-ai-text-light (GL-003 §2.5, spec §6). */
  --accent-kranium: #6E56CF;
  --accent-ai-text-light: #0C7568;

  /* GL-003 §2.2 neutral ramp, light values (spec §3: light canvas only) */
  --color-neutral-0: #FCFCFD;
  --color-neutral-1: #F4F5F7;
  --color-neutral-2: #E4E6EA;
  --color-neutral-3: #6E737D;
  --color-neutral-4: #43474E;
  --color-neutral-5: #16181D;

  /* GL-003 §3 families */
  --font-heading: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* GL-003 §3 type scale: size, with its paired line-height */
  --text-display: 56px;
  --text-display-lh: 1.05;
  --text-h1: 40px;
  --text-h1-lh: 1.10;
  --text-h2: 30px;
  --text-h2-lh: 1.20;
  --text-h3: 22px;
  --text-h3-lh: 1.30;
  --text-body: 16px;
  --text-body-lh: 1.55;
  --text-caption: 13px;
  --text-caption-lh: 1.40;

  /* GL-003 §4 spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* GL-008 §2.3 containers */
  --container-measure: 720px;
  --container-default: 1200px;

  /* GL-008 §2.2 grid, bp-compact values (overridden per tier below) */
  --grid-columns: 4;
  --gutter: var(--space-md);
  --page-margin: var(--space-md);

  /* GL-003 §2.6 focus ring (closes T1). Colour per spec §3: --accent-kranium. */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* The K in the header: GL-003 §1.5 item 1 pins no size or clear space.
     Sized to the body line so it never sets the header's height (spec §3). */
  --mark-size: var(--space-lg);
}

@media (min-width: 480px) {
  /* bp-narrow */
  :root {
    --grid-columns: 6;
    --gutter: var(--space-md);
    --page-margin: var(--space-lg);
  }
}

@media (min-width: 768px) {
  /* bp-medium */
  :root {
    --grid-columns: 12;
    --gutter: var(--space-lg);
    --page-margin: var(--space-lg);
  }
}

@media (min-width: 992px) {
  /* bp-wide */
  :root {
    --grid-columns: 12;
    --gutter: var(--space-lg);
    --page-margin: var(--space-2xl);
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light; /* spec §3: neither site follows device dark mode */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-neutral-0);
  color: var(--color-neutral-4);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  font-weight: 400;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-neutral-5);
  font-family: var(--font-heading);
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--text-h1-lh);
  font-weight: 700;
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
  font-weight: 600;
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: 600;
}

p,
ul,
ol {
  margin: 0;
}

/* Links: accent, always underlined (GL-003 §2.4), no hover colour change (spec §3) */
a {
  color: var(--accent-kranium);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Engines without :focus-visible drop this rule and keep their default ring. */
a:focus-visible {
  outline: var(--focus-ring-width) solid var(--accent-kranium);
  outline-offset: var(--focus-ring-offset);
}

/* An email address may break at any character rather than overflow (spec block 5, P5) */
.email {
  overflow-wrap: anywhere;
}

/* ---------- Layout primitives ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container-default) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.container--measure {
  max-width: calc(var(--container-measure) + 2 * var(--page-margin));
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Default: full width of the grid at every tier */
.grid > * {
  grid-column: 1 / -1;
}

/* Columns 1-8 at bp-medium and bp-wide; full width below (reflow-columns) */
@media (min-width: 768px) {
  .grid > .span-8 {
    grid-column: 1 / span 8;
  }
}

.block {
  margin-top: var(--space-2xl);
}

/* ---------- Skip link (block 1) ---------- */

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-neutral-0);
  transform: translateY(calc(-100% - var(--space-md)));
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: none;
}

/* ---------- Header (block 2) ---------- */

.site-header__inner {
  display: flex;
  flex-wrap: wrap; /* bp-compact: nav drops as a group under the K if it cannot fit */
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  padding-block: var(--space-lg);
}

.mark-link {
  display: inline-flex;
  color: var(--accent-kranium); /* the K is fill="currentColor" (GL-003 §1.6) */
}

.mark-link svg {
  display: block;
  width: var(--mark-size);
  height: var(--mark-size);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding-block: var(--space-xs);
}

/* ---------- Hero (P1 block 3) and Statement (P5 block 3) ---------- */

.hero {
  padding-top: var(--space-2xl);
}

.display {
  font-size: var(--text-display);
  line-height: var(--text-display-lh);
  font-weight: 700;
}

.display--ai {
  color: var(--accent-ai-text-light); /* spec §6: the one appearance of the spoke accent */
}

.lede {
  margin-top: var(--space-lg);
  color: var(--color-neutral-4);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--text-h3-lh);
  font-weight: 600;
}

.hero__action {
  margin-top: var(--space-lg);
}

.muted {
  color: var(--color-neutral-3);
}

.statement__line {
  margin-top: var(--space-md);
}

/* The one primary action (spec §3) */
.button {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: var(--accent-kranium);
  color: var(--color-neutral-0);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  font-weight: 600;
  text-decoration: none;
}

/* bp-compact: the primary action spans the full container width */
@media (max-width: 479px) {
  .button {
    display: block;
    text-align: center;
  }
}

/* ---------- The Kranium family (P1 block 4) ---------- */

.section-heading {
  margin-bottom: var(--space-lg);
}

.cards {
  row-gap: var(--gutter);
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--space-md);
  background: var(--color-neutral-1);
  border: 1px solid var(--color-neutral-2);
}

.card__role {
  margin-top: var(--space-sm);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  color: var(--color-neutral-4);
}

.card__status {
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
  font-weight: 500;
  color: var(--color-neutral-4);
}

.card__body {
  margin-top: var(--space-sm);
}

/* bp-medium: stack, each card columns 1-8 */
@media (min-width: 768px) {
  .cards > .card {
    grid-column: 1 / span 8;
  }
}

/* bp-wide: 3-up, 4 columns each, sharing row height */
@media (min-width: 992px) {
  .cards > .card:nth-child(1) {
    grid-column: 1 / span 4;
  }

  .cards > .card:nth-child(2) {
    grid-column: 5 / span 4;
  }

  .cards > .card:nth-child(3) {
    grid-column: 9 / span 4;
  }
}

/* ---------- Contact (P1 block 5) ---------- */

.contact-lines {
  font-style: normal;
}

.contact-lines p + p {
  margin-top: var(--space-sm);
}

/* ---------- Footer (block 6) ---------- */

.site-footer {
  margin-top: var(--space-2xl);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
}

.site-footer__inner {
  display: flex;
  flex-direction: column; /* bp-narrow and bp-compact: stack, source order */
  align-items: flex-start;
  gap: var(--space-sm);
  padding-block: var(--space-lg);
  border-top: 1px solid var(--color-neutral-2);
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: var(--space-sm);
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-block;
  padding-block: var(--space-xs);
}

/* bp-medium and bp-wide: one row, copyright left, links and email right */
@media (min-width: 768px) {
  .site-footer__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .site-footer ul {
    flex-direction: row;
    gap: var(--space-lg);
  }
}

/* ---------- Legal pages (P2, P3) and 404 (P4, P6) ---------- */

.page-title {
  padding-top: var(--space-2xl);
}

.page-title .updated {
  margin-top: var(--space-sm);
  font-size: var(--text-caption);
  line-height: var(--text-caption-lh);
}

.page-title .intro {
  margin-top: var(--space-lg);
}

.toc {
  margin-top: var(--space-xl);
}

.toc__label {
  font-weight: 600;
  color: var(--color-neutral-5);
}

.toc ol {
  margin-top: var(--space-sm);
  padding-left: var(--space-lg);
}

.toc li + li {
  margin-top: var(--space-xs);
}

.legal section {
  margin-top: var(--space-xl);
}

.legal h2 {
  margin-bottom: var(--space-lg);
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: var(--space-md);
}

.legal ul {
  padding-left: var(--space-lg);
}

.legal li + li {
  margin-top: var(--space-xs);
}

.not-found__text {
  margin-top: var(--space-lg);
}