/* SMOrchestra story visuals.
 * Six archetypes that carry the argument of a prose-heavy section. Built in the site's
 * existing language: dark ground, hairline borders, one accent per visual, tabular
 * numerals, 10.5px/.14em uppercase micro-labels, the orange 40x2 section tick.
 *
 * Coherence is the point. Every number rendered here is lifted from the visible copy of
 * the page it sits on; nothing is invented. Sections with no number get a structural
 * archetype (ladder, window, blocks) rather than a fake chart.
 *
 * Pairs with /assets/visuals.js-free markup. Animation reuses elevation.js: the container
 * carries `vz reveal`, elevation.js adds `.lit` and runs drawPaths() on `.paths path`.
 * Degrades fully with JS off via the html:not(.js-reveal) guard in elevation.css.
 * Created 2026-07-27.
 */

/* ============ SHARED CONTAINER ============ */
.vz{
  position:relative;max-width:980px;margin:44px auto 0;box-sizing:border-box;
  background:var(--card-deep);border:1px solid rgba(255,255,255,.09);
  padding:26px 30px 22px;box-shadow:var(--shadow-card);isolation:isolate;
  --vz-a:var(--orange);
}
.vz::before{content:"";position:absolute;top:-1px;inset-inline-start:0;width:40px;height:2px;background:var(--vz-a)}
/* faint grid ground, same texture the deep sections use */
.vz::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.02;
  background-image:
    repeating-linear-gradient(to right,#fff 0 1px,transparent 1px 60px),
    repeating-linear-gradient(to bottom,#fff 0 1px,transparent 1px 60px);
}
.vz.cy{--vz-a:var(--cyan)}
.vz.lm{--vz-a:var(--lime)}
.vz.pu{--vz-a:#a78bfa}

.vz-cap{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text-dim);margin-bottom:20px;line-height:1.5}
.vz-cap b{color:var(--vz-a);font-weight:700}

.vz svg{display:block;width:100%;height:auto;overflow:visible}
.vz text{font-family:var(--f);fill:var(--text-dim)}
.vz .t-num{font-size:17px;font-weight:800;fill:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vz .t-acc{fill:var(--vz-a)}
.vz .t-lab{font-size:11px;font-weight:700;letter-spacing:.13em}
.vz .t-note{font-size:12.5px;fill:var(--text-dim)}
.vz .grid-l{stroke:rgba(255,255,255,.07);stroke-width:1}
.vz .axis{stroke:rgba(255,255,255,.16);stroke-width:1}

/* legend / footer strip */
.vz-foot{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.vz-key{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--text-dim);line-height:1.4}
.vz-key i{width:16px;height:0;border-top:2px solid currentColor;flex:none;display:block;margin-top:1px}
.vz-key.a{color:var(--vz-a)}
.vz-key.a i{border-top-style:solid}
.vz-key.b i{border-top-style:dashed;border-top-color:rgba(255,255,255,.5)}
.vz-key b{color:#fff;font-weight:700}

/* inner stagger, driven by --i set in elevation.js */
.vz .vz-in{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms)}
.vz.lit .vz-in{opacity:1;transform:none}
.vz .paths path{transition:stroke-dashoffset .9s var(--ease)}

@media (max-width:700px){
  .vz{padding:20px 18px 18px;margin-top:34px}
  .vz-cap{margin-bottom:16px}
}

/* ============ 1 · DIVERGENCE ============
   Two series on a shared baseline: one climbs, one does not. Carries every "you paid
   more and nothing changed" argument on the site. */
.vz-div .s-a{fill:none;stroke:var(--vz-a);stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter}
.vz-div .s-b{fill:none;stroke:rgba(255,255,255,.45);stroke-width:1.75;stroke-dasharray:5 5;stroke-linecap:square}
.vz-div .s-fill{fill:var(--vz-a);opacity:.07}
.vz-div .dot-a{fill:var(--vz-a)}
.vz-div .dot-b{fill:rgba(255,255,255,.55)}
.vz-div .gap-l{stroke:var(--vz-a);stroke-width:1;stroke-dasharray:2 4;opacity:.55}
.vz-div .gap-t{font-size:11px;font-weight:700;letter-spacing:.1em;fill:var(--vz-a)}

/* ============ 2 · LADDER ============
   Ordered progression. Rungs gain weight down the list. */
.vz-lad{display:flex;flex-direction:column;gap:8px}
.vz-rung{display:flex;align-items:center;gap:16px;padding:15px 18px;box-sizing:border-box;
  background:rgba(255,255,255,.028);border-inline-start:2px solid var(--vz-a)}
.vz-rung:nth-child(1){opacity:.62}
.vz-rung:nth-child(2){opacity:.74}
.vz-rung:nth-child(3){opacity:.86}
.vz-rung:nth-child(n+4){opacity:1}
.vz-rung .rn{font-size:11px;font-weight:800;color:var(--vz-a);min-width:20px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.vz-rung .rt{font-size:15.5px;font-weight:700;color:#fff;line-height:1.35;letter-spacing:-.01em}
.vz-rung .rv{margin-inline-start:auto;font-size:13px;color:var(--text-dim);font-variant-numeric:tabular-nums;text-align:end;flex:none;padding-inline-start:14px}
@media (max-width:620px){
  .vz-rung{flex-wrap:wrap;gap:6px 14px;padding:13px 15px}
  .vz-rung .rv{margin-inline-start:36px;text-align:start;padding-inline-start:0}
  .vz-rung .rt{flex:1 1 auto}
}

/* ============ 3 · FIT WINDOW ============
   An accepted band with out-of-range markers at each end. Qualification, drawn. */
.vz-win{padding:8px 0 4px}
.vz-win .wt{position:relative;height:8px;background:rgba(255,255,255,.06);margin:52px 0 0}
.vz-win .wb{position:absolute;top:0;bottom:0;background:var(--vz-a)}
.vz-win .wb::before,.vz-win .wb::after{content:"";position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--vz-a)}
.vz-win .wb::before{inset-inline-start:0}
.vz-win .wb::after{inset-inline-end:0}
.vz-win .wm{position:absolute;top:-46px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.vz-win .wm .mv{display:block;font-size:16px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vz-win .wm .ml{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;color:var(--text-dim);margin-top:3px}
.vz-win .wm.in .mv{color:var(--vz-a)}
.vz-win .wends{display:flex;justify-content:space-between;margin-top:24px;font-size:12.5px;color:var(--text-dim);gap:16px}
.vz-win .wends span{max-width:44%}
.vz-win .wends span:last-child{text-align:end}
@media (max-width:620px){.vz-win .wm .mv{font-size:14px}.vz-win .wm .ml{font-size:9.5px;letter-spacing:.08em}}

/* ============ 4 · CEILING ============
   A curve that rises then flattens against a hard labelled barrier. */
.vz-ceil .c-line{fill:none;stroke:var(--vz-a);stroke-width:2.5;stroke-linecap:square}
.vz-ceil .c-fill{fill:var(--vz-a);opacity:.07}
.vz-ceil .c-bar{stroke:rgba(255,255,255,.55);stroke-width:1.75;stroke-dasharray:6 5}
.vz-ceil .c-lab{font-size:11px;font-weight:700;letter-spacing:.13em;fill:rgba(255,255,255,.75)}
.vz-ceil .c-dot{fill:var(--vz-a)}

/* ============ 5 · UNIT BLOCKS ============
   Two or more labelled definitions, hairline-separated. */
.vz-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:rgba(255,255,255,.09)}
.vz-unit{background:var(--card-deep);padding:22px 20px;box-sizing:border-box}
.vz-unit .uk{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--vz-a);margin-bottom:12px}
.vz-unit .uv{font-size:clamp(20px,2.2vw,26px);font-weight:800;color:#fff;letter-spacing:-.025em;line-height:1.15;font-variant-numeric:tabular-nums;text-wrap:balance}
.vz-unit .ud{font-size:13.5px;color:var(--text-dim);line-height:1.55;margin-top:10px}

/* ============ 6 · PORTRAIT ============
   Editorial founder block. Same z-stack as .founder-photo: gradient ground, radial
   glows, the image on top at z1, scrim, caption. The image is optional by design and
   removes itself on error, leaving the placeholder and caption intact. */
.vz-port{max-width:1040px;padding:0;background:none;border:0;box-shadow:none}
.vz-port::before,.vz-port::after{display:none}
.vz-port .pg{display:grid;grid-template-columns:minmax(230px,280px) 1fr;gap:44px;align-items:center}
.vz-port .pf{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(135deg,#1a1a1a 0%,#262626 55%,#1a1a1a 100%)}
.vz-port .pf::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 30% 30%,rgba(255,107,53,.18) 0%,transparent 60%),
                   radial-gradient(circle at 70% 70%,rgba(56,189,248,.15) 0%,transparent 60%)}
.vz-port .pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 22%;display:block;z-index:1;opacity:0;transition:opacity .4s ease;
  filter:grayscale(.28) contrast(1.06) brightness(.96)}
.vz-port .pf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.42) 55%,transparent 100%)}
.vz-port .pm{position:absolute;bottom:18px;inset-inline:18px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.vz-port .pm .pn{color:#fff;font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.vz-port .pm .ps{color:#bdbdbd;font-size:11px;letter-spacing:.13em;text-transform:uppercase;margin-top:4px;font-weight:700}
.vz-port .pm .pt{width:40px;height:2px;background:var(--orange);flex:none;margin-bottom:4px}
.vz-port .pq{border-inline-start:2px solid var(--orange);padding:4px 0 4px 20px;padding-inline-start:20px;padding-inline-end:0}
.vz-port .pq p{font-size:clamp(20px,2.6vw,31px);line-height:1.28;color:#fff;font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
.vz-port .pq .pa{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-top:16px}
@media (max-width:820px){
  .vz-port .pg{grid-template-columns:1fr;gap:28px}
  .vz-port .pf{max-width:280px}
}

/* ============ 6b · PORTRAIT BYLINE ============
   56px circular avatar + name/role, attached under a pull-quote so the quote reads
   as the founder's. Lifted from the cohort page's page-local pattern. */
.port-line{display:flex;align-items:center;gap:14px;margin-top:22px}
.port-line img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none;border:1px solid rgba(255,255,255,.16);filter:grayscale(.2) contrast(1.05)}
.port-line b{color:#fff;display:block;font-size:14px;letter-spacing:-.01em}
.port-line span{color:var(--text-dim);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}

/* ============ 6c · PORTRAIT SIDE ============
   Compact square portrait beside a content column (the beliefs list). Reuses the
   .pf frame internals; the square variant crops tighter and grades deeper so the
   three same-source portraits on /about read as a system, not a repeat. */
.port-side{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:minmax(210px,250px) 1fr;gap:44px;align-items:start}
.port-side .pf{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(135deg,#1a1a1a 0%,#262626 55%,#1a1a1a 100%)}
.port-side .pf::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 30% 30%,rgba(255,107,53,.18) 0%,transparent 60%),
                   radial-gradient(circle at 70% 70%,rgba(56,189,248,.15) 0%,transparent 60%)}
.port-side .pf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 18%;display:block;z-index:1;opacity:0;transition:opacity .4s ease;
  filter:grayscale(.45) contrast(1.08) brightness(.94)}
.port-side .pf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.44) 55%,transparent 100%)}
.port-side .pm{position:absolute;bottom:14px;inset-inline:14px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.port-side .pm .pn{color:#fff;font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.2}
.port-side .pm .ps{color:#bdbdbd;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px;font-weight:700}
.port-side .pm .pt{width:32px;height:2px;background:var(--orange);flex:none;margin-bottom:3px}
.port-side > ul.sub{margin:0}
@media (max-width:820px){
  .port-side{grid-template-columns:1fr;gap:28px}
  .port-side .pf{max-width:240px}
}

@media (prefers-reduced-motion:reduce){
  .vz .vz-in{opacity:1;transform:none;transition:none}
  .vz .paths path{transition:none}
}