/* OpenFloor site.
   Ground is a cold mid-value grey, not cream and not dark. Mid-value grounds
   are rare on the web because they are unforgiving, which is exactly why they
   do not read as a default. The dark plate is used only inside the machine
   well, so the enclosure is dark and the shop is light, the way real machinery
   reads. Coral is spent twice: the contested path, and the primary button. */

:root {
  --shop: #c4c7c2;        /* page ground */
  --shop-2: #cbcec9;      /* raised panels */
  --plate: #0f1315;       /* inside the well only */
  --bone: #dcdad2;
  --ink: #14181a;
  --muted: #3f4643;
  --steel: #8e948f;       /* hairlines, decorative only, never text */
  --rule: #a8ada7;
  --coral: #e45e3d;

  --display: "Anton", Impact, sans-serif;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: clamp(20px, 5vw, 68px);
  --measure: 1280px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 78px; }

body {
  margin: 0;
  background: var(--shop);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
code { font-family: var(--mono); font-size: .88em; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }
:is(p, li, dd, .nav-links, .foot-links, .cta-contact) a:focus-visible { border-radius: 2px; }

.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: 12px; z-index: 60;
  background: var(--ink); color: var(--shop);
  padding: 10px 14px; font-size: 13px; font-weight: 600; text-decoration: none;
}

/* ── Type ─────────────────────────────────────────────────────────────── */

.eyebrow {
  display: block;
  font: 500 10px/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* The logo sets the wordmark lowercase in a bold grotesk, so Archivo 700 carries
   it here and Anton stays the headline face. The mark is the floor brackets
   holding three participants: brackets take the ink of whatever they sit on,
   the three dots keep the brand hues. */
.wordmark {
  font: 700 19px/1 var(--sans);
  letter-spacing: -.015em;
}
.wordmark.sm { font-size: 15.5px; }
.brand-mark { width: 57.5px; height: 20px; flex: none; color: var(--ink); }
.brand-mark.sm { width: 46px; height: 16px; }

/* ── Controls: one filled button, one demoted link ────────────────────── */

.btn {
  display: inline-flex; align-items: center;
  padding: 13px 22px;
  border: 1px solid var(--coral); background: var(--coral); color: #fff;
  font: 600 13px var(--sans); letter-spacing: .01em; text-decoration: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.btn:hover { background: #cf4e2f; border-color: #cf4e2f; }
.btn:active { background: #b8442a; border-color: #b8442a; }

.link {
  font: 500 13.5px var(--sans); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--muted); padding-bottom: 2px;
  transition: border-color .16s ease, color .16s ease;
}
.link:hover { border-color: var(--coral); }
.link.on-dark { color: var(--bone); border-bottom-color: #6d7679; }
.link.on-dark:hover { border-color: var(--coral); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }

/* ── Nav ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  height: 62px; padding: 0 var(--gutter);
  background: var(--shop);
  border-bottom: 1px solid var(--rule);
}
/* Past the hero the wordmark collapses and the mark carries the brand alone.
   The gap lives on the wordmark rather than on .brand, so it can collapse with
   it and leave no orphaned space beside the mark. The transition is only armed
   after the first observer callback, so opening /why directly starts collapsed
   instead of animating shut on arrival. */
.brand { display: flex; align-items: center; text-decoration: none; }
.brand .wordmark {
  margin-left: 10px;
  max-width: 7em;
  overflow: hidden;
  white-space: nowrap;
}
.brand.is-armed .wordmark {
  transition: max-width .3s ease, margin-left .3s ease, opacity .2s ease;
}
.brand.is-compact .wordmark { max-width: 0; margin-left: 0; opacity: 0; }
.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 10px 2px; margin: -10px -2px;
  transition: color .16s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { flex: none; }

/* ── Hero well ────────────────────────────────────────────────────────── */

.hero { padding: 0 0 clamp(28px, 3vw, 44px); }

.well {
  position: relative;
  height: clamp(500px, 76vh, 820px);
  background: var(--plate);
  overflow: hidden;
}
/* The scene gets its own box so it can sit behind the copy on desktop and
   below it on a phone, without the renderer and the layout fighting.
   z-index is load bearing: the stage comes after .hero-copy in the document,
   so without it the opaque canvas paints straight over the headline. */
.well-stage { position: absolute; inset: 0; z-index: 0; }
.well-stage canvas { display: block; width: 100%; height: 100%; }

/* Path labels, projected from the 3D field. Real DOM text: selectable and
   crawlable, which is the evidence that these are actual repository paths. */
.well-labels { position: absolute; inset: 0; pointer-events: none; }
.well-labels span {
  position: absolute; transform: translate3d(-9999px, 0, 0); white-space: nowrap;
  font: 400 10px var(--mono); letter-spacing: .01em;
  color: #8d979b; padding-left: 10px; opacity: .45;
  transition: opacity .25s ease, color .25s ease;
}
/* The whole list stays readable. Emphasis is relative, not the difference
   between visible and invisible: dimming the idle rows to near nothing read as
   the file list disappearing and only flashing back when a cursor passed. */
.well-labels span.held { opacity: .8; color: #aeb6b8; }
.well-labels span.done { opacity: .62; }
.well-labels span.live { opacity: 1; color: var(--bone); }
.well-labels span.hot { opacity: 1; color: var(--coral); font-weight: 600; }

.well-readout {
  position: absolute; right: var(--gutter); bottom: 20px; text-align: right;
  font: 400 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #626c70;
}
.well-readout b { color: #b9bdb5; font-weight: 600; }
.well-readout i { color: var(--coral); font-style: normal; font-weight: 600; }

.hero-copy {
  position: absolute; left: var(--gutter); top: clamp(48px, 8vh, 96px);
  max-width: min(52ch, 54%);
  z-index: 1;
}
h1 {
  font-family: var(--display);
  font-size: clamp(32px, 4.8vw, 70px);
  line-height: .92; letter-spacing: .004em; text-transform: uppercase; font-weight: 400;
  color: var(--bone);
}
.hero-copy .lede {
  margin-top: 26px; max-width: 42ch;
  font-size: clamp(14px, 1.15vw, 16px); line-height: 1.6; color: #a7ada8;
}
.hero-copy .actions { margin-top: 30px; }

.well-caption {
  max-width: var(--measure); margin: 18px auto 0;
  padding: 0 var(--gutter);
  font: 400 12px var(--mono); line-height: 1.75; color: var(--muted);
}
.well-caption span {
  display: inline-block; margin-right: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
}
.well-caption code { color: var(--ink); }

/* Agent plates. Each names the person driving and the runtime, and rides the
   agent it belongs to, so nothing has to be cross-referenced against a legend. */
.well-agents { position: absolute; inset: 0; pointer-events: none; }
.well-agents span {
  position: absolute; display: block; white-space: nowrap;
  padding-left: 9px; border-left: 2px solid var(--who);
  transform: translate3d(-9999px, 0, 0);
}
.well-agents b {
  display: block; color: var(--who);
  font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.well-agents em {
  display: block; margin-top: 2px; font-style: normal; color: #6f7a7e;
  font: 400 9px var(--mono); letter-spacing: .04em;
}
.well-agents .blocked { border-left-color: var(--coral); }
.well-agents .blocked b, .well-agents .blocked em { color: var(--coral); }

/* ── Bands ────────────────────────────────────────────────────────────── */

.band {
  max-width: var(--measure); margin-inline: auto;
  padding: clamp(64px, 8vw, 108px) var(--gutter);
  border-top: 1px solid var(--rule);
}
.band-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.band-head .eyebrow { margin-bottom: 18px; }
.band-head h2 {
  max-width: 20ch;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1.12;
  letter-spacing: -.022em; font-weight: 600;
}

/* ── Steps: an editorial list, not a card grid ────────────────────────── */

.steps { display: grid; gap: 0; }
.steps li {
  display: grid; grid-template-columns: 90px minmax(0, 22ch) minmax(0, 1fr);
  gap: 0 32px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.idx { font: 500 11px var(--mono); letter-spacing: .14em; color: var(--coral); padding-top: 4px; }
.steps h3 { font-size: 19px; font-weight: 600; letter-spacing: -.018em; }
.steps p { font-size: 15px; line-height: 1.62; color: var(--muted); }
.steps .note {
  grid-column: 3; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font: 400 11.5px var(--mono); line-height: 1.7; color: var(--muted);
}

/* ── Prose bands ──────────────────────────────────────────────────────── */

.why-body { max-width: 68ch; display: grid; gap: 20px; }
.why-body .big {
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.45;
  letter-spacing: -.015em; color: var(--ink);
}
.why-body p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.why-body .note {
  margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--rule);
  font: 400 11.5px var(--mono); line-height: 1.8;
}

/* The three verbs are labels, not a numbered sequence, so they are not a ramp
   of digits. Order does not carry meaning here. */
.steps.verbs li { grid-template-columns: 130px minmax(0, 24ch) minmax(0, 1fr); }
.steps.verbs .idx {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}

/* ── Honest status ────────────────────────────────────────────────────── */

.today { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 0 clamp(32px, 5vw, 80px); }
.today .band-head { grid-column: 1 / -1; }

.status { align-self: start; }
.status > div {
  display: grid; grid-template-columns: minmax(0, 15ch) minmax(0, 1fr); gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--rule);
}
.status > div:last-child { border-bottom: 1px solid var(--rule); }
.status dt { font: 500 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.status dd { font-size: 14.5px; color: var(--muted); }

.open { align-self: start; background: var(--shop-2); padding: 26px 28px; }
.open h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; margin-bottom: 14px; }
.open li {
  padding: 11px 0 11px 20px; position: relative;
  font-size: 14px; line-height: 1.55; color: var(--muted);
  border-top: 1px solid var(--rule);
}
.open li::before { content: "?"; position: absolute; left: 0; color: var(--coral); font: 600 12px var(--mono); }
.open .note { margin-top: 16px; font: 400 11.5px var(--mono); line-height: 1.7; color: var(--muted); }

/* ── Access ───────────────────────────────────────────────────────────── */

.access { padding-block: clamp(88px, 11vw, 150px); }
.access-inner { max-width: 640px; }
.access .eyebrow { margin-bottom: 18px; }
.access h2 {
  font-size: clamp(30px, 4vw, 50px); line-height: 1.06;
  letter-spacing: -.028em; font-weight: 600;
}
.access .lede { margin-top: 22px; font-size: 16px; line-height: 1.62; color: var(--muted); }
.constraint {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule);
  font: 400 11.5px var(--mono); line-height: 1.85; color: var(--muted);
}
.access .actions { margin-top: 32px; }
.cta-contact { margin-top: 18px; font: 400 11.5px var(--mono); color: var(--muted); }
.cta-contact a { border-bottom: 1px solid var(--muted); text-decoration: none; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 28px;
  max-width: var(--measure); margin-inline: auto;
  padding: 28px var(--gutter); border-top: 1px solid var(--rule);
}
.foot-brand { display: flex; align-items: center; gap: 9px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; }
.foot-links a {
  font: 400 11px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 10px 2px; margin: -10px -2px;
}
.foot-links a:hover { color: var(--ink); }
.foot small { font: 400 10px var(--mono); letter-spacing: .08em; color: var(--muted); }

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .nav-links { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
  .hero-copy { max-width: 62%; }
  .today { grid-template-columns: 1fr; }
  .open { margin-top: 40px; }
  .steps li, .steps.verbs li { grid-template-columns: 64px minmax(0, 1fr); }
  .steps h3 { grid-column: 2; }
  .steps p, .steps .note { grid-column: 2; }
  .steps p { margin-top: 8px; }
}

@media (max-width: 760px) {
  /* The labels crowd the field at phone width, so the well becomes the object
     alone and the caption below carries the explanation. */
  .well { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .well-stage { position: relative; inset: auto; height: 46vh; min-height: 320px; }
  .well-labels { display: none; }
  .hero-copy { position: static; padding: clamp(28px, 7vw, 48px) var(--gutter) 0; max-width: none; }
  /* The field spans the full width here, so the copy needs its own ground to
     stay legible over the lines. */
  /* Solid, not a scrim: the field now sits below the copy rather than under
     it, so the agent plates stay legible. They are the pitch on a phone. */
  .hero-copy {
    position: relative; z-index: 1;
    background: var(--plate);
    padding-bottom: 28px;
  }
  .well-readout { left: var(--gutter); right: auto; text-align: left; }
  .well-agents em { display: none; }
  .well-agents b { font-size: 9px; }
  .actions { gap: 16px; }
  .foot-links { margin-left: 0; width: 100%; order: 3; }
}

@media (max-width: 560px) {
  .nav { height: auto; flex-wrap: wrap; padding-top: 12px; }
  .nav-links { order: 3; width: 100%; padding: 12px 0; margin-left: 0; }
  .nav-cta { margin-left: auto; }
  html { scroll-padding-top: 110px; }
  .steps li, .steps.verbs li { grid-template-columns: 1fr; gap: 6px; }
  .idx { padding-top: 0; }
  .status > div { grid-template-columns: 1fr; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand.is-armed .wordmark { transition: none; }
}