/* sh-0 · node 0 */

body.node{
  cursor:default;
  overflow-y:auto;
  overflow-x:hidden;
}

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

#sheet{
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto;
  padding:14vh 28px 18vh;
}

/* ─── head ─── */

.head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:11vh;
}

.mark{
  font-size:.7rem;
  letter-spacing:.34em;
  color:var(--bone-dim);
  text-transform:lowercase;
  white-space:nowrap;
}

.rule{
  flex:1;
  height:1px;
  background:linear-gradient(90deg,
    rgba(207,201,189,.22),
    rgba(207,201,189,.05));
}

/* ─── lede ─── */

.lede{
  font-size:clamp(1.05rem,2.6vw,1.5rem);
  font-weight:300;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#efe9dd;
  min-height:2.6em;
  line-height:1.6;
  margin-bottom:7vh;
}

.lede .car{
  display:inline-block;
  width:.55em;
  height:1.05em;
  background:var(--bone);
  vertical-align:-.16em;
  margin-left:.12em;
  animation:pulse 1.05s steps(1) infinite;
}

@keyframes pulse{50%{opacity:0}}

/* ─── rows ─── */

.rows{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-size:.82rem;
  letter-spacing:.05em;
}

.row{
  display:grid;
  grid-template-columns:13.5em 1fr;
  gap:10px;
  align-items:baseline;
  padding:7px 10px 7px 0;
  opacity:0;
  transform:translateY(6px);
  animation:settle .7s cubic-bezier(.2,.7,.2,1) forwards;
  border-bottom:1px solid rgba(207,201,189,.05);
}

@keyframes settle{to{opacity:1;transform:none}}

.row .k{
  color:var(--bone-dim);
  text-transform:lowercase;
  letter-spacing:.14em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.row .v{
  color:#e6e0d4;
  word-break:break-all;
  font-variant-numeric:tabular-nums;
}

.row .v .tag{
  color:var(--bone-dim);
  letter-spacing:.14em;
  font-size:.74rem;
  margin-left:.7em;
  white-space:nowrap;
}

.row.flag{
  border-bottom-color:rgba(140,28,23,.35);
  background:linear-gradient(90deg, rgba(140,28,23,.07), transparent 78%);
}

.row.flag .v{color:#e8bcb8}
.row.flag .v .tag{color:var(--blood)}

.row.dim .v{color:var(--bone-dim)}

/* ─── verdict ─── */

.verdict{
  margin-top:8vh;
  font-size:.9rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#efe9dd;
  opacity:0;
  transition:opacity 2s ease;
  line-height:2;
}

.verdict.on{opacity:1}

.verdict b{
  color:var(--blood);
  font-weight:400;
  text-shadow:0 0 22px rgba(140,28,23,.45);
}

.aside{
  margin-top:3.2vh;
  font-size:.76rem;
  letter-spacing:.16em;
  color:var(--bone-dim);
  opacity:0;
  transition:opacity 2.4s ease;
  line-height:2;
}

.aside.on{opacity:.7}

/* ─── onward ─── */

.onward{
  display:inline-block;
  margin-top:9vh;
  padding:15px 0 15px 0;
  font-size:.78rem;
  letter-spacing:.42em;
  text-transform:lowercase;
  color:var(--bone);
  text-decoration:none;
  border-bottom:1px solid rgba(207,201,189,.2);
  opacity:0;
  animation:settle 1.6s ease forwards;
  transition:color .6s, border-color .6s, letter-spacing 1s;
}

.onward:hover{
  color:#fff;
  border-color:var(--blood);
  letter-spacing:.5em;
}

@media (max-width:620px){
  #sheet{padding:9vh 20px 14vh}
  .row{grid-template-columns:1fr;gap:3px}
  .row .k{font-size:.7rem}
  .rows{font-size:.76rem}
}