/* Generated by scripts/design_tokens.py. Edit design-system sources. */
:root {
  color-scheme: light dark;
  --palette-ivory: #fefdfb;
  --palette-charcoal: #2c3034;
  --palette-ink: #212224;
  --palette-muted: #6d6b66;
  --palette-note: #656568;
  --palette-border: #d5d5d5;
  --palette-hover: #e7e7e7;
  --palette-rule: #999;
  --color-surface: var(--palette-ivory);
  --color-brand: var(--palette-charcoal);
  --color-text: var(--palette-ink);
  --color-text-muted: var(--palette-muted);
  --color-text-note: var(--palette-note);
  --color-border: var(--palette-border);
  --color-surface-hover: var(--palette-hover);
  --color-note-rule: var(--palette-rule);
  --color-focus: var(--palette-ink);
  --color-backdrop: rgb(0 0 0 / 25%);
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-100: 100px;
  --space-160: 160px;
  --font-brand: Inder, sans-serif;
  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-11: 11px;
  --font-size-12: 12px;
  --font-size-21: 21px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-40: 40px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --line-height-brand: 1.2;
  --line-height-footer: 1.6;
  --line-height-body: 1.7;
  --border-width: 1px;
  --focus-width: 2px;
  --focus-offset: 5px;
  --underline-width: 1px;
  --underline-offset: 4px;
  --logo-stroke-width: 2px;
  --radius: 0px;
  --breakpoint-mobile-max: 600px;
  --breakpoint-desktop-min: 601px;
  --breakpoint-short-height: 500px;
  --brand-max: 1008px;
  --brand-base: 240px;
  --brand-growth: 40vw;
  --brand-short-max: 180svh;
  --logo-width: 32.16471416%;
  --logo-compensation: -0.60616658cqi;
  --wordmark-gap: 13.492063%;
  --wordmark-size: 4.761905cqi;
  --wordmark-tracking: 5.952381cqi;
  --legal-max: 760px;
  --dialog-max: 480px;
  --legal-title-fluid: 5vw;
  --page-inline: var(--space-24);
  --page-block: var(--space-100);
  --mobile-page-block: var(--space-32);
  --footer-padding: var(--space-24);
  --footer-row-gap: var(--space-10);
  --footer-column-gap: var(--space-28);
  --footer-nav-gap: var(--space-6);
  --footer-control-block: var(--space-10);
  --footer-control-inline: var(--space-8);
  --footer-mobile-gap: var(--space-2);
  --footer-mobile-block: var(--space-10);
  --footer-mobile-inline: var(--space-16);
  --footer-copyright-offset: var(--space-14);
  --footer-mobile-nav-top: var(--space-4);
  --dialog-padding: var(--space-32);
  --dialog-gutter: var(--space-32);
  --dialog-actions-gap: var(--space-12);
  --dialog-actions-top: var(--space-26);
  --legal-top: var(--space-64);
  --legal-bottom: var(--space-160);
  --legal-title-top: var(--space-48);
  --legal-title-bottom: var(--space-16);
  --footer-target-height: 44px;
  --footer-mobile-line-height: 16px;
  --motion-brand-fade: 975ms;
  --motion-letters: 3200ms;
  --motion-content-start: 1350ms;
  --motion-footer-fade: 2000ms;
  --motion-footer-step: 480ms;
  --motion-draw: 1000ms;
  --motion-draw-second-start: 500ms;
  --motion-stroke-out: 200ms;
  --motion-stroke-out-start: 1500ms;
  --motion-fill: 450ms;
  --motion-fill-start: 1700ms;
  --motion-hover: 180ms;
  --ease-entrance: cubic-bezier(0.37, 0, 0.23, 1);
  --ease-trace: ease-in-out;
  --ease-hover: ease;
  --letter-perspective: 500px;
  --letter-angle: 85deg;
  --font-size-body: 16px;
  --radius-pill: 999px;
  --footer-contact-height: 28px;
  --wordmark-mobile-size-min: 19px;
  --wordmark-mobile-size-fluid: 5.7cqi;
  --wordmark-mobile-size-max: 25px;
  --wordmark-mobile-tracking: 4cqi;
  --wordmark-mobile-word-gap: 8cqi;
  --wordmark-mobile-gap-min: 32px;
  --wordmark-mobile-gap-fluid: 10cqi;
  --wordmark-mobile-gap-max: 36px;
  --wordmark-mobile-stroke: 0.15px;
  --footer-mobile-target-height: 25px;
  --palette-night: #17191b;
  --palette-dark-text: #e9e7e3;
  --palette-dark-muted: #aaa9a5;
  --palette-dark-border: #41454a;
  --palette-dark-hover: #292d31;
  --palette-dark-rule: #757a80;
  --header-mark-width: 28px;
  --header-mark-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-surface: #17191b;
    --color-brand: #fefdfb;
    --color-text: #e9e7e3;
    --color-text-muted: #aaa9a5;
    --color-text-note: #aaa9a5;
    --color-border: #41454a;
    --color-surface-hover: #292d31;
    --color-note-rule: #757a80;
    --color-focus: #fefdfb;
    --color-backdrop: rgb(0 0 0 / 65%);
  }
}
/* Authoring source. Build with python3 scripts/prepare.py; do not edit styles.css. */
@font-face {
  font-family: Inder;
  src: url("assets/fonts/Inder-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: var(--color-surface); }
body { margin: 0; position: relative; min-height: 100svh; font-family: var(--font-brand); font-size: var(--font-size-body); color: var(--color-text); }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--page-block) var(--page-inline);
}
.brand {
  width: min(100%, calc(var(--brand-base) + var(--brand-growth)), var(--brand-max));
  min-width: 0;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand-logo { display: block; width: var(--logo-width); height: auto; margin-block: var(--logo-compensation); }
.brand h1 {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: var(--wordmark-gap) 0 0;
  color: var(--color-brand);
  font-family: var(--font-brand);
  font-size: var(--wordmark-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-brand);
  text-transform: uppercase;
}
.brand-word { display: inline-flex; gap: var(--wordmark-tracking); }
.brand-letter { display: inline-block; transform-origin: center; backface-visibility: hidden; }
.brand-logo path { fill: var(--color-brand); stroke: var(--color-brand); stroke-opacity: 0; }
@media (max-height: 500px) and (min-width: 600px) {
  .brand { max-width: var(--brand-short-max); }
}
.site-footer {
  font-family: var(--font-ui);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--footer-row-gap) var(--footer-column-gap);
  padding: var(--footer-padding);
  color: var(--color-text-muted);
  font-size: var(--font-size-12);
  line-height: var(--line-height-footer);
}
.site-footer > span { font-weight: var(--font-weight-semibold); }
.site-footer .copyright-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-hover) var(--ease-hover);
}
.site-footer .copyright-link:hover { color: var(--color-text); }
.site-footer nav { font-size: var(--font-size-11); display: flex; justify-content: center; flex-wrap: wrap; gap: 0 var(--footer-nav-gap); }
.legal-pair { display: contents; }
a { color: inherit; text-underline-offset: var(--underline-offset); }
.site-footer nav a { text-decoration: none; }
.site-footer nav a, .site-footer button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--footer-target-height);
  padding: var(--footer-control-block) var(--footer-control-inline);
  transition: color var(--motion-hover) var(--ease-hover);
  text-decoration-thickness: var(--underline-width);
  text-underline-offset: var(--underline-offset);
}
.site-footer nav a:hover, .site-footer button:hover { color: var(--color-text); text-decoration: underline; }
.site-footer button { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.cookie-dialog {
  width: min(var(--dialog-max), calc(100% - var(--dialog-gutter)));
  padding: var(--dialog-padding);
  border: var(--border-width) solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}
.cookie-dialog::backdrop { background: var(--color-backdrop); }
.cookie-dialog h2 { margin-top: 0; font-size: var(--font-size-24); font-weight: var(--font-weight-regular); }
.cookie-dialog p, .legal-content p, .legal-content li { line-height: var(--line-height-body); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: var(--dialog-actions-gap); margin-top: var(--dialog-actions-top); }
.cookie-actions button { flex: 1; }
.cookie-preferences-button { min-height: var(--footer-target-height); }
.cookie-actions button, .cookie-preferences-button { padding: var(--space-12) var(--space-16); background: transparent; border: var(--border-width) solid var(--color-text); color: inherit; font: inherit; cursor: pointer; }
.cookie-actions button:hover, .cookie-preferences-button:hover { background: var(--color-surface-hover); }
.legal-page main { display: block; max-width: var(--legal-max); margin: auto; padding: var(--legal-top) var(--page-inline) var(--legal-bottom); }
.legal-content h1 {
  display: block;
  width: 100%;
  color: var(--color-brand);
  font-family: var(--font-brand);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-brand);
  font-size: clamp(var(--font-size-28), var(--legal-title-fluid), var(--font-size-40));
  letter-spacing: normal;
  text-transform: none;
  margin: var(--legal-title-top) 0 var(--legal-title-bottom);
}
.legal-content h2 { font-size: var(--font-size-21); font-weight: var(--font-weight-regular); margin-top: var(--space-32); }
.draft-note { border-left: var(--focus-width) solid var(--color-note-rule); padding-left: var(--space-16); color: var(--color-text-note); }
@media (max-width: 600px) {
  .brand h1 {
    justify-content: center;
    gap: var(--wordmark-mobile-word-gap);
    -webkit-text-stroke: var(--wordmark-mobile-stroke) currentColor;
    font-size: clamp(var(--wordmark-mobile-size-min), var(--wordmark-mobile-size-fluid), var(--wordmark-mobile-size-max));
    margin-top: clamp(var(--wordmark-mobile-gap-min), var(--wordmark-mobile-gap-fluid), var(--wordmark-mobile-gap-max));
  }
  .brand-word { gap: var(--wordmark-mobile-tracking); }
  main { min-height: 100vh; min-height: 100dvh; padding-top: var(--mobile-page-block); padding-bottom: var(--mobile-page-block); }
  .site-footer { position: relative; flex-direction: column; gap: var(--footer-mobile-gap); padding: var(--footer-mobile-block) var(--footer-mobile-inline); padding-bottom: calc(max(var(--footer-copyright-offset), env(safe-area-inset-bottom)) + var(--footer-mobile-block) + var(--footer-mobile-nav-top)); }
  body:not(.legal-page) .site-footer > span { position: absolute; bottom: calc(100% + max(var(--footer-copyright-offset), env(safe-area-inset-bottom))); left: var(--footer-mobile-inline); right: var(--footer-mobile-inline); text-align: center; }
  .site-footer nav { flex-direction: column; align-items: center; width: 100%; gap: 0; padding-top: var(--footer-mobile-nav-top); }
  .site-footer nav a, .site-footer button { white-space: nowrap; justify-content: center; text-align: center; min-height: var(--footer-mobile-target-height); line-height: var(--footer-mobile-line-height); padding: 0 var(--footer-control-inline); }
}
.site-header {
  display: flex;
  align-items: center;
  gap: var(--space-24);
  position: absolute;
  top: max(var(--page-inline), env(safe-area-inset-top));
  right: max(var(--page-inline), env(safe-area-inset-right));
}
.header-link {
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-footer);
  text-decoration: none;
  transition: color var(--motion-hover) var(--ease-hover);
}
.header-link:hover { color: var(--color-text); }
@media (max-width: 600px) {
  .site-header {
    top: max(var(--footer-mobile-inline), env(safe-area-inset-top));
    right: max(var(--footer-mobile-inline), env(safe-area-inset-right));
  }
}
/* Complete static states are the default: no JS, font timeout, and reduced motion. */
.brand-font-pending .brand { opacity: 0; }
@keyframes brand-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes letter-arrive {
  from { opacity: 0; transform: perspective(var(--letter-perspective)) rotateY(var(--letter-angle)); }
  to { opacity: 1; transform: perspective(var(--letter-perspective)) rotateY(0deg); }
}
@keyframes logo-draw {
  0% { stroke-dashoffset: 1; visibility: hidden; }
  0.01% { visibility: visible; }
  100% { stroke-dashoffset: 0; visibility: visible; }
}
@keyframes logo-stroke-out { from { stroke-opacity: 1; } to { stroke-opacity: 0; } }
@keyframes logo-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .brand-font-ready .brand-logo { animation: brand-arrive var(--motion-brand-fade) var(--ease-entrance) both; }
  .brand-font-ready .brand-letter { animation: letter-arrive var(--motion-letters) var(--ease-entrance) both; animation-delay: var(--motion-content-start); }
  .brand-font-ready .brand-logo path {
    stroke-dasharray: 1 1;
    animation-name: logo-draw, logo-stroke-out, logo-fill;
    animation-duration: var(--motion-draw), var(--motion-stroke-out), var(--motion-fill);
    animation-timing-function: var(--ease-trace), var(--ease-trace), var(--ease-trace);
    animation-delay: 0ms, var(--motion-stroke-out-start), var(--motion-fill-start);
    animation-fill-mode: both, both, both;
  }
  .brand-font-ready .brand-logo path:nth-of-type(2) { animation-delay: var(--motion-draw-second-start), var(--motion-stroke-out-start), var(--motion-fill-start); }
}
@media (min-width: 601px) and (prefers-reduced-motion: no-preference) {
  .site-footer > span { --footer-order: 0; }
  .site-footer .legal-pair:first-of-type a:first-child { --footer-order: 2; }
  .site-footer .legal-pair:first-of-type a:last-child { --footer-order: 3; }
  .site-footer .legal-pair:nth-of-type(2) a { --footer-order: 4; }
  .site-footer button { --footer-order: 5; }
  .brand-font-pending .header-link { opacity: 0; }
  .brand-font-ready .header-link {
    animation: brand-arrive var(--motion-footer-fade) var(--ease-entrance) both;
    animation-delay: calc(var(--motion-content-start) + var(--motion-footer-step));
  }
  .header-link:focus-visible { animation: none; opacity: 1; }
  .brand-font-pending .site-footer > span, .brand-font-pending .site-footer nav a, .brand-font-pending .site-footer button { opacity: 0; }
  .brand-font-ready .site-footer > span, .brand-font-ready .site-footer nav a, .brand-font-ready .site-footer button {
    animation: brand-arrive var(--motion-footer-fade) var(--ease-entrance) both;
    animation-delay: calc(var(--motion-content-start) + var(--footer-order) * var(--motion-footer-step));
  }
  .brand-font-pending .site-footer:focus-within > span,
  .brand-font-pending .site-footer:focus-within a,
  .brand-font-pending .site-footer:focus-within button,
  .brand-font-ready .site-footer:focus-within > span,
  .brand-font-ready .site-footer:focus-within a,
  .brand-font-ready .site-footer:focus-within button { animation: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .site-footer nav a, .site-footer button, .header-link, .site-footer .copyright-link { transition: none; }
}

/* Public brand reference. */
.brand-page main { padding-bottom: var(--space-48); }
.brand-page .site-footer { position: relative; }
.brand-intro { font-size: var(--font-size-21); }
.brand-section { margin-top: var(--space-64); }
.brand-specimen { padding: var(--space-48) var(--space-24); border: var(--border-width) solid var(--color-border); text-align: center; }
.brand-specimen img { display: block; width: 32%; height: auto; margin: auto; }
.brand-specimen p { color: var(--color-brand); font-size: var(--font-size-24); margin-bottom: 0; }
.brand-type-sample { font-size: var(--font-size-28); color: var(--color-brand); }
.brand-palette { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-24); }
.brand-palette h3 { font: var(--font-weight-semibold) var(--font-size-body) var(--font-ui); }
.brand-palette p { font: var(--font-size-12)/var(--line-height-body) var(--font-ui); }
.brand-swatch { height: var(--space-64); border: var(--border-width) solid var(--color-border); }
.swatch-surface { background: var(--color-surface); }
.swatch-charcoal { background: var(--color-brand); }
.swatch-muted { background: var(--color-text-muted); }
.site-footer .brand-page-link { --footer-order: 5; }

.brand-section-nav, .asset-downloads { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); font-family: var(--font-ui); font-size: var(--font-size-12); line-height: var(--line-height-body); }
.brand-asset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-16); }
.asset-example { margin: 0; padding: var(--space-32); background: white; color: var(--palette-ink); color-scheme: light; border: var(--border-width) solid var(--color-border); text-align: center; }
.asset-example-dark { background: black; color: white; }
.asset-example img { display: block; width: 55%; height: auto; margin: var(--space-16) auto var(--space-32); }
.asset-example figcaption { font: var(--font-size-12)/var(--line-height-body) var(--font-ui); }
.brand-lockup-examples { display: grid; gap: var(--space-16); }
.lockup-example img { width: 100%; }
.brand-token-scroll { overflow-x: auto; }
.brand-token-table { width: 100%; border-collapse: collapse; font: var(--font-size-12)/var(--line-height-body) var(--font-ui); }
.brand-token-table th, .brand-token-table td { padding: var(--space-12) var(--space-8); border-bottom: var(--border-width) solid var(--color-border); text-align: left; overflow-wrap: anywhere; min-width: 100px; }
.brand-token-table th { font-weight: var(--font-weight-semibold); }
.brand-palette h4 { font-family: var(--font-ui); font-weight: var(--font-weight-semibold); }

/* Interior-page identity stays centered independently of the navigation width. */
.site-header-interior {
  left: max(var(--page-inline), env(safe-area-inset-left));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
}
.header-back {
  grid-column: 1;
  justify-self: start;
  display: grid;
  place-items: center;
  width: var(--header-mark-target);
  height: var(--header-mark-target);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-pill);
  background: transparent;
  line-height: 1;
  transition: color var(--motion-hover) var(--ease-hover), background-color var(--motion-hover) var(--ease-hover), border-color var(--motion-hover) var(--ease-hover);
}
.header-back:hover { background: var(--color-surface-hover); border-color: var(--color-text-muted); }
.header-home {
  grid-column: 2;
  display: grid;
  place-items: center;
  width: var(--header-mark-target);
  min-height: var(--header-mark-target);
  color: var(--color-brand);
}
.header-home svg { display: block; width: var(--header-mark-width); height: auto; }
.header-links { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; gap: var(--space-24); }
@media (max-width: 600px) {
  .site-header-interior { left: max(var(--footer-mobile-inline), env(safe-area-inset-left)); }
  .header-links { flex-wrap: wrap; gap: var(--space-8); text-align: right; }
}

@media (prefers-reduced-motion: reduce) { .header-back { transition: none; } }