/* Cortex landing page.
   Monochrome with a single signal colour; the type does the shouting.
   Everything is same-origin — no webfonts, no CDN, nothing to block. */

:root {
  --bg: #000005;
  --fg: #ffffff;
  --dim: #8a8a93;
  --faint: #2a2a31;
  --accent: #d7ff3e;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(1.25rem, 5vw, 6rem);
  --maxw: 84rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-synthesis-weight: none;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: #000; }

a { color: inherit; text-decoration: none; }

/* ── the firing field behind everything ───────────────────── */

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: drift 8s steps(6) infinite;
}

@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-6%, 4%); }
}

section, header, footer { position: relative; z-index: 2; }

/* ── nav ──────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--pad);
  mix-blend-mode: difference;
}

.mark {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  font-weight: 500;
}

.nav nav { display: flex; gap: clamp(1rem, 3vw, 2.5rem); }

.nav nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.62;
  transition: opacity 0.3s;
}

.nav nav a:hover { opacity: 1; }

@media (max-width: 34rem) {
  .nav nav a:not(:last-child) { display: none; }
}

/* ── hero ─────────────────────────────────────────────────── */

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--pad) 3rem;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Three lines at 0.9 leading have to clear the fold together with the lede
   and the meta row, so the size is bounded by the viewport HEIGHT as well
   as its width — on a short laptop window the width alone overflows. */
h1 {
  font-size: clamp(2.6rem, min(9.5vw, 13.5vh), 9rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-weight: 680;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
}

.line { display: block; overflow: hidden; }

.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in .line > span { transform: translateY(0); }

.line:nth-child(2) > span { transition-delay: 0.09s; }
.line:nth-child(3) > span { transition-delay: 0.18s; }

.accent { color: var(--accent); }

.lede {
  max-width: 46ch;
  font-size: clamp(1rem, 1.55vw, 1.32rem);
  color: var(--dim);
  line-height: 1.6;
  text-wrap: pretty;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.hero-meta b {
  display: block;
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  color: var(--fg);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.scroll-cue {
  margin-top: auto;
  align-self: flex-start;
  width: 1px;
  height: 4.5rem;
  background: var(--faint);
  overflow: hidden;
}

.scroll-cue span {
  display: block;
  width: 100%;
  height: 40%;
  background: var(--accent);
  animation: cue 2.2s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

@keyframes cue {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}

/* ── shared section furniture ─────────────────────────────── */

section { padding: clamp(5rem, 13vw, 11rem) var(--pad); }

.section-head {
  max-width: var(--maxw);
  margin: 0 auto clamp(3rem, 7vw, 5.5rem);
}

.kicker {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.kicker::before { content: "— "; color: var(--faint); }

h2 {
  font-size: clamp(2rem, 6.4vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 660;
  max-width: 18ch;
  text-wrap: balance;
}

.section-head p {
  max-width: 52ch;
  margin-top: 1.75rem;
  color: var(--dim);
  font-size: clamp(0.98rem, 1.3vw, 1.14rem);
  line-height: 1.65;
  text-wrap: pretty;
}

/* generic scroll reveal */
.reveal:not(h1):not(h2) {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in:not(h1):not(h2) { opacity: 1; transform: none; }

/* ── live demo ────────────────────────────────────────────── */

.stage {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

@media (max-width: 52rem) {
  .stage { grid-template-columns: 1fr; }
}

.canvas-wrap {
  border: 1px solid var(--faint);
  background: #05050a;
  padding: 1rem;
}

.canvas-wrap img {
  display: block;
  width: 100%;
  /* height:auto is required — the height attribute on the element is a
     presentational hint, and aspect-ratio only applies once a dimension
     is auto. Without it the 28px attribute wins and the drawing renders
     as a thin strip. */
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
  filter: invert(1);
  transition: opacity 0.25s;
}

.canvas-wrap img.swap { opacity: 0; }

.canvas-wrap figcaption {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-top: 1rem;
  text-transform: uppercase;
}

.verdict { min-width: 0; }

.said-row, .truth-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.said-row { margin-bottom: 0.75rem; }

.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim);
  flex: none;
  width: 5.5rem;
}

.said {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  line-height: 1;
  font-weight: 680;
  letter-spacing: -0.04em;
  color: var(--accent);
  word-break: break-word;
}

.said.thinking { color: var(--faint); }

.truth {
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: var(--dim);
  font-weight: 500;
}

.mark-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  text-transform: uppercase;
}

.mark-badge.hit  { color: var(--accent); }
.mark-badge.miss { color: #ff5c5c; }

.run-tally {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--dim);
  margin: 2rem 0 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--faint);
  font-variant-numeric: tabular-nums;
}

.btn {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--fg);
  border: 0;
  padding: 1.05rem 2rem;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, transform 0.25s;
}

.btn:hover:not(:disabled) { background: var(--accent); transform: translateY(-2px); }
.btn:disabled { opacity: 0.35; cursor: progress; }

/* ── numbers ──────────────────────────────────────────────── */

.stat-grid {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  border-top: 1px solid var(--faint);
  border-left: 1px solid var(--faint);
}

.stat {
  border-right: 1px solid var(--faint);
  border-bottom: 1px solid var(--faint);
  padding: clamp(1.75rem, 3vw, 2.75rem);
  transition: background 0.4s;
}

.stat:hover { background: #07070d; }

.stat b {
  display: block;
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 1;
  font-weight: 660;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 1.25rem;
}

.stat.big b { color: var(--accent); }

.stat h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.stat p {
  color: var(--dim);
  font-size: 0.92rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ── how ──────────────────────────────────────────────────── */

.steps {
  max-width: var(--maxw);
  margin: 0 auto;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
}

.steps .num {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--accent);
  display: block;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--faint);
}

.steps h3 {
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  font-weight: 620;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.steps p { color: var(--dim); font-size: 0.95rem; line-height: 1.62; }

/* ── limits ───────────────────────────────────────────────── */

.limits { background: #030308; }

.limit-list {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  gap: 0;
}

.limit {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-bottom: 1px solid var(--faint);
  align-items: baseline;
}

.limit:first-child { border-top: 1px solid var(--faint); }

@media (max-width: 44rem) {
  .limit { grid-template-columns: 1fr; gap: 0.75rem; }
}

.limit b {
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  font-weight: 620;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.limit p { color: var(--dim); font-size: 0.98rem; line-height: 1.6; text-wrap: pretty; }

/* ── close ────────────────────────────────────────────────── */

.close {
  min-height: 78svh;
  display: flex;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
}

.close h2 {
  font-size: clamp(2.4rem, 10vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: none;
}

/* ── footer ───────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--faint);
  padding: clamp(2.5rem, 5vw, 4rem) var(--pad);
}

.foot-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  align-items: center;
  justify-content: space-between;
}

.foot-inner nav { display: flex; gap: 2rem; }

.foot-inner nav a {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  transition: color 0.25s;
}

.foot-inner nav a:hover { color: var(--accent); }

.foot-inner .note {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--faint);
  flex-basis: 100%;
  letter-spacing: 0.04em;
}

/* ── respect the setting ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .line > span { transform: none; }
  .reveal:not(h1):not(h2) { opacity: 1; transform: none; }
  #field { display: none; }
}

/* The unit that runCounter() splits out of the number, so a value like
   "16.8 MB" cannot wrap onto a second line inside its card. */
.stat b .unit,
.hero-meta b .unit {
  font-size: 0.42em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 0.12em;
  color: var(--dim);
  vertical-align: baseline;
}

.stat.big b .unit { color: var(--accent); opacity: 0.75; }

.stat b, .hero-meta b { white-space: nowrap; }

/* ── ask it yourself ──────────────────────────────────────── */

.ask-stage {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

@media (max-width: 52rem) {
  .ask-stage { grid-template-columns: 1fr; }
}

#pad {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border: 1px solid var(--faint);
  background: #05050a;
  cursor: crosshair;
  touch-action: none;          /* otherwise a finger scrolls instead of drawing */
}

.ask-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* The tool row lives in a 22rem column, so the buttons run narrower than
   the page default to keep all three on one line. */
.ask-tools .btn { padding: 0.85rem 1.1rem; font-size: 0.7rem; letter-spacing: 0.1em; }

.btn.ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--faint);
}

.btn.ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }

.ask-hint {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 1rem;
}

.ask-result { min-width: 0; }

.candidates {
  margin: 1.75rem 0;
  display: grid;
  gap: 0.6rem;
}

.cand {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 4rem;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--dim);
}

.cand-name { color: var(--fg); }
.cand-name.none { color: var(--faint); }

.cand-track { height: 3px; background: var(--faint); overflow: hidden; }

/* display:block is load-bearing: as an inline span the fill ignores its
   width and every candidate renders as a full bar. */
.cand-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  animation: grow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.cand:not(:first-child) .cand-fill { background: var(--dim); }

.cand-val { text-align: right; font-variant-numeric: tabular-nums; }

@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.ask-seen {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-top: 1.75rem;
  border-top: 1px solid var(--faint);
}

/* Before the first answer there is nothing to show. An <img> without a src
   still occupies its box and renders as a broken frame under a caption
   that describes an image that is not there. */
.ask-seen.is-empty { display: none; }

.ask-seen figure { flex: none; width: 7.5rem; }

.ask-seen img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  image-rendering: pixelated;
  filter: invert(1);
  background: #05050a;
}

.ask-seen figcaption,
.ask-note,
.ask-vocab {
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.ask-seen figcaption {
  margin-top: 0.6rem;
  text-transform: uppercase;
  text-wrap: balance;
}

.ask-vocab { margin-top: 1.5rem; color: var(--faint); }