/* ds.getloke.com — the front door's own stylesheet.
   Layout and structure only. Every colour, space, radius, border and duration
   comes from tokens.css, which is generated from loke.tokens.json. The site
   documents the system by being built out of it. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
code { font-family: var(--font-mono); font-size: .8125em; }
a { color: inherit; }

/* ---------------------------------------------------------------- chrome -- */

.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--space-6);
  padding: var(--space-3) var(--space-6);
  background: var(--bg);
  border-bottom: var(--border-sm) solid var(--border-color);
}
.wordmark {
  display: flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
}
.wordmark span {
  font-family: var(--font-mono); font-weight: 500; font-size: .6875rem;
  letter-spacing: .06em; color: var(--text-secondary);
}
.top nav { display: flex; gap: var(--space-5); margin-left: auto; flex-wrap: wrap; }
.top nav a {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-standard);
}
.top nav a:hover { color: var(--brand-red); }
#theme {
  min-width: var(--space-8); min-height: var(--space-8);
  background: var(--field); color: var(--text);
  border: var(--border-sm) solid var(--border-color);
  border-radius: var(--radius-none);
  font-size: 1rem; cursor: pointer;
}
#theme:hover { border-color: var(--brand-red); }

main { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-6) var(--space-24); }
section { padding-top: var(--space-16); scroll-margin-top: var(--space-16); }

h1 {
  font-family: var(--font-display); font-weight: 900; font-stretch: 125%;
  text-transform: uppercase; font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: .95; margin: 0 0 var(--space-5);
}
h2 {
  font-size: 1.125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; margin: 0 0 var(--space-3);
  padding-bottom: var(--space-3); border-bottom: var(--border) solid var(--brand-red);
}
h3 { font-size: 1rem; font-weight: 700; margin: var(--space-10) 0 var(--space-3); }
h4 {
  font-family: var(--font-mono); font-size: .75rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary);
  margin: 0 0 var(--space-2);
}
.lede { font-size: 1.0625rem; color: var(--text-secondary); max-width: 62ch; margin: 0 0 var(--space-4); }
.sub { font-size: .9375rem; color: var(--text-tertiary); max-width: 68ch; margin: 0 0 var(--space-4); }
.note {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em;
  color: var(--text-tertiary); max-width: 64ch; margin: var(--space-6) 0 0;
}

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

.hero { padding-top: var(--space-16); }
.pipeline {
  display: flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-10); flex-wrap: wrap;
}
.node {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--surface-raised);
  border: var(--border) solid var(--text);
  box-shadow: var(--shadow-hard-sm);
}
.node code { font-weight: 700; }
.node span {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary);
}
.node.source { border-color: var(--brand-red); box-shadow: var(--shadow-hard-accent); }
.arrow { width: var(--space-8); height: var(--border); background: var(--text); flex: none; }
.fan { display: flex; flex-direction: column; gap: var(--space-3); }

/* ------------------------------------------------------------- contract --- */

.cards { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cards article {
  padding: var(--space-5);
  background: var(--surface);
  border: var(--border-sm) solid var(--border-color);
}
.cards h3 { margin-top: 0; }
.cards p { font-size: .9375rem; color: var(--text-secondary); }
.cards p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- galleries -- */

.gallery-links { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: var(--space-6); }
.gcard {
  display: block; padding: var(--space-6); text-decoration: none;
  background: var(--surface-raised);
  border: var(--border) solid var(--text);
  box-shadow: var(--shadow-hard);
  transition: transform var(--dur-fast) var(--ease-overshoot), box-shadow var(--dur-fast) var(--ease-standard);
}
.gcard:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-hard-accent); }
.gcard h3 { margin: 0 0 var(--space-2); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.gcard p { margin: 0; font-size: .9375rem; color: var(--text-secondary); }

/* ---------------------------------------------------------------- tokens -- */

.swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sw { display: flex; align-items: center; gap: var(--space-3); }
.sw-chip { width: var(--space-10); height: var(--space-10); flex: none; border: var(--border-sm) solid var(--border-color); }
.sw-meta { display: flex; flex-direction: column; min-width: 0; }
.sw-meta span { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-tertiary); }

.ramps { display: grid; gap: var(--space-5); }
.ramp h4 { margin-bottom: var(--space-2); }
.ramp-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.ramp-stop { display: flex; flex-direction: column; gap: 2px; min-width: 72px; flex: 1 1 72px; }
.ramp-chip { height: var(--space-12); border: var(--border-sm) solid var(--border-color); }
.ramp-stop span {
  font-family: var(--font-mono); font-size: .625rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-secondary);
}
.ramp-stop code { font-size: .625rem; color: var(--text-tertiary); }

table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th {
  text-align: left; font-family: var(--font-mono); font-size: .6875rem;
  font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-secondary); padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-sm) solid var(--border-strong);
}
td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); }
.dot {
  display: inline-block; width: var(--space-3); height: var(--space-3);
  margin-right: var(--space-2); vertical-align: -1px;
  border: 1px solid var(--border-strong);
}
.layers { margin-top: var(--space-4); }

/* Wide tables scroll inside their own box rather than the page. */
.semantic, .type, .layers { display: block; overflow-x: auto; white-space: nowrap; }

.scalar-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.scalars td:first-child { width: 55%; }

.shadow-demo { display: flex; gap: var(--space-8); flex-wrap: wrap; padding: var(--space-4) 0 var(--space-6); }
.shadow-swatch {
  display: grid; place-items: center;
  width: var(--space-20); height: var(--space-16);
  background: var(--surface-raised); border: var(--border) solid var(--text);
  font-family: var(--font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em;
}
.shadow-swatch.hard { box-shadow: var(--shadow-hard); }
.shadow-swatch.hard-sm { box-shadow: var(--shadow-hard-sm); }
.shadow-swatch.accent { box-shadow: var(--shadow-hard-accent); border-color: var(--brand-red); }

footer {
  margin-top: var(--space-24); padding-top: var(--space-5);
  border-top: var(--border-sm) solid var(--border-color);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .04em; color: var(--text-tertiary);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}