/* Fonts, tokens, reset, the two-column page grid and the reveal-on-load system. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/Geist-var.woff2") format("woff2");
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/GeistMono-var.woff2") format("woff2");
}
/* metric-matched Arial so the swap to Geist doesn't shift lines */
@font-face {
  font-family: "Geist Fallback";
  src: local(Arial);
  size-adjust: 102.83%;
  ascent-override: 101%;
  descent-override: 29%;
  line-gap-override: 0%;
}

:root {
  /* colour */
  --paper: #f4f4f6;
  --ink: #0b1015;
  --ink-86: #0b1015db;
  --ink-68: #0b1015ad;
  --ink-60: #0b101599;
  --ink-45: #0b101573;
  --ink-soft: #0b1015ad;
  --ink-faint: #0b101566;
  --rule: #dfdfdf;
  --warmwhite: #fffbf5;
  --logo-ink: var(--aivc-black);

  /* AIVC. Black 100 is the only colour the logo takes on light and green grounds,
     and the ink of anything set on the green. */
  --aivc-black: #1c1c1c;
  --logo: var(--aivc-black);
  /* Green #00FF7F is a SURFACE, never type: 1.35:1 on white. Large fills and low-alpha tints only. */
  --accent: #00ff7f;
  --on-accent: var(--aivc-black);
  --accent-tint: #00ff7f1f;
  --accent-tint-strong: #00ff7f38;
  /* #006633 is the one green that may be type: 7.12:1 on white. Also thin strokes and small marks. */
  --accent-text: #006633;
  --accent-text-50: #00663380;
  --tick: #0066334d;
  --live: var(--accent-text);
  /* key links run between ink and the type green, so every stop of the wash passes AA on white */
  --link-start: var(--aivc-black);
  --link-end: var(--accent-text);
  --link-frame: #00663366;

  /* type */
  --font: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-statement: 40px;
  --lh-statement: 1.12;
  --fs-dek: 17px;
  --fs-body: 17px;
  --lh-body: 1.65;

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-cta: cubic-bezier(0.23, 1, 0.32, 1);
  --spring-36: linear(
    0, 0.0791, 0.2369, 0.4041, 0.5522, 0.6723, 0.7649, 0.8339, 0.884, 0.9198, 0.945, 0.9625,
    0.9746, 0.9829, 0.9885, 0.9923, 0.9949, 0.9966, 0.9977, 0.9985, 0.999, 1, 1
  );
  --dur-hover: 0.2s;
  --dur-press: 0.12s;
  --dur-cta: 0.36s;
  --dur-link: 0.4s;
  --dur-reveal: 0.9s;

  /* layout */
  --rail-w: 208px;
  --rail-gap: 108px;
  --col-w: 640px;
  --sp-rail-top: 64px;
  --sp-col-top: 64px;
  --sp-section: 72px;
  --sp-para: 24px;
  --sp-note-statement: 32px;
  --sp-statement-dek: 20px;
  --sp-dek-actions: 24px;
  --sp-actions-figure: 64px;
  --sp-figure-memo: 48px;
  --sp-beat-para: 14px;
  --sp-rule-head: 28px;
  --sp-head-content: 18px;
  --measure-body: 600px;

  /* the block-bar ticks used by the live OpenRouter card */
  --tick-grey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.25' height='16' viewBox='0 0 5.25 16'%3E%3Crect width='3' height='16' rx='1.5' fill='%23ededed'/%3E%3C/svg%3E");
  --tick-accent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5.25' height='16' viewBox='0 0 5.25 16'%3E%3Crect width='3' height='16' rx='1.5' fill='%23006633'/%3E%3C/svg%3E");

  /* the "door" arrow: two arrows in one mask, slid from the lower-left one to the upper-right one on hover */
  --door-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath transform='translate(-3 9) scale(.75)' d='M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z'/%3E%3Cpath transform='translate(9 -3) scale(.75)' d='M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z'/%3E%3C/svg%3E");
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}
h1,
h2 {
  text-wrap: balance;
}
p,
figcaption {
  text-wrap: pretty;
}
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

/* inline code: commands and paths in running text */
code {
  padding: 1px 4px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.86em;
  letter-spacing: 0;
}
pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}
.cta code {
  background: #ffffff1f;
}

::selection {
  background: #00ff7f4d;
}

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

.skip {
  position: absolute;
  top: 16px;
  left: 24px;
  z-index: 10;
  padding: 8px 12px;
  border: 1px solid var(--ink);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  translate: 0 -8px;
  transition:
    opacity var(--dur-hover) var(--ease-hover),
    translate var(--dur-hover) var(--ease-hover);
}
.skip:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline-offset: 2px;
  translate: 0;
}

/* ---------- page grid: rail | column, with a hairline between them ---------- */

.page {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, var(--col-w));
  column-gap: var(--rail-gap);
  align-items: start;
  width: min(calc(var(--rail-w) + var(--rail-gap) + var(--col-w)), 100% - 48px);
  margin-inline: auto;
}
.page::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: calc(var(--rail-w) + 56px);
  width: 1px;
  background: var(--rule);
}

.col {
  min-width: 0;
  padding-block: var(--sp-col-top) 96px;
}
.col:focus {
  outline: none;
}

/* ---------- text links with an arrow ---------- */

.more {
  display: inline-flex;
  align-items: center;
  margin-top: 36px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.006em;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease-hover);
}
.more:hover {
  color: var(--accent-text);
}

.arrow {
  display: inline-block;
  margin-inline-start: 0.35em;
  font-weight: 400;
  transition: translate var(--dur-hover) var(--ease-hover);
}
a:hover .arrow,
a:focus-visible .arrow {
  translate: 2px -2px;
}

/* "↗" arrows on .more links render as the masked door glyph instead of the text character */
a.more .arrow {
  --door: 12px;
  flex: none;
  width: var(--door);
  height: var(--door);
  margin-inline-start: calc(var(--door) / 2);
  overflow: hidden;
  font-size: 0;
  text-indent: 100%;
  white-space: nowrap;
  background-color: var(--ink-45);
  -webkit-mask: var(--door-mask) 0 calc(-1 * var(--door)) / calc(2 * var(--door)) calc(2 * var(--door)) no-repeat;
  mask: var(--door-mask) 0 calc(-1 * var(--door)) / calc(2 * var(--door)) calc(2 * var(--door)) no-repeat;
  translate: 0 0.5px;
  transition: background-color var(--dur-hover) var(--ease-hover);
}
a.more:hover .arrow,
a.more:focus-visible .arrow {
  background-color: currentColor;
  -webkit-mask-position: calc(-1 * var(--door)) 0;
  mask-position: calc(-1 * var(--door)) 0;
  translate: 0 0.5px;
  transition:
    background-color var(--dur-hover) var(--ease-hover),
    -webkit-mask-position 0.32s var(--ease-out),
    mask-position 0.32s var(--ease-out);
}

/* ---------- reveal: hidden only when JS is there to reveal it ---------- */

html.js [data-reveal] {
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity var(--dur-reveal) var(--ease-standard),
    translate var(--dur-reveal) var(--ease-standard);
  transition-delay: var(--d, 0s);
}
html.js [data-reveal].is-visible,
html.js [data-reveal="load"]:not(.rail) {
  opacity: 1;
  translate: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes draw-across {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0);
  }
}
@keyframes rise-in {
  from {
    opacity: 0;
    translate: 0 8px;
  }
}

@media (width <= 1000px) {
  :root {
    --sp-col-top: 56px;
  }
  .page {
    grid-template-columns: minmax(0, 1fr);
    width: min(720px, 100% - 48px);
  }
  .page::before {
    display: none;
  }
}

@media (width <= 600px) {
  :root {
    --fs-statement: 34px;
    --fs-dek: 16px;
    --fs-body: 16px;
    --sp-section: 64px;
    --sp-actions-figure: 56px;
    --sp-figure-memo: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .arrow,
  .more,
  .skip {
    transition: none;
  }
  a.more .arrow,
  a.more:hover .arrow,
  a.more:focus-visible .arrow {
    -webkit-mask-position: 0 calc(-1 * var(--door));
    mask-position: 0 calc(-1 * var(--door));
    transition: none;
  }
  html.js [data-reveal] {
    opacity: 1;
    translate: 0;
    transition: none;
  }
}

/* ---------- Agent format: the column swapped for this page's Markdown ---------- */

.col.is-agent > :not(.agent-markdown) {
  display: none;
}
.agent-markdown {
  margin: 0;
  color: var(--ink-86);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.agent-markdown:focus {
  outline: none;
}
.rail.is-agent .nav-here,
.rail.is-agent .rail-rule {
  display: none;
}