/* ============================================================
   VERNIAS — Ontology section (isometric platform diagram)
   Loaded AFTER editorial.css on the homepage only.
   Fully namespaced (.onto-* / scoped under .onto-svg) so it
   cannot collide with the editorial design system.
   ============================================================ */
:root{
  --pine:#0E5A41;--pine-2:#0A4733;--pine-bright:#13a172;--pine-tint:rgba(14,90,65,0.10);
  --face-top:#FFFFFF;--face-l:#F1EDE6;--face-r:#E8E2D8;--isoline:#5B6166;
}

/* full-bleed pinned stage */
.onto-stage{height:88vh;min-height:560px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-top:44px}
.onto-scene{position:relative;width:100%;height:100%;max-width:1520px;margin:0 auto}
.onto-svg{position:absolute;inset:0;width:100%;height:100%}
.onto-svgwrap{position:absolute;inset:0}

/* iso faces (scoped under .onto-svg) */
.onto-svg .planetop{fill:var(--face-top);stroke:var(--isoline);stroke-width:1.1;stroke-linejoin:round}
.onto-svg .slab{fill:url(#ontoHatch);stroke:var(--isoline);stroke-width:1.1;stroke-linejoin:round}
.onto-svg .f-top{fill:var(--face-top)}.onto-svg .f-l{fill:var(--face-l)}.onto-svg .f-r{fill:var(--face-r)}
.onto-svg .face{stroke:var(--isoline);stroke-width:1;stroke-linejoin:round}
.onto-svg .face.green{fill:var(--pine);stroke:var(--pine)}
.onto-svg .face.greenl{fill:rgba(14,90,65,.16)}
.onto-svg .det{stroke:var(--isoline);stroke-width:.9;fill:none}
.onto-svg .det.g{stroke:var(--pine)}
.onto-svg .tierlabel{fill:var(--ink-2);font-family:"Geist Mono",monospace;font-size:18px;letter-spacing:.18em;text-anchor:middle;font-weight:500}
.onto-svg .tierlabel.small{font-size:12px;fill:var(--ink-3)}
.onto-svg .objlabel{fill:var(--ink-2);font-family:"General Sans",sans-serif;font-size:12px;text-anchor:middle;font-weight:500}
.onto-svg .olink{fill:none;stroke:var(--ink-3);stroke-width:1.1;stroke-dasharray:1.5 4}

/* verb / action pills (svg) */
.onto-svg .onto-pill rect{fill:rgba(14,90,65,.12);stroke:none}
.onto-svg .onto-pill text{fill:var(--pine);font-family:"General Sans",sans-serif;font-size:11px;font-weight:500;text-anchor:middle}
.onto-svg .onto-pill.dark rect{fill:var(--pine)}.onto-svg .onto-pill.dark text{fill:var(--paper)}

/* flow connectors */
.onto-svg .flow{fill:none;stroke:var(--pine);stroke-width:1.3;stroke-dasharray:1.6 7;stroke-linecap:round;opacity:.85}
@media(prefers-reduced-motion:no-preference){.onto-svg .flow{animation:ontoMarch 1.1s linear infinite}}
@keyframes ontoMarch{to{stroke-dashoffset:-17.2}}

/* floating detail card */
.onto-detcard{position:absolute;left:4%;top:42%;width:210px;background:var(--surface);border:1px solid var(--ink);border-radius:10px;padding:13px 15px;box-shadow:0 14px 36px rgba(20,24,26,.14);font-size:.8rem;z-index:3}
.onto-detcard .h{font-family:"Geist Mono",monospace;font-size:.72rem;letter-spacing:.06em;color:var(--ink);margin-bottom:.6rem}
.onto-detcard .row{display:flex;justify-content:space-between;gap:1rem;padding:.28rem 0;border-top:1px solid var(--line);color:var(--ink-3)}
.onto-detcard .row b{color:var(--ink);font-weight:500;font-family:"Geist Mono",monospace;font-size:.74rem}
.onto-detcard .score{font-size:1.4rem;color:var(--pine);font-weight:600}

/* captions / progress */
.onto-caps{position:absolute;left:30px;top:26px;width:min(340px,40%);z-index:4}
.onto-cap{position:absolute;left:0;top:0;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.onto-cap.show{opacity:1;transform:none}
.onto-cap .k{font-family:"Geist Mono",monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pine)}
.onto-cap h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink);font-weight:600;margin:.5rem 0 .35rem}
.onto-cap p{font-size:.98rem;color:var(--ink-2);max-width:28ch}
.onto-progress{position:absolute;left:30px;bottom:24px;display:flex;gap:8px;z-index:4}
.onto-progress span{width:30px;height:3px;border-radius:3px;background:var(--line-2);transition:background .3s var(--ease)}
.onto-progress span.on{background:var(--pine)}

/* layers strip (reframed pillars) */
.onto-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:56px;border-top:1px solid var(--line-2)}
.onto-layer{padding:26px 28px;border-right:1px solid var(--line)}
.onto-layer:first-child{padding-left:0}
.onto-layer:last-child{border-right:none;padding-right:0}
.onto-layer .k{font-family:"Geist Mono",monospace;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--pine)}
.onto-layer h3{font-size:1.2rem;color:var(--ink);font-weight:600;margin:.7rem 0 .5rem;letter-spacing:-.01em}
.onto-layer p{font-size:.96rem;color:var(--ink-2)}

@media(max-width:900px){
  .onto-stage{height:auto;padding:8px 0 0}.onto-scene{height:auto}
  .onto-svgwrap{position:relative;inset:auto;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .onto-svg{position:relative;inset:auto;width:900px;height:auto;display:block}
  .onto-caps{position:static;width:auto;margin:0 28px 12px}.onto-cap{position:static;opacity:1;transform:none}.onto-cap:not(:first-child){display:none}
  .onto-progress{display:none}.onto-detcard{display:none}
  .onto-layers{grid-template-columns:1fr;border-top:none}.onto-layer{border-right:none;border-top:1px solid var(--line);padding:22px 0}
}