/* OpenArtifact site: index.html.
   OpenArtifact is an OHQ product, so it uses OHQ's design system (ohq/styles.css, documented on the
   brand page) and the AgentFGA site's components: black, grey and white in warm neutrals, with no
   accent color. Emphasis comes from weight, fill and inversion. Ink sections (.ink) redefine the
   tokens, so every component works on both. */
:root {
  --paper: #f6f4f3;
  --surface: #ffffff;
  --sunk: #ece9e7;
  --ink: #1c1a1a;
  --ink-2: #4b4646;
  --ink-3: #6e6969;
  --rule: #e3dfdd;
  --rule-strong: #cbc6c4;
  --grey: #8f8989;
  --on-ink: #f6f4f3;
  --ink-hover: #3a3535;

  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.5vw, 56px);
  --section: clamp(72px, 9vw, 128px);
  color-scheme: light;
}

.ink {
  --paper: #161414;
  --surface: #1f1c1c;
  --sunk: #2a2626;
  --ink: #f1ecec;
  --ink-2: #b7b1b1;
  --ink-3: #8f8989;
  --rule: #2e2a2a;
  --rule-strong: #403b3b;
  --grey: #6b6565;
  --on-ink: #161414;
  --ink-hover: #d9d3d3;
  background: var(--paper);
  color: var(--ink);
  color-scheme: dark;
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 24px;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2, h3, figure, dl, dd, blockquote { margin: 0; }
img, svg { max-width: 100%; }

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }

strong { font-weight: 650; color: var(--ink); }

h1, h2, h3 { font-family: var(--f-display); color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.25rem); font-weight: 820; font-stretch: 112%; line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(2rem, 1.3rem + 2.5vw, 3.5rem); font-weight: 780; font-stretch: 112%; line-height: 1.06; letter-spacing: -0.025em; }
h3 { font-size: 1.1875rem; font-weight: 760; font-stretch: 108%; line-height: 1.2; letter-spacing: -0.01em; }

code, pre { font-family: var(--f-mono); font-stretch: 87.5%; }
:not(pre) > code {
  font-size: 0.82em;
  background: var(--sunk);
  padding: 0.1em 0.35em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

.nowrap { white-space: nowrap; }

/* mono labels: the eyebrow over a section, and the small caps on cards */
.eyebrow, .card-num {
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.card-num { font-size: 0.6875rem; font-weight: 600; }

/* a grey lead that hands over to the point in ink */
.q { color: var(--ink-3); }
.q .hl { color: var(--ink); }

/* ---------- OHQ / OpenArtifact ---------- */

/* The OHQ wordmark: OHQ drawn as walls on a 48-unit grid, the O for Open in grey. */
.wordmark { flex: none; display: block; width: 2.792em; height: 1em; overflow: visible; }
.wordmark path { fill: none; stroke: var(--ink); stroke-width: 6; }
.wordmark .wm-o { stroke: var(--grey); }

/* The OpenArtifact wordmark: OPENARTIFACT drawn as the same walls, OPEN in grey and ARTIFACT in ink,
   the way OpenHQ sets OPEN in grey. OPEN reuses OpenHQ's letters; the I is a single wall, narrower
   than the rest. 506 units wide. */
.wordmark--oa { width: 10.542em; }

/* The lockups: the OpenArtifact wordmark in the header, with a tag saying it isn't released yet.
   In the footer, OHQ's wordmark, a grey slash, then OpenArtifact's, each linking to its own home. */
.brand-lockup { display: inline-flex; align-items: center; gap: 0.42em; font-size: 1.25rem; line-height: 1; }
.brand-lockup a { color: var(--ink); text-decoration: none; }
.brand-lockup .brand { display: block; }
.lockup-sep { font-family: var(--f-display); font-weight: 400; font-size: 1.25em; color: var(--grey); }
.brand-tag {
  margin-left: 0.2em;
  padding: 4px 8px;
  border: 1px dashed var(--rule-strong);
  border-radius: 7px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}

/* ---------- header and footer ---------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 32px;
  padding-block: 20px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 26px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav a {
  color: var(--ink-2);
  text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }

/* Pinned to the bottom: body is a column at least as tall as the window, so on a short page the
   footer sits at the foot of the window instead of straight after the content. */
.site-footer { margin-top: auto; border-top: 1px solid var(--rule); }
.foot {
  display: grid;
  gap: 20px;
  padding-block: 30px 20px;
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .foot { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .foot .nav { justify-content: center; }
}
.foot .brand-lockup { text-transform: none; letter-spacing: 0; }
.foot-note { padding-block: 0 40px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.foot-note p { max-width: 72ch; }

/* ---------- buttons ---------- */

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ruled in ink like the deck's product boxes; the primary one is filled */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px 13px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-display);
  font-stretch: 106%;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--sunk); }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-primary::after { content: "→"; transition: transform 0.15s; }
.btn-primary:hover::after { transform: translateX(3px); }

/* ---------- sections ---------- */

.section { padding-block: var(--section); border-top: 1px solid var(--rule); }
.section.ink, .ink + .section, .alt + .section, .section + .alt { border-top: 0; }
.section > .wrap { display: grid; gap: 32px; }
.alt { background: var(--surface); }

.section-head { display: grid; gap: 18px; max-width: 54rem; align-content: start; margin-bottom: clamp(0px, 1.2vw, 16px); }
.section-head > p:not(.eyebrow) {
  max-width: 44rem;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.sub-head { display: grid; gap: 8px; max-width: 44rem; margin-top: clamp(16px, 3vw, 40px); }
.sub-head h3 { font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 780; font-stretch: 110%; }
.sub-head p { color: var(--ink-2); font-size: 1.0625rem; }

.lede { max-width: 36rem; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(48px, 7vw, 104px) clamp(64px, 8vw, 112px); }
.hero-grid { display: grid; gap: 48px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.hero h1 { font-size: clamp(2.5rem, 1.3rem + 3.4vw, 3.875rem); }
@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: 64px; }
}

.hero-code { display: grid; gap: 12px; min-width: 0; }
.hero-code .code { box-shadow: 0 48px 80px -48px rgba(28, 26, 26, 0.5); }
.hero-code > p { font-size: 0.875rem; color: var(--ink-3); }

/* not released yet: dashed like an unbuilt wall, the way AgentFGA marks its coding-agent hand-off */
.status {
  max-width: 38rem;
  padding: 16px 20px;
  border: 2px dashed var(--rule-strong);
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- why artifacts ---------- */

.product-top { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) {
  .product-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 72px; }
}

/* an artifact an agent made: a small dashboard in its own window, with a share button, and who
   may do what with it. Drawn in the page's tokens, so it inverts on ink. */
.art { display: grid; gap: 16px; width: 100%; max-width: 560px; justify-self: center; }
.art svg { display: block; width: 100%; height: auto; }
.art-win { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 2; }
.art-rule { stroke: var(--rule-strong); stroke-width: 2; }
.art-dot { fill: var(--rule-strong); }
.art-name { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 17px; fill: var(--ink-3); }
.art-share { fill: var(--ink); }
.art-share-t { font-family: var(--f-body); font-size: 16px; font-weight: 650; fill: var(--on-ink); }
.art-h { font-family: var(--f-display); font-stretch: 110%; font-weight: 780; font-size: 30px; fill: var(--ink); }
.art-base { stroke: var(--ink); stroke-width: 2; }
.art-bar { fill: var(--rule-strong); }
.art-bar--now { fill: var(--ink); }
.art-axis { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 15px; fill: var(--ink-3); }
.art figcaption { display: grid; gap: 12px; }
.art-perms { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.art-perms li { display: grid; gap: 2px; min-width: 0; padding: 10px 14px 12px; border: 2px solid var(--ink); border-radius: 12px; font-size: 0.9375rem; color: var(--ink); }
.art-perms b { font-family: var(--f-mono); font-stretch: 87.5%; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.art figcaption p { text-align: center; font-size: 0.9375rem; color: var(--ink-3); }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cards > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: clamp(22px, 2.2vw, 28px);
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--surface);
}
.cards h3 { margin-top: clamp(8px, 1.5vw, 20px); font-size: 1.25rem; }
.cards p:not(.card-num):not(.uses) { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.cards .uses {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* ---------- how it works: three steps, ruled in ink, the last filled ---------- */

.basics { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; counter-reset: basic; }
.basics > li {
  counter-increment: basic;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 10px;
  min-width: 0;
  padding: clamp(20px, 2vw, 26px);
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--surface);
}
.basics > li.ink { border-color: var(--paper); }
.basics > li::before {
  content: counter(basic, decimal-leading-zero);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.basics > li + li::after {
  content: "↓";
  position: absolute;
  left: 24px;
  top: -29px;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .basics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
  .basics > li + li::after { content: "→"; left: -27px; top: 50%; transform: translateY(-50%); }
}
.basics h3 { font-size: 1.25rem; }
.basics p { color: var(--ink-2); font-size: 0.9375rem; }
.snippet {
  align-self: end;
  margin: 6px 0 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--sunk);
  font-size: 0.6875rem;
  line-height: 1.75;
  color: var(--ink);
  overflow-x: auto;
}
.snippet .k { color: var(--ink-3); }
.snippet .v { color: var(--ink); font-weight: 600; }
.answer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
}
.answer svg { width: 13px; height: 13px; flex: none; }

/* where OpenArtifact sits: your agent, then OpenArtifact, then a stack of origins, one per artifact */
.flow { margin: 0; display: grid; gap: 0; align-items: stretch; }
.flow-node {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--surface);
}
.flow-node strong { font-family: var(--f-display); font-weight: 720; font-stretch: 108%; font-size: 1.125rem; color: var(--ink); }
.flow-node span { font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.flow-stack {
  margin: 0 12px 12px 0;
  border: 2px solid var(--ink);
  box-shadow:
    6px 6px 0 -2px var(--surface), 6px 6px 0 0 var(--ink),
    12px 12px 0 -2px var(--surface), 12px 12px 0 0 var(--ink);
}
.flow-arrow { display: grid; place-items: center start; height: 40px; padding-left: 20px; color: var(--ink-3); }
.flow-arrow::before { content: "↓"; font-size: 1.125rem; line-height: 1; }
@media (min-width: 860px) {
  .flow { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 48px minmax(0, 1.15fr); }
  .flow-arrow { height: auto; padding: 0 0 12px; place-items: center; }
  .flow-arrow::before { content: "→"; font-size: 1.25rem; }
}
.flow-caption { max-width: 46rem; color: var(--ink-2); }

/* ---------- lists side by side ---------- */

.cols { display: grid; gap: 36px; }
.cols > * { min-width: 0; }
@media (min-width: 860px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; } }
.col-head { display: grid; gap: 6px; margin-bottom: 14px; }
.col-head h3 { font-size: 1.375rem; }
.col-head p { font-size: 0.9375rem; color: var(--ink-2); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; border-top: 2px solid var(--ink); }
.plain-list li { padding-block: 14px; border-bottom: 1px solid var(--rule); font-size: 1rem; color: var(--ink-2); }

/* ---------- tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.wide { min-width: 640px; }
table.wide tbody th { min-width: 12rem; }
th, td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
thead th {
  background: var(--paper);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  vertical-align: bottom;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--ink); }
td { color: var(--ink-2); }

/* ---------- code ---------- */

/* in the page's own tones: keywords and keys in ink, the rest a step back */
.code { min-width: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); overflow: hidden; }
.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.75rem;
  color: var(--ink-3);
}
.copy {
  flex: none;
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-stretch: 87.5%;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy:hover { border-color: var(--ink-3); }
.code pre { margin: 0; padding: 18px 20px 22px; overflow-x: auto; font-size: 0.8125rem; line-height: 1.75; color: var(--ink-2); }
.code .k { color: var(--ink); font-weight: 600; }
.code .s { color: var(--ink); }
.code .c { color: var(--ink-3); }
/* the response line an HTTP example ends on */
.code-status { color: var(--ink); font-weight: 600; }

/* ---------- drop-downs ---------- */

.more { display: grid; border-top: 1px solid var(--rule-strong); }
.more details { border-bottom: 1px solid var(--rule); }
.more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-weight: 720;
  font-stretch: 108%;
  font-size: 1.1875rem;
  color: var(--ink);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.15s;
}
.more details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.more summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.more-body { display: grid; gap: 20px; padding-bottom: 32px; min-width: 0; }

/* ---------- closing ---------- */

.close { padding-block: clamp(80px, 10vw, 144px) clamp(64px, 8vw, 104px); }
.close .wrap { display: grid; gap: 28px; justify-items: start; }
.close .wordmark { width: clamp(180px, 28vw, 340px); height: auto; margin-bottom: clamp(8px, 2vw, 24px); }
.close h2 { font-size: clamp(2.5rem, 1.4rem + 4.2vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; }
.close .lede { max-width: 40rem; }