*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    /* font-family: myfont; */
}

body{
    background:#ffffff;
    color:#111;
    overflow-x:hidden;
}
  body {
    cursor: url('favicon.png'), 32px 32px;
  }

body.transitioning{
    background:#ff1500;
}


@font-face {
  font-family: myfont;
  src: url(PPEiko-Medium.otf);
}

@font-face {
  font-family: myfont1;
  src: url(PPEiko-LightItalic.otf);
}

@font-face {
  font-family: myfont2;
  src: url(PPEiko-Thin.otf);
}

.page{
    opacity:0;
    transition:0.4s ease;
}

.page.active{
    opacity:1;
}

/* NAVIGATION */
nav{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding:40px 40px;
}

.nav-name{
    font-size:15px;
    line-height:1.4;
    max-width:400px;
    cursor:pointer;
}

.name-bold{
    color:#83acff;
    font-family: myfont;
    font-size: 16px;
}
.nav-left a{
    color:#83acff;
}
.nav-left a.active{
    color: black;
}

.name-description{
    font-weight:400;
    font-family: myfont2;
    /* color: #797878; */
}

.nav-right{
    display:flex;
    gap:40px;
    font-size:16px;
    font-family: myfont;
}

.nav-right a{
    text-decoration:none;
    color:#83acff;
    cursor:pointer;
}

.nav-right a.active{
    color:#000;
}

.nav-right a{
    position:relative;
    color:#83acff;
    z-index:2;
}



/* PAGE SECTIONS */
.page{
    display:none;
    padding:40px 40px 120px 40px;
}

.page.active{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:80px;
}

/* ABOUT TEXT */
.about-text{
    max-width:650px;
    font-size:25px;
    line-height:1.4;
    margin-top: 20px;
}
.about-text span {
    font-family: myfont;
}

.about-text p{
    margin-bottom:40px;
    font-family: myfont2;
}

/* LINKS */
.about-links{
    margin-top:40px;
    word-spacing: 30px;
}

.about-links a{
    font-size:24px;
    color:#83acff;
    text-decoration:none;
}

/* IMAGE */
.about-image img{
    width:400px;
    height:auto;
    object-fit:cover;
    margin-right: 120px;
    border-radius: 3px;
}



/* WORK PAGE — MATCHING REFERENCE */

#work.page.active{
    display:block;
}

/* WORK GRID LAYOUT */

#work.page.active{
    display:block;
}

.work-list{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:20px 20px;   /* vertical / horizontal spacing */
}

.work-row{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.work-row{
    display:flex;
    flex-direction:column;
}

.work-image{
    order:1;
}

.work-text{
    order:2;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    text-decoration: none;
    color: black;
}


/* LEFT TEXT */
.work-text h3{
    font-size:14px;
    font-weight:500;
    margin-bottom: 0px;
    /* color:#ff1900; */
}

.work-text p{
    font-size:13px;
    line-height:1.5;
    margin-bottom:10px;
    max-width:100%;
}

.work-tags{
    font-size:12px;
    color:#777;
}

/* Hide descriptions by default */
.work-description{
    opacity:0;
    max-height:0;
    overflow:hidden;
    transition:0.3s ease;
}

/* Show description when hovering project */
.work-row:hover .work-description{
    opacity:1;
    max-height:200px;
    margin-bottom:10px;
}


.work-text span{
    font-size:12px;
    line-height:1.6;
    color:#999;
}

.work-image img{
    width:100%;
    height:420px;         /* consistent grid height */
    object-fit:cover;     /* clean uniform layout */
    border-radius:3px;
    display:block;
}


/* PLAY PAGE GRID */

#play.page.active{
    display:block;
}
.play-grid img:nth-child(5n){
    transform: rotate(-1deg);
}
/* VIDEO GRID (top section) */

.play-videos{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
    margin-bottom:40px;
    border-radius: 3px;
}

.play-grid{
    column-count: 3;
    column-gap: 20px;
}

.play-grid > *{
    break-inside: avoid;
    margin-bottom:20px;
}

/* Make videos + images behave the same */
.play-grid img,
.play-grid video{
    width:100%;
    height:auto;          /* let it scale naturally */
    object-fit:contain;   /* never crop */
    display:block;
    border-radius:3px;
    display:block;
    transition:0.3s ease;
    filter: saturate(1.2);
}

/* Optional subtle hover */
.play-grid img:hover,
.play-grid video:hover{
    transform:scale(1.03);
    /* filter: saturate(0.5); */
}

.play-item {
    display: flex;
    flex-direction: column;
}

.play-item video,
.play-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}

.play-caption {
    font-size: 12px;
    color: #888;       /* soft grey */
    margin-top: 8px;
    letter-spacing: 0.5px;
}



/* NAVIGATION */
@media (max-width: 800px) {
    nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px;
        gap: 20px;
    }

    .nav-right {
        gap: 20px;
        flex-wrap: wrap;
    }

    .nav-name {
        max-width: 100%;
        font-size: 14px;
    }

    .name-bold {
        font-size: 14px;
    }

    .nav-right a {
        font-size: 14px;
    }
}
@media (max-width: 800px) {
    .page.active {
        flex-direction: column;
        gap: 40px;
        padding: 15px;
    }

    .about-text {
        font-size: 18px;
        max-width: 100%;
    }

    .about-image img {
        width: 100%;
        height: auto;
        margin-right: 0;
        display: none;
    }

    .about-links a {
        font-size: 14px;
        display: inline-block;
        margin-bottom: 10px;
    }
}
/* Work page columns */
@media (max-width: 1000px) {
    .work-list {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .work-row {
        flex-direction: column;
    }

    .work-image img {
        height: 300px; /* smaller on mobile */
    }

    .work-text h3 {
        font-size: 14px;
    }

    .work-text p {
        font-size: 12px;
    }

    .work-tags {
        font-size: 12px;
    }
}
@media (max-width: 800px) {
    .play-grid {
        column-count: 1;
        column-gap: 10px;
    }

    .play-item img,
    .play-item video {
        width: 100%;
        height: auto;
    }
}