/* ═══════════════════════════════════════════════════════════════════
   RIVEL · 004 STACK
   Founder → loop → venture → return. Pinned instrument, transparent GL.
   ═══════════════════════════════════════════════════════════════════ */

#founder-venture.hps-stack-sec {
  padding: 0;
  overflow: visible;
  overflow-anchor: none;
  position: relative;
}

.hps-stack-sec .pin-spacer,
.hps-stack-sec__stage {
  background: transparent;
  background-color: transparent;
}

.hps-stack-sec__stage {
  --stack-ink: var(--rg-state-ink, #38bdf8);
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
  overflow-anchor: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  padding: 4.6rem clamp(1.25rem, 4vw, 4rem) .85rem;
}

.hps-stack-sec__stage .hps-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
}

.hps-stack-sec__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  width: 100%;
  max-width: 62rem;
  flex: 0 0 auto;
  margin: 0 0 .35rem;
}

.hps-stack-sec__head .hps-display {
  margin: 0;
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 500;
}
.hps-stack-sec__head .hps-lede {
  margin: 0;
  max-width: 46ch;
  font-size: .92rem;
  color: rgba(255, 255, 255, .58);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hps-stack-sec__live {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  max-width: 24rem;
  margin: .2rem 0 0;
  white-space: nowrap;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--stack-ink) 80%, #fff);
}

.hps-stack-sec__live-rule {
  flex: 1 1 auto;
  min-width: 1.25rem;
  height: 1px;
  background: color-mix(in srgb, var(--stack-ink) 62%, transparent);
}

.hps-stack {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: .7rem;
}

.hps-stack__view {
  position: relative;
  height: 100%;
  min-height: 16rem;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .04);
  border-radius: 1.5rem;
  overflow: hidden;
  background: transparent;
}

.hps-stack__view canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hps-stack__labels {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.story-label {
  position: absolute;
  left: clamp(.9rem, 2.2vw, 1.45rem);
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity .4s ease;
}

.story-label.founder {
  top: 16%;
  color: #b63cff;
}

.story-label.venture {
  bottom: 32%;
  color: #00d4ff;
}

.hps-stack__story {
  position: absolute;
  left: clamp(.95rem, 2.4vw, 1.6rem);
  top: 18%;
  z-index: 3;
  width: min(34rem, calc(100% - 2rem));
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform, filter;
}

.hps-stack__story [data-story-kicker] {
  margin: 0 0 .45rem;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(232, 237, 242, .55);
}

.hps-stack__story h3 {
  margin: 0;
  font-family: var(--hps-display, 'PP Neue Machina', sans-serif);
  font-size: clamp(1.35rem, 2.8vw, 2.1rem);
  letter-spacing: -.03em;
  line-height: 1.15;
  color: #fff;
}

.hps-stack__story [data-story-sub] {
  margin: .55rem 0 0;
  max-width: 36ch;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(232, 237, 242, .62);
}

.hps-stack__pulse {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #e8edf2;
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
}

/* Las diez magnitudes van cosidas a su cuenta del 3D: se mueven cuando la pieza
   gira, se atenuan cuando la cuenta se va al fondo y se encienden cuando la
   varilla de su relacion sale o llega. Antes eran dos columnas pegadas al borde
   derecho que no correspondian a nada y solo se veian entre p=0.175 y p=0.33. */
.hps-stack__anchors {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hps-stack__anchors span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  white-space: nowrap;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(190, 202, 216, .82);
  text-shadow: 0 0 7px #050505, 0 0 2px #050505;
  will-change: transform, opacity;
  transition: color .22s ease, text-shadow .22s ease;
}

.hps-stack__anchors span[data-out] {
  color: rgba(169, 141, 255, .88);
}

.hps-stack__anchors span.is-lit {
  color: #fff;
  text-shadow: 0 0 9px currentColor, 0 0 2px #050505;
}

.hps-stack__spine {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  margin: 0;
  padding: .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 100vw;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .32);
}

.hps-stack__spine i {
  display: block;
  width: 1.5rem;
  height: 1px;
  background: color-mix(in srgb, var(--stack-ink) 40%, transparent);
}

.hps-stack__spine [data-spine].is-on {
  color: #fff;
}

.hps-stack__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
}

.hps-stack__rail button {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .5);
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .6rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  padding: .42rem .62rem;
  border-radius: 100vw;
  cursor: pointer;
}

.hps-stack__rail button[aria-current="true"] {
  color: #fff;
  border-color: color-mix(in srgb, var(--stack-ink) 55%, transparent);
  background: color-mix(in srgb, var(--stack-ink) 16%, transparent);
}

.hps-stack__rail button:focus-visible {
  outline: 2px solid #b06bff;
  outline-offset: 3px;
}

.hps-stack__copy { display: none; }

.hps-stack__fallback {
  padding: 1.25rem 1.1rem 1.4rem;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 1.5rem;
}

.hps-stack.is-webgl .hps-stack__fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sin WebGL el stage no se pinea, asi que la lista tiene que poder crecer. */
.hps-stack-sec__stage:has(.hps-stack:not(.is-webgl)) {
  height: auto;
  max-height: none;
  overflow: visible;
}

.hps-stack__fallback ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}

.hps-stack__fallback li {
  display: grid;
  gap: .3rem;
}

.hps-stack__fallback b {
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rg-state-lit, #7dd3fc);
}

@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-stack-sec__stage {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding: 4.8rem clamp(1.15rem, 4vw, 2.4rem) 2.2rem;
  }
  .hps-stack-sec__head .hps-display {
    font-family: var(--hps-display, 'PP Neue Machina', sans-serif);
    font-size: clamp(1.7rem, 5vw, 2.4rem);
    font-weight: 400;
    letter-spacing: -.035em;
    text-transform: none;
  }
  .hps-stack-sec__head .hps-lede {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    max-width: 42ch;
  }
  .hps-stack-sec__live { display: none; }
  .hps-stack__story {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    opacity: 1;
    filter: none;
  }
  .hps-stack__story h3 { font-size: clamp(1.35rem, 3.8vw, 1.85rem); }
  .hps-stack__anchors { display: none; }
}

@media (max-width: 720px) {
  .hps-stack-sec__stage { padding: 4.6rem 1.2rem 2.4rem; }
  .hps-stack-sec__head {
    gap: .55rem;
    margin-bottom: .15rem;
  }
  .hps-stack-sec__head .hps-display {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
  .hps-stack-sec__head .hps-lede {
    font-size: .98rem;
    line-height: 1.55;
  }
  .hps-stack__story h3 { font-size: clamp(1.35rem, 6.2vw, 1.7rem); }
  .hps-stack__story [data-story-sub] {
    display: block;
    font-size: .98rem;
  }
  .hps-stack__rail button {
    padding: .62rem .78rem;
    font-size: .62rem;
  }
}


@media (prefers-reduced-motion: reduce) {
  .hps-stack-sec__stage {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  .hps-stack__view { min-height: 22rem; }
}

/* En tactil no hay proyeccion por frame: las diez magnitudes caen a dos columnas
   estaticas dentro del lienzo, que es barato y siempre legible. */
@media (pointer: coarse) {
  .hps-stack__anchors {
    inset: auto .95rem 1rem .95rem;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(5, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .12rem .9rem;
  }
  .hps-stack__anchors span {
    position: static;
    opacity: .48;
    transform: none;
    font-size: .55rem;
  }
  .hps-stack__anchors span[data-out] { color: rgba(169, 141, 255, .7); }
}

@media (max-width: 640px) {
  .hps-stack__anchors { display: none; }
}

/* Los dos buses ya se rotulan en la serigrafia de la placa (J1 FOUNDER,
   J2 VENTURE), en el canto por el que entran. Estos dos rotulos flotantes
   nombraban lo mismo desde un sitio que ya no corresponde a nada. */
.hps-stack__labels { display: none; }

/* Legendario del apilado. No es un menu en el margen: es la regla del stackup,
   apartada de la pieza. Los seis anclajes son el MISMO punto de la placa
   trasladado a lo largo del eje z local, asi que en pantalla caen sobre una
   recta, y esa recta es el eje del apilado. El bloque entero es esa recta
   copiada y apartada UNA sola distancia: la correspondencia se lee por
   traslacion rigida, como una cota desplazada en un plano, sin cota, sin filete
   y sin flecha.

   Va a bandera DERECHA por transform: el borde que mira a la pieza es el borde
   compuesto, y asi no se mide el ancho del texto NUNCA — la posicion deja de
   depender de si la cadena mas larga es INTELLIGENCE o INTELIGENCIA. El cuerpo
   lo escribe el JS en el contenedor y lo heredan los seis. */
.hps-stack__layers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Suelo del primer frame; placeLayers lo reescribe desde la escala proyectada
     de CONTEXT en cuanto hay proyeccion. */
  font-size: 10px;
}

.hps-stack__layers span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  display: flex;
  align-items: baseline;
  gap: .9em;
  white-space: nowrap;
  font-family: var(--hps-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 1em;
  font-weight: 500;
  /* .2em es el tracking de la familia de rotulos proyectados de esta escena
     (.hps-stack__anchors): lo que separa el legendario del rail de capitulos no
     es el tracking sino el rake y la bandera derecha, pero esto lo pone en la
     familia correcta — la del instrumento, no la del teatro. */
  /* .12em y no .2em: el tracking ancho es el idioma de los rotulos pequeños de
     la placa, pero aqui cada 0.08em de mas son ~13 px de renglon, y esos 13 px
     salen del abanico, que es lo unico que separa este bloque de una lista. */
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(198, 210, 226, .92);
  text-shadow: 0 0 8px #050505, 0 0 2px #050505;
  will-change: transform, opacity;
}

/* El codigo va AL FINAL porque es el extremo que toca la pieza: con el bloque a
   bandera derecha los seis designadores caen sobre una sola recta paralela al
   eje del apilado, y esa recta —dibujada nada mas que por la alineacion de la
   tipografia— es toda la correspondencia que hace falta. Ademas rompe el
   paralelismo lexico con el rail de capitulos, que empieza por el numero
   ("01 PROBLEMA"): un legendario que dijera "L1 DIRECCION" es literalmente la
   misma construccion y por eso se leian como hermanos. */
.hps-stack__layers span i {
  flex: none;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  letter-spacing: .12em;
  color: rgba(154, 167, 185, .88);
}

/* La capa en la que estamos: unica en blanco, unico codigo en violeta, y la
   unica que no recede con la distancia. Tres señales y ni una mas: el aire de
   1.38 a los dos lados ya la identifica sin una flecha que diga "estas aqui". */
.hps-stack__layers span[data-layer="2"] {
  color: #f2f6fc;
}
.hps-stack__layers span[data-layer="2"] i {
  color: rgba(169, 141, 255, .95);
}

/* Fuera del cine no hay proyeccion por frame que sostenga esto: el lienzo cae y
   los seis anclajes convergen. Se apaga con la MISMA media query con la que se
   apagan las trece etiquetas de la placa, que es donde el cine deja de estar
   montado; antes solo se apagaba en (pointer: coarse) y quedaba corriendo en un
   regimen que nadie habia mirado. */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-stack__layers { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   MOVIL v1 · bloque de correcciones responsive (append: gana por orden)
   ══════════════════════════════════════════════════════════════════ */

/* ── 7.A  BORRAR las lineas 406-408 enteras:

@media (max-height: 740px) {
  .hps-stack-sec__head .hps-lede { display: none; }
}

   Por que borrar y no acotar: el pin del 004 solo se monta en el cine
   (min-width:1080px and min-height:740px and pointer:fine). Por debajo de
   740px de alto el stage ya cae a height:auto (linea 347) y no hay nada que
   proteger; por encima de 740px la consulta ni dispara. La UNICA altura
   donde toca un capitulo pineado es 740px exactos, y ahi tampoco hace
   falta: el lede esta topado a dos lineas con -webkit-line-clamp:2 y al
   stage le sobran ~400px sobre el min-height de la placa. Hoy la regla solo
   borra la unica frase que explica el capitulo en TODO movil apaisado, en
   un iPhone SE en vertical (667px de alto) y en cualquier ventana baja.
   Comando exacto: */

cd /Users/rivelfounder/rivel-companies-web
perl -0pi -e 's{\n\@media \(max-height: 740px\) \{\n  \.hps-stack-sec__head \.hps-lede \{ display: none; \}\n\}\n}{\n}s' css/home-stack.css
grep -n "max-height: 740px" css/home-stack.css   # debe salir vacio


/* ══════════ 7.B  APPEND AL FINAL DE css/home-stack.css ══════════ */

/* ═══ [M] Fuera del cine no hay scrub: la placa no narra los seis actos, se
   queda congelada en applyProgress(0.712). El texto vuelve a ser quien
   cuenta el capitulo, igual que en el 002 (home-axiom.css:249, que es la
   vara de medir). Hoy .hps-stack.is-webgl .hps-stack__fallback lo recorta a
   1px en cuanto arranca WebGL, y WebGL SI arranca en el telefono.
   El .hps-stack__story NO se oculta: es el pie de foto vivo que escriben
   los botones del rail, y su acto por defecto ("RIVEL makes those
   relationships visible") no esta en la lista del fallback. ═══ */
@media (max-width: 1079px), (max-height: 739px), (pointer: coarse) {
  .hps-stack.is-webgl .hps-stack__fallback {
    position: static;
    width: auto;
    height: auto;
    margin: .4rem 0 0;
    padding: 1.25rem 1.1rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 1.5rem;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .hps-stack__fallback li {
    font-size: .95rem;
    line-height: 1.5;
    color: rgba(232, 237, 242, .58);
  }

  /* Seguro por si se prefiere no borrar el bloque de max-height:740px:
     esto lo cubre en todo el regimen sin cine (queda fuera solo una ventana
     de cine de 740px exactos de alto). */
  .hps-stack-sec__head .hps-lede { display: block; }

  /* Fuera del cine el rail es el UNICO control del capitulo: el pin no se
     monta y el scroll ya no mueve la placa. Medido: 29,8px de alto en iPad
     vertical y 36,7px en telefono, con 5,6px entre pildoras. Mismo pase
     tactil que los nodos del Loop (home-loop.css:296).
     El min-height gobierna la altura, asi que no hay padding vertical. */
  .hps-stack__rail { gap: .45rem; }
  .hps-stack__rail button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 .8rem;
    line-height: 1.1;
    font-size: .62rem;
  }
}

@media (max-width: 720px) {
  /* solo se sube el cuerpo para que se lea en telefono: el alto lo hereda.
     .8rem y .9rem de padding estan medidos para que las seis etiquetas
     sigan cabiendo en DOS filas en EN y en ES a 360 y 390px. */
  .hps-stack__rail button { padding: 0 .9rem; font-size: .64rem; }
}