/* sh-0 · node 2 · inside */

#deep{
  position:fixed;
  inset:0;
  z-index:0;
  display:block;
  pointer-events:none;
}

#graph{
  position:fixed;
  inset:0;
  z-index:1;
  display:block;
  /* pan-y: a finger may still scroll the page vertically,
     but a drag that starts on a node takes the node. */
  touch-action:pan-y;
}

body.inside #sheet{
  max-width:820px;
  pointer-events:none;
}

body.inside #sheet a,
body.inside #sheet h2,
body.inside #sheet p{pointer-events:auto}

/* ─── grid ─── */

.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-bottom:7vh;
  padding:22px 0;
  border-top:1px solid rgba(207,201,189,.09);
  border-bottom:1px solid rgba(207,201,189,.09);
  background:rgba(10,12,15,.42);
  backdrop-filter:blur(3px);
}

.ge{display:flex;flex-direction:column;gap:7px;padding:0 4px}

.gk{
  font-size:.62rem;
  letter-spacing:.28em;
  color:var(--bone-dim);
}

.gv{
  font-size:1rem;
  letter-spacing:.08em;
  color:var(--bone-lit);
  font-variant-numeric:tabular-nums;
}

/* ─── feed ─── */

.feed{
  height:11.5em;
  overflow:hidden;
  margin-bottom:9vh;
  font-size:.74rem;
  letter-spacing:.11em;
  line-height:2.05;
  color:var(--bone-dim);
  mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}

.fl{
  display:flex;
  gap:14px;
  opacity:0;
  animation:fin .5s ease forwards;
  white-space:nowrap;
}

@keyframes fin{to{opacity:1}}

.fl .ft{color:rgba(207,201,189,.28);font-variant-numeric:tabular-nums;flex-shrink:0}
.fl .fm{color:var(--bone-dim)}
.fl.hi .fm{color:var(--bone-lit)}
/* the house only ever pushes back in one colour */
.fl.bad .fm{color:var(--blood-lit)}

/* ─── manifest ─── */

.manifest{
  padding:44px 38px;
  margin-bottom:6vh;
  background:rgba(10,11,12,.84);
  backdrop-filter:blur(7px);
  /* the same red hairline that marks the terms on the threshold */
  border-left:1px solid rgba(140,28,23,.34);
  /* the text is for reading. the graph is not dragged through it. */
  pointer-events:auto;
}

.mh{
  font-size:.66rem;
  font-weight:400;
  letter-spacing:.44em;
  text-transform:lowercase;
  color:var(--bone-dim);
  margin-bottom:34px;
}

.manifest p{
  font-size:.92rem;
  line-height:2.1;
  letter-spacing:.035em;
  color:#dbd5c8;
  margin-bottom:26px;
  max-width:60ch;
}

.manifest p:last-child{margin-bottom:0}

/* the first word of each paragraph is the only thing emphasised.
   nobody is told why. */
.manifest p::first-letter{
  color:var(--bone-hot);
  text-shadow:0 0 18px rgba(207,201,189,.5);
}

@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .manifest{padding:30px 22px}
  .manifest p{font-size:.86rem;line-height:1.95}
  .feed{height:9em}
}