/* ==========================================================================
   systemagical design tokens + base styles
   Source of truth: CLAUDE.md. Do not add colours, sizes or radii that
   are not defined here. If something is missing, add a token first.

   Fonts: load Inter (variable, with the optical-size axis) before this file:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..600&display=swap">

   Theming: light on :root. Dark follows the OS unless the page forces a
   theme with <html data-theme="light"> or <html data-theme="dark">.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens: light theme (default)
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Colour: surfaces */
  --color-bg: #FFFFFF;
  --color-surface: #F4F5FA;          /* mist */
  --color-line: #E3E6F0;             /* hairlines, card borders (decorative) */
  --color-line-strong: #7C83A3;      /* input borders: 3.7:1 on bg, 3.4:1 on surface */
  --color-deep: #0B1026;             /* midnight bands, same in both themes */

  /* Colour: text */
  --color-text: #0E1330;             /* ink, 18.2:1 on bg */
  --color-text-muted: #5A6080;       /* 6.1:1 on bg, 5.6:1 on surface */

  /* Colour: interactive */
  --color-primary: #3A41C8;          /* links, buttons, focus: 7.6:1 on bg */
  --color-primary-hover: #2F36B0;
  --color-on-primary: #FFFFFF;       /* 7.6:1 on primary, 9.2:1 on hover */
  --color-accent: #8E97FF;           /* periwinkle: decorative only, never text on light */
  --color-focus: #3A41C8;

  /* Colour: status (form feedback only) */
  --color-error: #B42318;            /* 6.6:1 on bg */
  --color-success: #067647;          /* 5.7:1 on bg */

  /* Colour: inside midnight bands (same values in both themes) */
  --band-bg: #0B1026;
  --band-text: #F4F5FA;              /* 17.3:1 */
  --band-text-muted: #A9AFC9;        /* 8.7:1 */
  --band-primary: #8E97FF;           /* 7.2:1 */
  --band-line: #252C52;

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 64px;  --lh-display: 68px;
  --fs-h1: 44px;       --lh-h1: 50px;
  --fs-h2: 32px;       --lh-h2: 38px;
  --fs-h3: 24px;       --lh-h3: 30px;
  --fs-h4: 19px;       --lh-h4: 26px;
  --fs-body: 17px;     --lh-body: 28px;
  --fs-ui: 15px;       --lh-ui: 20px;   /* buttons, nav. Only addition to the spec scale */
  --fs-small: 14px;    --lh-small: 20px;
  --fs-label: 13px;    --lh-label: 16px;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-tight: -0.02em;         /* 32px and above */
  --tracking-snug: -0.01em;          /* headings below 32px */
  --tracking-label: 0.01em;

  --measure: 68ch;                   /* max line length for body copy */

  /* Space: 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Layout */
  --content-max: 1200px;
  --gutter: 24px;
  --page-margin: 24px;
  --section-y: var(--space-9);       /* 96px desktop, 64px mobile */
  --header-h: 72px;

  /* Shape */
  --radius-sm: 4px;                  /* buttons, inputs, tags, inline code */
  --radius-md: 8px;                  /* cards, images, callouts, code blocks */
  --border-width: 1px;
  --shadow-1: 0 1px 2px rgba(14, 19, 48, 0.06);
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  /* Motion */
  --duration: 150ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Graphic device: angle of the mark's cross bar */
  --diagonal: 30deg;
}

/* Breakpoints (CSS variables cannot be used in media queries; keep in sync):
   sm 480px | md 768px | lg 1024px | xl 1280px. Mobile is < 768px. */
@media (max-width: 767.98px) {
  :root {
    --fs-display: 40px;  --lh-display: 44px;
    --fs-h1: 34px;       --lh-h1: 40px;
    --fs-h2: 26px;       --lh-h2: 32px;
    --fs-h3: 21px;       --lh-h3: 28px;
    --page-margin: 16px;
    --section-y: var(--space-8);
    --header-h: 64px;
  }
}

/* --------------------------------------------------------------------------
   2. Tokens: dark theme (OS preference, unless forced light)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #0B1026;
    --color-surface: #141A36;
    --color-line: #252C52;
    --color-line-strong: #6A72A0;    /* 4.1:1 on bg, 3.7:1 on surface */
    --color-text: #F4F5FA;           /* 17.3:1 */
    --color-text-muted: #A9AFC9;     /* 8.7:1 */
    --color-primary: #8E97FF;        /* 7.2:1 */
    --color-primary-hover: #D6D9FF;
    --color-on-primary: #0B1026;     /* 7.2:1 on primary, 13.6:1 on hover */
    --color-accent: #D6D9FF;
    --color-focus: #8E97FF;
    --color-error: #FDA29B;
    --color-success: #75E0A7;
    --shadow-1: none;
  }
}

/* Dark theme: forced */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0B1026;
  --color-surface: #141A36;
  --color-line: #252C52;
  --color-line-strong: #6A72A0;
  --color-text: #F4F5FA;
  --color-text-muted: #A9AFC9;
  --color-primary: #8E97FF;
  --color-primary-hover: #D6D9FF;
  --color-on-primary: #0B1026;
  --color-accent: #D6D9FF;
  --color-focus: #8E97FF;
  --color-error: #FDA29B;
  --color-success: #75E0A7;
  --shadow-1: none;
}

/* --------------------------------------------------------------------------
   3. Base elements
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  font-optical-sizing: auto;         /* display cut at large sizes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }

h1, h2, h3, h4 {
  color: var(--color-text);
  font-optical-sizing: auto;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium);   letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium);   letter-spacing: var(--tracking-snug); }

p { text-wrap: pretty; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a {
  color: var(--color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration) var(--ease), text-decoration-thickness var(--duration) var(--ease);
}
a:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }

:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent); color: #0B1026; }

hr { border: 0; border-top: var(--border-width) solid var(--color-line); margin: var(--space-7) 0; }

.tabular { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-4); background: var(--color-bg); color: var(--color-primary);
  border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-sm);
}
.skip-link:focus-visible { top: var(--space-4); }

/* --------------------------------------------------------------------------
   4. Type scale classes (use when the visual size differs from the tag)
   -------------------------------------------------------------------------- */
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-medium); letter-spacing: var(--tracking-snug); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-medium); letter-spacing: var(--tracking-snug); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-lead { font-size: var(--fs-h4); line-height: 30px; color: var(--color-text-muted); max-width: 56ch; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); }
.t-label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); }
.t-muted { color: var(--color-text-muted); }

/* Mobile: display and h2 drop below 32px, so tracking loosens */
@media (max-width: 767.98px) {
  h2, .t-h2 { letter-spacing: var(--tracking-snug); }
  .t-lead { font-size: var(--fs-body); line-height: var(--lh-body); }
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--surface { background: var(--color-surface); }
.stack > * + * { margin-top: var(--space-5); }

/* Midnight band: always dark, in both themes */
.band {
  position: relative;
  overflow: hidden;
  background: var(--band-bg);
  border-block: var(--border-width) solid var(--band-line); /* separates the band from dark-theme surfaces */
  color: var(--band-text);
  --color-text: var(--band-text);
  --color-text-muted: var(--band-text-muted);
  --color-primary: var(--band-primary);
  --color-primary-hover: #D6D9FF;
  --color-on-primary: #0B1026;
  --color-line: var(--band-line);
  --color-line-strong: #6A72A0;
  --color-focus: #8E97FF;
  --color-bg: var(--band-bg);
  --color-surface: #141A36;
}

/* Theme-specific assets (logo swap). Put both <img>s in the markup. */
.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none; }
  :root:not([data-theme="light"]) .only-dark { display: block; }
}
:root[data-theme="dark"] .only-light { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
.band .only-light { display: none; }
.band .only-dark { display: block; }

/* --------------------------------------------------------------------------
   6. Graphic device: the 30-degree diagonal. Max one per section,
      max two per page. Always aria-hidden, always decorative.
   -------------------------------------------------------------------------- */
.diag-hairline {
  position: absolute;
  pointer-events: none;
  width: 140%;
  height: 1px;
  background: var(--color-accent);
  transform: rotate(var(--diagonal));
  transform-origin: left center;
}
.diag-band {
  position: absolute;
  pointer-events: none;
  width: 160%;
  height: 24px;
  background: var(--color-accent);
  opacity: 0.35;
  transform: rotate(var(--diagonal));
  transform-origin: left center;
}
.mark-crop {                          /* oversized mark in a corner of a midnight band */
  position: absolute;
  pointer-events: none;
  width: 420px;
  height: auto;
  opacity: 0.1;                       /* 0.06 to 0.10 only; use the on-dark mark */
}

/* --------------------------------------------------------------------------
   7. Components
   -------------------------------------------------------------------------- */

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-line);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
/* Lockup SVGs include clear space (1/4 of the file height on every side).
   The negative margin aligns the visible mark with the grid edge. */
.site-header__logo { display: block; margin-left: -14px; border-radius: var(--radius-sm); }
.site-header__logo img { height: 56px; width: auto; }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.site-nav a:not(.btn) {
  color: var(--color-text); text-decoration: none;
  font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-medium);
}
.site-nav a:not(.btn):hover { color: var(--color-primary); }
.site-nav a[aria-current="page"] { color: var(--color-primary); text-decoration: underline; text-underline-offset: 6px; }
.site-header .nav-toggle { display: none; }
@media (max-width: 767.98px) {
  .site-header__logo { margin-left: -12px; }
  .site-header__logo img { height: 48px; }    /* visible lockup 24px: the minimum */
  .site-nav { display: none; }
  .site-nav[data-open="true"] {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--color-bg); border-bottom: var(--border-width) solid var(--color-line);
    padding: var(--space-2) var(--page-margin) var(--space-4);
  }
  .site-nav[data-open="true"] a:not(.btn) { padding: var(--space-3) 0; font-size: var(--fs-body); }
  .site-nav[data-open="true"] .btn { margin-top: var(--space-3); }
  .site-header .nav-toggle { display: inline-flex; }
}

/* Buttons: 44px minimum target, 4px radius. Never pill-shaped. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  font-family: inherit; font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-semibold);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: var(--border-width) solid transparent; border-radius: var(--radius-sm);
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-line-strong); }
.btn--secondary:hover { background: var(--color-surface); color: var(--color-text); }
.btn--text {
  min-height: 44px; padding: 0; background: none; border: 0; color: var(--color-primary);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.btn--text:hover { color: var(--color-primary-hover); text-decoration-thickness: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Form fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); color: var(--color-text); }
.field__help { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-text-muted); }
.field__error { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-error); }
.input, .textarea, .select {
  width: 100%; min-height: 48px; padding: 0 14px;
  font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-body); /* 17px: no iOS zoom */
  color: var(--color-text); background: var(--color-bg);
  border: var(--border-width) solid var(--color-line-strong); border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease);
}
.textarea { min-height: 144px; padding: var(--space-3) 14px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-text-muted); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--color-primary); outline: var(--focus-ring); outline-offset: 1px; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-error); }

/* Newsletter (inline form: input + button on one row from 480px) */
.signup { display: flex; flex-direction: column; gap: var(--space-3); max-width: 480px; }
.signup__row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 480px) {
  .signup__row { flex-direction: row; }
  .signup__row .input { flex: 1; }
  .signup__row .btn { min-height: 48px; }
}

/* Card */
.card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: border-color var(--duration) var(--ease);
}
.card--surface { background: var(--color-surface); box-shadow: none; }
.card p { color: var(--color-text-muted); }
a.card, .card--link { color: inherit; text-decoration: none; }
a.card:hover, .card--link:hover { border-color: var(--color-line-strong); }
@media (max-width: 767.98px) { .card { padding: var(--space-5); } }

/* Callout */
.callout {
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-line);
  border-radius: var(--radius-md);
}
.callout__title { display: block; margin-bottom: var(--space-2); font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label); color: var(--color-primary); }

/* Tag */
.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-2);
  font-size: var(--fs-label); line-height: var(--lh-label); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label);
  color: var(--color-text-muted); background: var(--color-surface);
  border: var(--border-width) solid var(--color-line); border-radius: var(--radius-sm);
}

/* Footer */
.site-footer {
  padding-block: var(--space-8) var(--space-7);
  border-top: var(--border-width) solid var(--color-line);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-text-muted);
}
.site-footer a { color: var(--color-text-muted); }
.site-footer a:hover { color: var(--color-primary); }
.site-footer li a { display: inline-block; padding-block: 2px; } /* 24px minimum target */

/* --------------------------------------------------------------------------
   8. Prose: articles and long-form pages
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); font-size: var(--fs-body); line-height: var(--lh-body); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-6); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--color-text-muted); }
.prose strong { font-weight: var(--fw-semibold); }
.prose blockquote {
  padding-left: var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-size: var(--fs-h4); line-height: 30px; color: var(--color-text);
}
.prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  padding: 2px 4px; background: var(--color-surface); border-radius: var(--radius-sm);
}
.prose pre {
  overflow-x: auto; padding: var(--space-4) var(--space-5);
  font-family: var(--font-mono); font-size: var(--fs-small); line-height: var(--lh-small);
  background: var(--color-surface); border: var(--border-width) solid var(--color-line); border-radius: var(--radius-md);
}
.prose pre code { padding: 0; background: none; font-size: inherit; }
.prose img { border-radius: var(--radius-md); }
.prose figcaption { margin-top: var(--space-2); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-text-muted); }
.prose hr { margin: var(--space-7) 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); font-variant-numeric: tabular-nums; }
.prose th { text-align: left; font-weight: var(--fw-semibold); }
.prose th, .prose td { padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: var(--border-width) solid var(--color-line); }

/* --------------------------------------------------------------------------
   9. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}