/* Hidden artifact index and field guides */

.artifacts-page,
.tinker-page {
  --artifact-ink: var(--site-text);
  --artifact-paper: var(--site-bg);
  --artifact-rule: var(--site-border);
  --artifact-muted: var(--site-text-muted);
  --artifact-purple: #b497bf;
  width: 100%;
}

.tinker-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.artifact-topline,
.tinker-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  border-bottom: 1px solid var(--artifact-rule);
  padding: 1.25rem 0;
  color: var(--artifact-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.artifact-topline a,
.tinker-nav a {
  color: var(--artifact-ink);
  text-decoration: none;
}

.artifact-home {
  font-family: var(--site-font-display);
  font-size: 0.92rem;
  font-weight: 400;
}

.artifacts-header {
  padding: clamp(5rem, 14vw, 9rem) 0 clamp(3rem, 8vw, 5rem);
}

.artifact-kicker,
.tinker-mini-label {
  margin: 0 0 1rem;
  color: var(--artifact-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.artifacts-header h1 {
  margin: 0;
  font-size: clamp(2.1rem, 10vw, 8rem);
  letter-spacing: 0.05em;
}

.artifacts-header > p:last-child {
  max-width: 31rem;
  margin: 1.8rem 0 0 auto;
  color: var(--site-text-secondary);
  font-size: clamp(1rem, 2.5vw, 1.22rem);
  line-height: 1.65;
}

.artifact-index {
  border-top: 1px solid var(--artifact-ink);
}

.artifact-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr 2rem;
  gap: 1rem;
  align-items: start;
  border-bottom: 1px solid var(--artifact-rule);
  padding: 1.8rem 0;
  color: var(--artifact-ink);
  text-decoration: none;
  transition: padding 160ms ease, color 160ms ease;
}

.artifact-row:hover {
  padding-left: 0.5rem;
  color: var(--artifact-purple);
}

.artifact-number,
.artifact-row-meta {
  color: var(--artifact-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.artifact-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.artifact-row-body strong {
  font-family: var(--site-font-display);
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.artifact-row-body > span:last-child {
  max-width: 35rem;
  color: var(--site-text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

.artifact-arrow {
  font-size: 1.5rem;
}

.artifact-index-footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 4rem;
  color: var(--artifact-muted);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Tinker field guide */

.tinker-nav > div {
  display: flex;
  gap: 1.4rem;
}

.tinker-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.72fr);
  align-items: center;
  min-height: min(50rem, 86vh);
  border-bottom: 1px solid var(--artifact-ink);
  padding: 4rem 0 2rem;
  overflow: hidden;
}

.tinker-hero h1 {
  margin: 0;
  font-size: clamp(5rem, 17vw, 11rem);
  letter-spacing: 0.05em;
  line-height: 0.8;
}

.tinker-hero-copy,
.tinker-hero-copy > * {
  min-width: 0;
}

.tinker-deck {
  max-width: 33rem;
  margin: 2rem 0 0;
  font-size: clamp(1.15rem, 3vw, 1.7rem);
  line-height: 1.35;
}

.tinker-hero-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-self: end;
  gap: 1rem;
  margin-top: 3rem;
  color: var(--artifact-muted);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.tinker-orbit {
  position: relative;
  width: min(32vw, 24rem);
  aspect-ratio: 1;
  justify-self: end;
}

.tinker-orbit-ring,
.tinker-orbit-core,
.tinker-orbit-node {
  position: absolute;
}

.tinker-orbit-ring {
  inset: 0;
  border: 1px solid var(--artifact-rule);
  border-radius: 50%;
}

.tinker-orbit-ring-inner {
  inset: 28%;
  border-color: var(--artifact-purple);
}

.tinker-orbit-core {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  color: var(--artifact-purple);
  font-family: Georgia, serif;
  font-size: clamp(3rem, 7vw, 5.4rem);
}

.tinker-orbit-node {
  border: 1px solid var(--artifact-rule);
  border-radius: 999px;
  padding: 0.35rem 0.55rem;
  background: var(--artifact-paper);
  color: var(--artifact-muted);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tinker-orbit-data { top: 8%; left: 8%; }
.tinker-orbit-loss { top: 18%; right: -2%; }
.tinker-orbit-sample { bottom: 5%; left: 20%; }

.tinker-section {
  border-bottom: 1px solid var(--artifact-rule);
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
}

.tinker-section-label {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  color: var(--artifact-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.tinker-opening-grid,
.tinker-explainer-head,
.tinker-eval-intro {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 7vw, 6rem);
}

.tinker-opening-grid h2,
.tinker-explainer-head h2,
.tinker-eval-intro h2 {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.tinker-opening-grid p,
.tinker-explainer-head p,
.tinker-eval-intro p {
  margin: 0 0 1rem;
  color: var(--site-text-secondary);
  font-size: 1rem;
  line-height: 1.75;
}

.tinker-boundary {
  display: grid;
  grid-template-columns: 1fr 7.5rem 1fr;
  border: 1px solid var(--artifact-rule);
}

.tinker-boundary-side {
  padding: clamp(1.5rem, 4vw, 2.7rem);
}

.tinker-boundary-side h2 {
  margin: 0 0 1.5rem;
  font-family: var(--site-font-body);
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.tinker-boundary-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tinker-boundary-side li {
  border-top: 1px solid var(--artifact-rule);
  padding: 0.62rem 0;
  color: var(--site-text-secondary);
  font-size: 0.82rem;
}

.tinker-api-spine {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  border-right: 1px solid var(--artifact-rule);
  border-left: 1px solid var(--artifact-rule);
  padding: 1.2rem 0;
  background: color-mix(in srgb, var(--artifact-purple) 16%, var(--artifact-paper));
  writing-mode: vertical-rl;
}

.tinker-api-spine span {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tinker-api-spine strong {
  color: var(--artifact-purple);
  font-family: var(--site-font-display);
  font-size: 1.2rem;
  font-weight: 400;
}

.tinker-caption {
  max-width: 40rem;
  margin: 1rem 0 0 auto;
  color: var(--artifact-muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.tinker-verbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--artifact-ink);
  border-bottom: 1px solid var(--artifact-ink);
}

.tinker-verbs article {
  min-width: 0;
  padding: 1.4rem 1rem 1.7rem;
}

.tinker-verbs article + article {
  border-left: 1px solid var(--artifact-rule);
}

.tinker-verbs article > span,
.tinker-agent-notes article > span,
.tinker-eval-grid article > span {
  color: var(--artifact-muted);
  font-size: 0.62rem;
  font-weight: 700;
}

.tinker-verbs h3 {
  margin: 2.7rem 0 0.7rem;
  overflow-wrap: anywhere;
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.92rem;
  font-weight: 500;
}

.tinker-verbs p {
  margin: 0;
  color: var(--site-text-secondary);
  font-size: 0.76rem;
  line-height: 1.5;
}

.tinker-large-note {
  max-width: 48rem;
  margin: 4rem 0 0 auto;
  font-family: var(--site-font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: 0.025em;
  line-height: 1.04;
}

.tinker-flow,
.tinker-trace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 3.5rem 0;
  border-top: 1px solid var(--artifact-rule);
  border-bottom: 1px solid var(--artifact-rule);
  padding: 1rem 0;
  color: var(--artifact-muted);
  font-size: 0.59rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.tinker-flow-arrow {
  color: var(--artifact-purple);
  font-size: 1rem;
}

.tinker-code-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.tinker-code-grid article,
.tinker-code-card-wide {
  min-width: 0;
  border: 1px solid var(--artifact-rule);
  background: var(--site-code-bg);
  overflow: hidden;
}

.tinker-code-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--artifact-rule);
  padding: 0.65rem 0.9rem;
  color: var(--artifact-muted);
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tinker-code-grid pre,
.tinker-code-card-wide pre {
  max-width: 100%;
  margin: 0;
  padding: 1.1rem;
  overflow-x: auto;
  color: var(--artifact-ink);
  font-family: "SF Mono", "Menlo", monospace;
  font-size: 0.7rem;
  line-height: 1.65;
}

.tinker-concept-card {
  display: grid;
  grid-template-columns: 0.55fr 1fr 1.15fr;
  gap: 1.5rem;
  margin-top: 1rem;
  border: 1px solid var(--artifact-purple);
  padding: 1.5rem;
}

.tinker-concept-card h3 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
}

.tinker-concept-card > p:last-child {
  margin: 0;
  color: var(--site-text-secondary);
  font-size: 0.84rem;
  line-height: 1.6;
}

.tinker-lora-section,
.tinker-first-run {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: max(1.25rem, calc((100vw - 880px) / 2));
  padding-left: max(1.25rem, calc((100vw - 880px) / 2));
  color: #f0edf1;
  background: #121113;
}

.tinker-section-label-dark {
  color: #8f8992;
}

.tinker-lora-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 7vw, 6rem);
}

.tinker-equation {
  margin: 0;
  color: #c9aecf;
  font-family: Georgia, serif;
  font-size: clamp(2.5rem, 7vw, 5.3rem);
  line-height: 1;
  white-space: nowrap;
}

.tinker-equation-key {
  margin: 1.1rem 0 0;
  color: #8f8992;
  font-size: 0.57rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

.tinker-lora-copy h2 {
  margin: 0 0 1.5rem;
  font-family: var(--site-font-body);
  font-size: clamp(1.65rem, 4vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.08;
}

.tinker-lora-copy p {
  color: #b9b3bc;
  font-size: 0.94rem;
  line-height: 1.7;
}

.tinker-lora-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
  border-top: 1px solid #353137;
  border-bottom: 1px solid #353137;
}

.tinker-lora-facts div {
  padding: 1.25rem;
}

.tinker-lora-facts div + div {
  border-left: 1px solid #353137;
}

.tinker-lora-facts strong,
.tinker-lora-facts span {
  display: block;
}

.tinker-lora-facts strong {
  color: #c9aecf;
  font-family: var(--site-font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.tinker-lora-facts span {
  margin-top: 0.4rem;
  color: #8f8992;
  font-size: 0.72rem;
}

.tinker-rl-loop {
  display: grid;
  grid-template-columns: repeat(9, auto);
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 3.5rem 0;
}

.tinker-rl-loop div {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.tinker-rl-loop div > span {
  color: var(--artifact-purple);
  font-size: 0.58rem;
  font-weight: 700;
}

.tinker-rl-loop strong {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
}

.tinker-rl-loop small {
  color: var(--artifact-muted);
  font-size: 0.62rem;
}

.tinker-rl-detail {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1rem;
}

.tinker-rl-detail,
.tinker-rl-detail > * {
  min-width: 0;
}

.tinker-rl-detail aside {
  border: 1px solid var(--artifact-rule);
  padding: 1.25rem;
}

.tinker-rl-detail aside > p:last-child {
  color: var(--site-text-secondary);
  font-size: 0.8rem;
  line-height: 1.6;
}

.tinker-ratio {
  margin: 2.5rem 0;
  font-family: Georgia, serif;
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  white-space: nowrap;
}

.tinker-agents-grid > h2 {
  max-width: 45rem;
  margin: 0;
  font-family: var(--site-font-display);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1;
}

.tinker-trace {
  margin-top: 4rem;
}

.tinker-agent-notes,
.tinker-eval-grid,
.tinker-map {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--artifact-rule);
}

.tinker-agent-notes article,
.tinker-eval-grid article,
.tinker-map article {
  padding: 1.4rem 1.2rem;
}

.tinker-agent-notes article + article,
.tinker-eval-grid article + article,
.tinker-map article + article {
  border-left: 1px solid var(--artifact-rule);
}

.tinker-agent-notes h3,
.tinker-eval-grid h3,
.tinker-map h3 {
  margin: 2.5rem 0 0.7rem;
  font-size: 1rem;
}

.tinker-agent-notes p,
.tinker-eval-grid p,
.tinker-map p {
  margin: 0;
  color: var(--site-text-secondary);
  font-size: 0.78rem;
  line-height: 1.55;
}

.tinker-eval-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 3.5rem;
  border-bottom: 1px solid var(--artifact-rule);
}

.tinker-first-run-head {
  max-width: 47rem;
}

.tinker-first-run-head h2 {
  margin: 0;
  font-family: var(--site-font-display);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1;
}

.tinker-first-run-head > p:last-child {
  max-width: 36rem;
  margin: 1.5rem 0 0 auto;
  color: #b9b3bc;
  line-height: 1.7;
}

.tinker-protocol {
  margin: 4rem 0 0;
  padding: 0;
  border-top: 1px solid #353137;
  list-style: none;
}

.tinker-protocol li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  border-bottom: 1px solid #353137;
  padding: 1.15rem 0;
}

.tinker-protocol li > span {
  color: #8f8992;
  font-size: 0.62rem;
  font-weight: 700;
}

.tinker-protocol strong {
  display: block;
  font-size: 0.95rem;
}

.tinker-protocol p {
  margin: 0.3rem 0 0;
  color: #8f8992;
  font-size: 0.78rem;
  line-height: 1.5;
}

.tinker-hypothesis {
  display: grid;
  grid-template-columns: 0.35fr 1fr;
  gap: 2rem;
  margin-top: 3rem;
  border: 1px solid #c9aecf;
  padding: 1.5rem;
}

.tinker-hypothesis span {
  color: #c9aecf;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.tinker-hypothesis p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}

.tinker-map {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--artifact-rule);
}

.tinker-map article > span {
  color: var(--artifact-purple);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.tinker-glossary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--artifact-rule);
}

.tinker-glossary dl > div {
  display: grid;
  grid-template-columns: 0.55fr 1fr;
  gap: 1rem;
  border-bottom: 1px solid var(--artifact-rule);
  padding: 1rem 0;
}

.tinker-glossary dl > div:nth-child(odd) {
  padding-right: 1.2rem;
}

.tinker-glossary dl > div:nth-child(even) {
  border-left: 1px solid var(--artifact-rule);
  padding-left: 1.2rem;
}

.tinker-glossary dt {
  font-size: 0.78rem;
  font-weight: 700;
}

.tinker-glossary dd {
  margin: 0;
  color: var(--site-text-secondary);
  font-size: 0.75rem;
  line-height: 1.5;
}

.tinker-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  padding: 4rem 0 5rem;
}

.tinker-footer > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

.tinker-footer > div:first-child > span {
  margin-bottom: 0.6rem;
  color: var(--artifact-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.tinker-footer a {
  color: var(--artifact-ink);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.tinker-footer a:hover {
  color: var(--artifact-purple);
}

.tinker-footer-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  width: 9rem;
  aspect-ratio: 1;
  border: 1px solid var(--artifact-rule);
  border-radius: 50%;
  color: var(--artifact-purple);
}

.tinker-footer-mark strong {
  font-family: Georgia, serif;
  font-size: 2.5rem;
  font-weight: 400;
}

.tinker-footer-mark span {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

@media (max-width: 760px) {
  .tinker-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 6rem;
  }

  .tinker-orbit {
    width: min(72vw, 20rem);
    margin: 4rem auto 1rem;
    justify-self: center;
  }

  .tinker-hero-meta {
    flex-direction: column;
  }

  .tinker-opening-grid,
  .tinker-explainer-head,
  .tinker-eval-intro,
  .tinker-lora-grid,
  .tinker-rl-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .tinker-boundary {
    grid-template-columns: 1fr;
  }

  .tinker-api-spine {
    flex-direction: row;
    justify-content: space-around;
    border: 0;
    border-top: 1px solid var(--artifact-rule);
    border-bottom: 1px solid var(--artifact-rule);
    writing-mode: horizontal-tb;
  }

  .tinker-api-spine span:nth-of-type(2),
  .tinker-api-spine span:nth-of-type(3) {
    display: none;
  }

  .tinker-verbs {
    grid-template-columns: 1fr;
  }

  .tinker-verbs article {
    display: grid;
    grid-template-columns: 2.2rem minmax(7rem, 0.65fr) 1fr;
    gap: 1rem;
    align-items: start;
  }

  .tinker-verbs article + article {
    border-top: 1px solid var(--artifact-rule);
    border-left: 0;
  }

  .tinker-verbs h3 {
    margin: 0;
  }

  .tinker-code-grid,
  .tinker-concept-card {
    grid-template-columns: 1fr;
  }

  .tinker-lora-facts,
  .tinker-agent-notes,
  .tinker-eval-grid,
  .tinker-map {
    grid-template-columns: 1fr;
  }

  .tinker-lora-facts div + div,
  .tinker-agent-notes article + article,
  .tinker-eval-grid article + article,
  .tinker-map article + article {
    border-top: 1px solid var(--artifact-rule);
    border-left: 0;
  }

  .tinker-lora-facts div + div {
    border-top-color: #353137;
  }

  .tinker-rl-loop {
    grid-template-columns: 1fr;
    justify-items: start;
    border-left: 1px solid var(--artifact-rule);
    padding-left: 1rem;
  }

  .tinker-rl-loop .tinker-flow-arrow {
    transform: rotate(90deg);
  }

  .tinker-glossary dl {
    grid-template-columns: 1fr;
  }

  .tinker-glossary dl > div:nth-child(odd),
  .tinker-glossary dl > div:nth-child(even) {
    border-left: 0;
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .artifact-topline,
  .tinker-nav {
    align-items: flex-start;
  }

  .tinker-nav > div {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
  }

  .artifact-row {
    grid-template-columns: 2.4rem 1fr;
  }

  .artifact-arrow {
    display: none;
  }

  .artifact-index-footer {
    flex-direction: column;
  }

  .tinker-hero h1 {
    font-size: min(18vw, 6rem);
  }

  .tinker-section-label {
    grid-template-columns: 2rem 1fr;
  }

  .tinker-flow,
  .tinker-trace {
    align-items: flex-start;
    flex-direction: column;
    border-left: 1px solid var(--artifact-rule);
    padding-left: 1rem;
  }

  .tinker-flow .tinker-flow-arrow,
  .tinker-trace .tinker-flow-arrow {
    transform: rotate(90deg);
  }

  .tinker-equation {
    font-size: 2.25rem;
  }

  .tinker-large-note {
    font-size: 1.65rem;
  }

  .tinker-first-run-head h2 {
    font-size: 2rem;
  }

  .tinker-hypothesis,
  .tinker-glossary dl > div {
    grid-template-columns: 1fr;
  }

  .tinker-footer {
    grid-template-columns: 1fr;
  }

  .tinker-footer-mark {
    margin-top: 2rem;
  }
}

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