/* ============================================================
   XXVI — mockup 19, as a complete homepage

   family.css carries the whole capability layout and is
   untouched. These are the only rules this page adds.
   ============================================================ */

/* ---------- the connection layer ---------------------------
   THE STUDY'S OWN BOX, to the pixel: 380 tall, reaching 140 back
   up over the hero's last lines and 120 down past the boundary,
   with the negative margins giving the height back so what is
   actually between the two sections is 120px. Those three numbers
   decide where the circle starts, how far it travels and where it
   comes to rest -- which is the connection itself -- so they are
   the study's, not this page's. */
.join{ position:relative; height:380px;
  margin-block-start:-140px; margin-block-end:-120px;
  pointer-events:none; z-index:1; background:transparent; }
.join canvas{ position:absolute; inset:0; display:block;
  width:100%; height:100%; }

/* the capability block must not paint its own ground, or it would
   cover the circle where it comes to rest */
.seal{ background:transparent; }

/* the marks differ in size down the column, so the column is a
   flex box; logical, so it reverses with the document in Hebrew */
.e .mk{ display:flex; justify-content:flex-start; }
.e .mk svg{ display:block; overflow:visible; }

/* ---------- the label --------------------------------------- */
.plate{ position:fixed; inset-block-end:16px; inset-inline-start:16px; z-index:95;
  display:flex; gap:11px; align-items:baseline; pointer-events:none;
  background:rgba(8,9,11,.82); border:1px solid #171B21; border-radius:2px;
  padding:9px 13px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; }
.plate span{ color:var(--gold-deep); }
.plate b{ font-weight:400; font-family:var(--display); letter-spacing:0;
  font-size:12px; color:var(--ink-2); }