.archive-page{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap: 220px;

flex:1;

margin-top:-50px;

overflow:hidden;

}


.archive-left{

width:35%;

position:sticky;

top:0;

}


.archive-right{

position:relative;

width:55%;

display:flex;

flex-direction:column;

transform:translateY(-10px);

}


.archive-item{

padding:35px 0;

border-top:1px solid rgba(0,0,0,.12);

width:85%;

}


.archive-number{

font-family:'IBM Plex Mono';

font-size:12px;

opacity:.5;

margin:0 0 12px 0;

}


h3{

font-family:'Inter Tight';

font-size:36px;

font-weight:600;

margin:0;

line-height:1;

letter-spacing:-0.04em;

}


.archive-type{

font-family:'IBM Plex Mono';

font-size:13px;

margin-top:15px;

margin-bottom:10px;

opacity:.7;

}


.archive-status{

font-family:'IBM Plex Mono';

font-size:13px;

margin-bottom:18px;

}


.archive-description{

line-height:1.6;

margin-bottom:20px;

}


.archive-link{

text-decoration:none;

font-family:'IBM Plex Mono';

font-size:13px;

color:black;

transition:.3s;

}


.archive-link:hover{

opacity:.45;

}


.archive-cross{

font-size:30px;

margin-top:40px;

opacity:.7;

}


.archive-square{

margin-top:50px;

}

.archive-right::after{

content:"";

position:absolute;

right:-20px;

top:45%;

transform:translateY(-50%);

width:220px;

height:320px;

opacity:.25;

background-image:
radial-gradient(#777 1px, transparent 0);

background-size:18px 18px;

mask-image:
radial-gradient(
ellipse at center,
black 30%,
transparent 85%
);

-webkit-mask-image:
radial-gradient(
ellipse at center,
black 30%,
transparent 85%
);

pointer-events:none;

}

.archive-steam{

display:inline-block;

margin-top:10px;

margin-bottom:0px;

font-family:'IBM Plex Mono';

font-size:13px;

text-decoration:none;

color:black;

opacity:.7;

transition:.3s;

}


.archive-steam:hover{

opacity:.4;

}

@media (max-width: 768px) {

  .archive-page {
    flex-direction: column;
    gap: 30px;
    margin-top: 0;
    padding: 20px;
    overflow: visible;
  }

  .archive-left {
    width: 100%;
    position: static;
    display: contents;
  }

  .archive-left .role,
  .archive-left h1,
  .archive-left .description {
    order: 1;
  }

  .archive-right {
    width: 100%;
    transform: none;
    order: 2;
  }

  .archive-left-bottom {
    order: 3;
  }

  .archive-right::after {
    display: none;
  }

  .archive-item {
    width: 100%;
    padding: 25px 0;
  }

  h3 {
    font-size: 28px;
  }

  .archive-cross {
    margin-top: 20px;
  }

  .archive-square {
    margin-top: 30px;
  }

}