/* v02-vectorscan — the outline page.

   Rules: no element is filled. Every box is a stroke, every surface is the
   page black, and the only solid colour on the page is the primary button,
   the dithered horizon under the hero and the dithered band before the
   sign-up. The index is a two-part instrument: names on the right, one
   readout on the left. */

/* Every notched box is unfilled — except the primary button, which is the one
   solid control on the page and needs its accent fill to carry its text. */
.v2 .st-notch:not(.st-primary) { --fill: var(--bg); }

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

.v2-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding-block: clamp(4rem, 10vw, 8rem) clamp(6rem, 14vw, 11rem);
}
.v2-depth {
  position: absolute;
  inset: -25% -10%;
  z-index: -1;
  will-change: transform;
}
.v2-field {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--accent);
  stroke-width: var(--field-stroke, 1px);
  opacity: var(--field-opacity, 0.3);
  vector-effect: non-scaling-stroke;
}
.v2-hero-grid { position: relative; }
.v2-title {
  font-size: var(--display-1);
  max-width: 24ch;
  letter-spacing: 0.02em;
  line-height: 1.06;
  -webkit-text-stroke: 1.5px var(--accent);
  color: transparent;
  text-transform: uppercase;
}
.v2-hero .st-support { margin-top: var(--space-28); max-width: 34ch; }
.v2-hero .st-adopt { margin-top: var(--space-16); max-width: 46ch; }
.v2-actions { margin-top: clamp(2rem, 5vw, 3.5rem); gap: var(--space-16); }
/* The horizon: the one place the outline page fills, an ordered-dither ramp
   from the page black up into phosphor at the foot of the first screen. */
.v2-horizon {
  position: absolute;
  inset: auto 0 0;
  height: clamp(110px, 17vw, 220px);
  z-index: -1;
  background-image: linear-gradient(to top, color-mix(in srgb, var(--accent) 55%, #000) 0%, var(--bg) 100%);
  -webkit-mask-image: linear-gradient(to top, #000 0 55%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0 55%, transparent 100%);
}

/* ---------- the index ---------- */

.v2-heading {
  font-size: var(--display-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.v2-index { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
.v2-readout { padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.v2-readout-label { margin-bottom: var(--space-20); }
.v2-readout-name {
  font-family: var(--font-mono);
  font-size: var(--display-3);
  color: var(--accent-hi);
  letter-spacing: 0.02em;
  margin: 0;
}
.v2-readout-lang {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--space-8) 0 var(--space-20);
}
.v2-readout-desc { color: var(--text-dim); line-height: var(--leading-relaxed); margin: 0; }
.v2-readout-links { display: flex; gap: var(--space-20); margin: var(--space-24) 0 0; }
.v2-readout-links a { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; }
.v2-readout.is-swapped .v2-readout-name,
.v2-readout.is-swapped .v2-readout-desc { animation: v2-swap var(--dur-slow) var(--ease-out); }
@keyframes v2-swap { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .v2-readout.is-swapped .v2-readout-name, .v2-readout.is-swapped .v2-readout-desc { animation: none; } }

.v2-list { border-top: 1px solid var(--border); }
.v2-item {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-14) var(--space-14) var(--space-14) 0;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  transition: border-color var(--dur-base) ease, transform var(--dur-base) var(--ease-out);
}
.v2-item-name {
  font-family: var(--font-mono);
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--text);
}
.v2-item-name::after { content: ""; position: absolute; inset: 0; }
.v2-item-lang {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

/* ---------- desktop ---------- */

@media (min-width: 900px) {
  .v2-index { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); align-items: start; }
  .v2-readout { position: sticky; top: 6rem; }
  /* The description and the links live in every item for readers and search;
     on the desktop the readout panel is where they are shown. */
  .v2-item-desc, .v2-item-links {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .v2-item:hover, .v2-item.is-hover, .v2-item.is-shown {
    border-left-color: var(--accent);
    transform: translateX(6px);
  }
  .v2-item.is-near { border-left-color: var(--border-2); }
}

/* ---------- sign-up and footer ---------- */

.v2-narrow { max-width: 44rem; }
.v2-nl { --line: var(--accent); --fill: var(--bg); }
.v2-nl h2 { font-family: var(--font-mono); font-size: var(--display-3); letter-spacing: 0.02em; }
.v2-band { border-block: 1px solid var(--border-2); }
.v2 .st-footer { border-top-color: var(--border); }

/* ---------- mobile (390px) ---------- */

@media (max-width: 899px) {
  .v2-hero { min-height: auto; padding-block: clamp(2.5rem, 12vw, 4rem) clamp(4rem, 16vw, 6rem); }
  /* The motto stays the largest type on the phone, which the mono face at two
     lines could not be: the first clause keeps its line, the second takes the
     two it needs, and the break falls between words. */
  .v2-hero .v2-title { -webkit-text-stroke-width: 1px; font-size: clamp(1.5rem, 7.6vw, 2rem); letter-spacing: 0; max-width: none; }
  .v2-depth-near, .v2-depth-mid { display: none; }
  .v2-actions { flex-direction: column; align-items: stretch; }
  .v2-actions .st-btn { width: 100%; }
  .v2-readout { display: none; }
  .v2-item { flex-wrap: wrap; padding-block: var(--space-16); }
  .v2-item-lang { width: 100%; }
  .v2-item-desc {
    width: 100%;
    margin: var(--space-8) 0 0;
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
  }
  .v2-item-links { display: flex; gap: var(--space-20); width: 100%; margin-top: var(--space-6); }
  .v2-item-links a { min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; }
  .v2-item-name::after { content: none; }
}