* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --accent: #b8ff8c;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #0a0a0a;
    color: #f4ebf4;
    font-family: "Manrope", sans-serif;
    overflow-x: hidden;
    cursor: none;
}


/* ------------------------------
   BACKGROUND
------------------------------ */

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.035;
    z-index: 10;

    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.08;

    background-image:
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);

    background-size: 80px 80px;

    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 80%
    );
}

.glow {
    position: fixed;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: rgba(255,255,255,.07);

    filter: blur(100px);

    pointer-events: none;

    transform: translate(-50%, -50%);

    z-index: 0;
}


/* ------------------------------
   CURSOR
------------------------------ */

.cursor {
    position: fixed;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: rgb(255, 255, 255);

    pointer-events: none;

    z-index: 999;
}

.cursor-follower {
    position: fixed;

    width: 35px;
    height: 35px;

    border: 1px solid rgba(255, 255, 255, 0.5);

    border-radius: 50%;

    pointer-events: none;

    z-index: 998;

    transform: translate(-50%, -50%);
    transition:
        width .3s ease,
        height .3s ease,
        background .3s ease;
}


/* ------------------------------
   NAVBAR
------------------------------ */

.navbar {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    padding: 32px 5vw;

    display: flex;
    align-items: center;
    justify-content: space-between;

    z-index: 20;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: white;

    text-decoration: none;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: -.04em;
}

.logo-mark {
    display: block;
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.logo span {
    color: var(--accent);
}

nav {
    display: flex;
    gap: 40px;
}

nav a {
    color: rgba(255,255,255,.6);

    text-decoration: none;

    font-size: 12px;

    transition: color .3s ease;
}

nav a:hover {
    color: var(--accent);
}

.nav-button {
    display: flex;
    align-items: center;
    gap: 14px;

    color: white;
    text-decoration: none;

    font-size: 12px;

    border: 1px solid rgba(255,255,255,.2);

    padding: 12px 18px;

    border-radius: 100px;

    transition: .4s ease;
}

.nav-button span {
    transition: transform .3s ease;
}

.nav-button:hover {
    background: var(--accent);
    color: #0a0a0a;
}

.nav-button:hover span {
    transform: translate(3px, -3px);
}

.menu-toggle {
    display: none;
}


/* ------------------------------
   HERO
------------------------------ */

.hero {
    position: relative;

    min-height: 100vh;

    padding: 150px 5vw 35px;

    display: flex;
    flex-direction: column;

    z-index: 1;
}


/* Top */

.hero-top {
    display: flex;
    justify-content: space-between;

    color: rgba(255,255,255,.4);

    font-family: "DM Mono", monospace;

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status i {
    width: 6px;
    height: 6px;

    background: var(--accent);

    border-radius: 50%;

    box-shadow: 0 0 12px var(--accent);
}


/* Content */

.hero-content {
    position: relative;

    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    margin-top: auto;

    margin-bottom: 30px;
}

.hero-title {
    font-size: clamp(60px, 9vw, 145px);

    line-height: .86;

    letter-spacing: -.075em;

    font-weight: 500;
}

.line {
    display: block;

    opacity: 0;

    transform: translateY(50px);

    animation: reveal 1s cubic-bezier(.16,1,.3,1) forwards;
}

.line:nth-child(1) {
    animation-delay: .1s;
}

.line:nth-child(2) {
    animation-delay: .2s;
}

.line:nth-child(3) {
    animation-delay: .3s;
}

.indent {
    margin-left: 8vw;
}

.hero-title em {
    font-style: normal;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.8);
}

.hero-description {
    width: 220px;

    margin-bottom: 10px;
}

.hero-description p {
    font-size: 13px;

    line-height: 1.7;

    color: rgba(255,255,255,.5);

    margin-bottom: 30px;
}


/* Circle button */

.circle-button {
    width: 80px;
    height: 80px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    gap: 5px;

    color: white;
    text-decoration: none;

    font-size: 9px;

    transition: .5s cubic-bezier(.16,1,.3,1);
}

.circle-button strong {
    font-size: 15px;

    font-weight: 400;

    transition: transform .4s ease;
}

.circle-button:hover {
    background: var(--accent);

    color: #0a0a0a;

    transform: scale(1.12);
}

.circle-button:hover strong {
    transform: translateY(4px);
}


/* ------------------------------
   BOTTOM
------------------------------ */

.hero-bottom {
    display: flex;

    justify-content: space-between;
    align-items: center;

    font-family: "DM Mono", monospace;

    font-size: 9px;

    text-transform: uppercase;

    color: rgba(255,255,255,.35);

    letter-spacing: .08em;
}

.scroll-line {
    position: absolute;

    left: 50%;

    width: 1px;
    height: 45px;

    background: rgba(255,255,255,.15);

    overflow: hidden;
}

.scroll-line div {
    width: 100%;
    height: 30%;

    background: white;

    animation: scrollLine 2s infinite ease-in-out;
}


/* ------------------------------
   ANIMATIONS
------------------------------ */

@keyframes reveal {

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes scrollLine {

    0% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(300%);
    }

    100% {
        transform: translateY(300%);
    }

}


/* ------------------------------
   MOBILE
------------------------------ */

@media (max-width: 700px) {

    body {
        cursor: auto;
    }

    .cursor,
    .cursor-follower {
        display: none;
    }

    .navbar {
        padding: 25px 6vw;
    }

    .menu-toggle {
        display: flex;
        width: 44px;
        height: 44px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        border: 1px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(10,10,10,.7);
        color: white;
        cursor: pointer;
        z-index: 2;
    }

    .menu-toggle:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 3px;
    }

    .menu-toggle span {
        display: block;
        width: 16px;
        height: 1px;
        background: currentColor;
        transition: transform .25s ease, opacity .2s ease;
    }

    .navbar nav {
        position: absolute;
        top: calc(100% - 8px);
        left: 6vw;
        right: 6vw;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 10px 18px;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(10,10,10,.96);
        backdrop-filter: blur(16px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .navbar.menu-open nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .navbar nav a {
        display: flex;
        min-height: 48px;
        align-items: center;
        border-bottom: 1px solid rgba(255,255,255,.1);
        font-size: 13px;
    }

    .navbar nav a:last-child {
        border-bottom: 0;
    }

    .navbar.menu-open .menu-toggle span:first-child {
        transform: translateY(6px) rotate(45deg);
    }

    .navbar.menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }

    .navbar.menu-open .menu-toggle span:last-child {
        transform: translateY(-6px) rotate(-45deg);
    }

    .navbar .nav-button {
        display: none;
    }

    .hero {
        padding: 130px 6vw 25px;
    }

    .hero-content {
        display: block;
    }

    .hero-title {
        font-size: 15vw;
    }

    .indent {
        margin-left: 5vw;
    }

    .hero-description {
        margin-top: 40px;
    }

    .hero-bottom {
        margin-top: auto;
    }

    .scroll-line {
        display: none;
    }

}

/* ==============================
   GENERAL PAGES
============================== */

.page {
    position: relative;
    z-index: 1;
    padding: 150px 5vw 60px;
}

.page-label {
    display: flex;
    justify-content: space-between;

    font-family: "DM Mono", monospace;
    font-size: 10px;

    text-transform: uppercase;
    letter-spacing: .08em;

    color: rgba(255,255,255,.4);

    margin-bottom: 90px;
}

.active {
    color: var(--accent) !important;
}


/* ==============================
   ABOUT HERO
============================== */

.about-hero {
    min-height: 80vh;

    display: flex;
    flex-direction: column;
}

.about-title {
    font-size: clamp(65px, 10vw, 160px);

    line-height: .86;
    letter-spacing: -.08em;

    font-weight: 500;
}

.about-title span {
    display: block;
}

.outline {
    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.7);
}

.about-intro {
    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-top: 100px;
}

.about-intro p {
    max-width: 470px;

    font-size: 16px;
    line-height: 1.8;

    color: rgba(255,255,255,.55);
}


/* ==============================
   ABOUT STORY
============================== */

.about-story,
.services {
    display: grid;

    grid-template-columns: 20% 80%;

    padding: 180px 0;

    border-top: 1px solid rgba(255,255,255,.1);
}

.section-number {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    color: rgba(255,255,255,.35);
}

.story-content {
    max-width: 800px;
}

.eyebrow {
    font-family: "DM Mono", monospace;

    text-transform: uppercase;

    font-size: 10px;

    color: rgba(255,255,255,.4);

    letter-spacing: .1em;
}

.story-content h2 {
    margin-top: 35px;

    font-size: clamp(45px, 6vw, 90px);

    line-height: .95;

    letter-spacing: -.06em;
}

.story-content h2 em {
    font-style: normal;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.7);
}

.story-content p {
    max-width: 500px;

    margin-top: 50px;

    font-size: 14px;

    line-height: 1.8;

    color: rgba(255,255,255,.5);
}


/* ==============================
   SERVICES
============================== */

.services-content {
    width: 100%;
}

.service-list {
    margin-top: 60px;

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

.service {
    display: grid;

    grid-template-columns: 10% 45% 45%;

    align-items: center;

    padding: 35px 0;

    border-bottom: 1px solid rgba(255,255,255,.12);

    transition: padding .4s ease;
}

.service:hover {
    padding-left: 20px;
}

.service > span {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    color: rgba(255,255,255,.3);
}

.service h3 {
    font-size: clamp(25px, 3vw, 45px);

    font-weight: 400;

    letter-spacing: -.04em;

    transition: color .3s ease;
}

.service:hover h3 {
    color: var(--accent);
}

.service p {
    color: rgba(255,255,255,.4);

    font-size: 12px;
}


/* ==============================
   ABOUT END
============================== */

.about-end {
    position: relative;

    padding: 150px 0;

    display: flex;

    justify-content: space-between;
    align-items: center;

    border-top: 1px solid rgba(255,255,255,.1);
}

.about-end::after,
.work-end::after,
.contact-bottom::after {
    content: "";

    position: absolute;
    right: 0;

    width: 30px;
    height: 30px;

    background: url("images/logo_white.png") center / contain no-repeat;
    opacity: .1;
    pointer-events: none;
}

.about-end::after,
.work-end::after {
    bottom: 32px;
}

.about-end span {
    font-size: clamp(30px, 5vw, 70px);

    letter-spacing: -.06em;
}

.about-end a {
    color: white;

    text-decoration: none;

    border-bottom: 1px solid rgba(255,255,255,.4);

    padding-bottom: 10px;

    font-size: 13px;

    transition: color .3s ease, border-color .3s ease;
}

.about-end a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.about-end strong {
    margin-left: 20px;
}


/* ==============================
   CONTACT
============================== */

.contact-hero {
    min-height: 65vh;
}

.contact-title {
    font-size: clamp(65px, 10vw, 160px);

    line-height: .86;

    letter-spacing: -.08em;
}

.contact-title span {
    display: block;
}

.contact-grid {
    display: grid;

    grid-template-columns: 31.5% 58.5%;

    gap: 10%;

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

    padding: 120px 0;
}


/* Contact info */

.contact-info p {
    max-width: 320px;

    margin: 30px 0;

    color: rgba(255,255,255,.5);

    font-size: 14px;

    line-height: 1.8;
}

.email {
    display: inline-block;

    color: white;

    font-size: 18px;

    text-decoration: none;

    border-bottom: 1px solid rgba(255,255,255,.4);

    padding-bottom: 10px;
}

.email span {
    margin-left: 15px;
}

.socials {
    display: flex;

    flex-direction: column;

    gap: 15px;

    margin-top: 80px;
}

.socials a {
    color: rgba(255,255,255,.45);

    text-decoration: none;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    text-transform: uppercase;

    transition: color .3s;
}

.socials a:hover {
    color: var(--accent);
}


/* ==============================
   FORM
============================== */

.contact-form {
    display: flex;

    flex-direction: column;

    gap: 45px;
}

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;
}

.contact-form label {
    display: flex;

    flex-direction: column;

    gap: 15px;
}

.contact-detail {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-detail > span {
    font-family: "DM Mono", monospace;
    font-size: 9px;
    text-transform: uppercase;
    color: rgba(255,255,255,.35);
    letter-spacing: .08em;
}

.contact-detail p,
.contact-detail a {
    color: rgba(255,255,255,.7);
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.contact-detail a:hover {
    color: var(--accent);
}

.contact-form label span {
    font-family: "DM Mono", monospace;

    font-size: 9px;

    text-transform: uppercase;

    color: rgba(255,255,255,.35);

    letter-spacing: .08em;
}

.contact-form input,
.contact-form textarea {
    background: transparent;

    border: none;
    border-bottom: 1px solid rgba(255,255,255,.2);

    padding: 15px 0;

    color: white;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    outline: none;

    transition: border-color .3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--accent);
}

.contact-form textarea {
    resize: vertical;

    min-height: 130px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: rgba(255,255,255,.25);
}


/* Submit */

.submit-button {
    align-self: flex-start;

    width: 150px;
    height: 150px;

    border-radius: 50%;

    border: 1px solid rgba(255,255,255,.3);

    background: transparent;

    color: white;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 10px;

    cursor: none;

    transition: .5s cubic-bezier(.16,1,.3,1);
}

.submit-button strong {
    font-size: 20px;

    font-weight: 400;

    transition: transform .3s;
}

.submit-button:hover {
    background: var(--accent);

    color: #0a0a0a;

    transform: scale(1.05);
}

.submit-button:hover strong {
    transform: translate(5px, -5px);
}

.form-message {
    font-family: "DM Mono", monospace;

    font-size: 10px;

    color: var(--accent);
}


/* ==============================
   CONTACT BOTTOM
============================== */

.contact-bottom {
    position: relative;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

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

    padding-top: 40px;
}

.contact-bottom::after {
    top: 5px;
}

.contact-bottom div {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.contact-bottom span {
    font-family: "DM Mono", monospace;

    text-transform: uppercase;

    font-size: 9px;

    color: rgba(255,255,255,.3);
}

.contact-bottom strong {
    font-size: 13px;

    font-weight: 400;
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 700px) {

    .page {
        padding: 130px 6vw 40px;
    }

    .page-label {
        margin-bottom: 60px;
    }

    .about-intro {
        grid-template-columns: 1fr;

        margin-top: 70px;
    }

    .about-title {
        font-size: clamp(50px, 14vw, 62px);
    }

    .about-story,
    .services {
        grid-template-columns: 1fr;

        gap: 50px;

        padding: 100px 0;
    }

    .service {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 10px;
    }

    .service p {
        grid-column: 2;
    }

    .about-end {
        flex-direction: column;

        align-items: flex-start;

        gap: 40px;
    }

    .about-end::after,
    .work-end::after,
    .contact-bottom::after {
        display: none;
    }

    .contact-hero {
        min-height: 55vh;
    }

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 100px;

        padding: 90px 0;
    }

    .form-row {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-bottom {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}


.work-page {
    padding-bottom: 0;
}


/* ==============================
   HEADER
============================== */

.work-header {
    min-height: 75vh;

    display: flex;
    flex-direction: column;
}

.work-heading {
    font-size: clamp(70px, 12vw, 190px);

    line-height: .82;

    letter-spacing: -.09em;

    font-weight: 500;

    margin-top: auto;
}

.work-heading span {
    display: block;
}

.work-heading .outline {
    color: transparent;

    -webkit-text-stroke: 1px rgba(255,255,255,.7);
}

.work-intro {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    margin-top: 80px;
}

.work-intro p {
    max-width: 390px;

    font-size: 14px;

    line-height: 1.8;

    color: rgba(255,255,255,.45);
}

.project-count {
    font-family: "DM Mono", monospace;

    font-size: 9px;

    color: rgba(255,255,255,.3);

    text-transform: uppercase;
}


/* ==============================
   PROJECTS
============================== */

.projects {
    padding: 120px 0 180px;

    border-top: 1px solid rgba(255,255,255,.1);
}

.project {
    position: relative;

    display: block;

    text-decoration: none;

    color: white;

    margin-bottom: 180px;
}

.project-link {
    display: block;
    color: white;
    text-decoration: none;
}

.project-link:focus-visible {
    outline: 1px solid rgba(255,255,255,.65);
    outline-offset: 8px;
}

.portfolio-open-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 240px;
    margin: 14px 0 0 46px;
    color: rgba(255,255,255,.35);
    font-family: "DM Mono", monospace;
    font-size: 9px;
    text-transform: uppercase;
    transition: color .3s ease;
}

.project-link:hover .portfolio-open-hint {
    color: white;
}

.portfolio-open-hint > span {
    transition: transform .3s ease;
}

.project-link:hover .portfolio-open-hint > span {
    transform: translate(3px, -3px);
}


/* Image */

.project-image {
    position: relative;

    overflow: hidden;

    background-color: rgba(255,255,255,.035);
    background-size: cover;
    background-position: center;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}

.project-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0,0,0,.1);

    transition: background .5s ease;
}

.project:hover .project-image {
    transform: scale(.97);
}

.project:hover .project-image::after {
    background: rgba(0,0,0,.35);
}

.projects > .project:nth-child(1) .project-image {
    background-image: url("images/stage.jpg");
}

.projects > .project:nth-child(2) .project-image {
    background-image: url("images/stad.jpg");
}

.projects > .project:nth-child(3) .project-image {
    background-image: url("images/work.jpg");
} 

.projects > .project:nth-child(4) .project-image {
    background-image: url("images/van_houcke.jpg");
}

/* Different sizes */

.project-large,
.project-offset {
    width: 58%;
}

.project-small {
    width: 58%;
}

.projects > .project:nth-child(even) {
    margin-left: auto;
}

.project-image {
    aspect-ratio: 1.25 / 1;
}


/* ==============================
   PROJECT INFO
============================== */

.project-info {
    display: flex;

    justify-content: space-between;

    padding-top: 25px;
}

.project-info > div:first-child {
    display: flex;

    align-items: baseline;

    gap: 25px;
}

.project-number {
    font-family: "DM Mono", monospace;

    font-size: 9px;

    color: rgba(255,255,255,.35);
}

.project-info h2 {
    font-size: clamp(25px, 3vw, 45px);

    font-weight: 400;

    letter-spacing: -.05em;
}

.project-meta {
    display: flex;

    gap: 30px;

    align-items: center;
}

.project-meta span {
    font-family: "DM Mono", monospace;

    font-size: 9px;

    text-transform: uppercase;

    color: rgba(255,255,255,.35);
}

.project-description {
    max-width: 560px;
    margin: 14px 0 0 46px;
    color: rgba(255,255,255,.45);
    font-size: 12px;
    line-height: 1.7;
}

.portfolio-section-heading .eyebrow {
    display: block;
    color: rgba(255,255,255,.4);
}

.portfolio-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.portfolio-preview {
    min-width: 0;
    color: rgba(255,255,255,.7);
    text-decoration: none;
}

.portfolio-preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.1);
    filter: grayscale(1);
    transition: border-color .3s ease, filter .4s ease, transform .4s ease;
}

.portfolio-preview img {
    object-fit: contain;
    background: rgba(255,255,255,.94);
    padding: 4px;
}

.portfolio-preview:hover img,
.portfolio-preview:focus-visible img {
    border-color: rgba(255,255,255,.45);
    filter: grayscale(0);
    transform: translateY(-3px);
}

.portfolio-preview > span {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    font-size: 10px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.portfolio-preview > span > span {
    flex: 0 0 auto;
    color: rgba(255,255,255,.35);
    font-family: "DM Mono", monospace;
    font-size: 9px;
    text-transform: uppercase;
}

.document-viewer {
    width: min(900px, calc(100% - 32px));
    max-width: none;
    max-height: min(88vh, 900px);
    padding: 0;
    overflow: visible;
    color: white;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
}

.document-viewer::backdrop {
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.document-viewer-panel {
    display: flex;
    max-height: min(88vh, 900px);
    flex-direction: column;
    padding: 22px;
    background: #111;
}

.document-viewer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-bottom: 16px;
}

.document-viewer-header h2 {
    margin: 0;
    font-size: clamp(14px, 2vw, 20px);
    font-weight: 400;
    overflow-wrap: anywhere;
}

.document-viewer-close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    color: white;
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 50%;
    cursor: pointer;
}

.document-viewer-content {
    display: grid;
    min-height: 0;
    flex: 1;
    place-items: center;
    overflow: auto;
    background: #080808;
}

.document-viewer-image,
.document-viewer-frame {
    display: block;
    width: 100%;
    height: min(65vh, 680px);
    border: 0;
}

.document-viewer-image {
    object-fit: contain;
    filter: none;
}

.document-viewer-frame {
    background: white;
}

.document-viewer-image[hidden],
.document-viewer-frame[hidden] {
    display: none;
}

.document-viewer-original {
    align-self: flex-start;
    margin-top: 16px;
    color: rgba(255,255,255,.65);
    font-size: 11px;
    text-decoration: none;
}

.document-viewer-original:hover {
    color: white;
}

.school-portfolio {
    padding: 70px 0 0;
    border-top: 1px solid rgba(255,255,255,.1);
}

.school-project {
    margin-bottom: 0;
    margin-left: 0;
}

.school-project .project-image {
    background-image: url("images/vives.jpg");
    filter: grayscale(1);
    transition: filter .4s ease, transform .8s cubic-bezier(.16,1,.3,1);
}

.school-project:hover .project-image {
    filter: grayscale(0);
}

.portfolio-detail-page {
    padding-bottom: 120px;
}

.portfolio-detail-header {
    min-height: 55vh;
    display: flex;
    flex-direction: column;
}

.portfolio-detail-header h1 {
    margin-top: auto;
    font-size: clamp(54px, 10vw, 150px);
    line-height: .9;
    font-weight: 500;
    letter-spacing: -.09em;
}

.portfolio-detail-header h1 .outline {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,.7);
}

.portfolio-detail-intro {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-top: 36px;
}

.portfolio-detail-intro p {
    max-width: 440px;
    color: rgba(255,255,255,.5);
    font-size: 13px;
    line-height: 1.8;
}

.portfolio-detail-intro > span {
    color: rgba(255,255,255,.35);
    font-family: "DM Mono", monospace;
    font-size: 9px;
    text-transform: uppercase;
}

.portfolio-back-link {
    align-self: flex-start;
    margin-top: 28px;
    color: rgba(255,255,255,.6);
    font-size: 11px;
    text-decoration: none;
    transition: color .3s ease;
}

.portfolio-back-link:hover {
    color: var(--accent);
}

.portfolio-return {
    display: flex;
    justify-content: center;
    padding-top: 100px;
}

.portfolio-return-button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    color: white;
    border: 1px solid rgba(255,255,255,.3);
    text-decoration: none;
    font-size: 11px;
    transition: color .3s ease, border-color .3s ease, background .3s ease;
}

.portfolio-return-button:hover {
    color: #0a0a0a;
    border-color: var(--accent);
    background: var(--accent);
}

.portfolio-detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px 18px;
    padding-top: 36px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.portfolio-detail-gallery .portfolio-preview img {
    aspect-ratio: 4 / 3;
}

.school-detail-gallery .portfolio-preview img {
    object-fit: cover;
    padding: 0;
    background: rgba(255,255,255,.035);
}


/* ==============================
   PROJECT HOVER NUMBER
============================== */

.project::before {
    content: "ERVARING";

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(.7);

    z-index: 5;

    width: 100px;
    height: 100px;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    font-family: "DM Mono", monospace;

    font-size: 8px;

    background: var(--accent);

    color: black;

    opacity: 0;

    transition:
        opacity .4s ease,
        transform .5s cubic-bezier(.16,1,.3,1);

    pointer-events: none;
}

.project:hover::before {
    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* ==============================
   END
============================== */

.work-end {
    position: relative;

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

    padding: 150px 0;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.work-end span {
    font-size: clamp(30px, 5vw, 70px);

    letter-spacing: -.06em;
}

.work-end a {
    color: white;

    text-decoration: none;

    font-size: 13px;

    border-bottom: 1px solid rgba(255,255,255,.4);

    padding-bottom: 10px;

    transition: color .3s ease, border-color .3s ease;
}

.work-end a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.work-end strong {
    margin-left: 20px;
}


/* ==============================
   MOBILE
============================== */

@media (max-width: 700px) {

    .work-header {
        min-height: 65vh;
    }

    .work-intro {
        align-items: flex-start;

        flex-direction: column;

        gap: 30px;
    }

    .projects {
        padding-top: 80px;
    }

    .project,
    .project-large,
    .project-offset,
    .project-small {
        width: 100%;

        margin-left: 0;

        margin-bottom: 100px;
    }

    .project-large .project-image,
    .project-offset .project-image,
    .project-small .project-image {
        aspect-ratio: 1 / 1.1;
    }

    .project-info {
        display: block;
    }

    .project-info > div:first-child {
        gap: 15px;
    }

    .project-description {
        margin-left: 0;
    }

    .portfolio-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-viewer-panel {
        padding: 14px;
    }

    .document-viewer-image,
    .document-viewer-frame {
        height: 65vh;
    }

    .portfolio-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }

    .portfolio-detail-header {
        min-height: 48vh;
    }

    .portfolio-detail-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
        margin-top: 24px;
    }

    .portfolio-detail-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 12px;
    }

    .project-meta {
        margin-top: 15px;

        justify-content: space-between;
    }

    .project::before {
        display: none;
    }

    .work-end {
        display: block;

        padding: 100px 0;
    }

    .work-end a {
        display: inline-block;

        margin-top: 40px;
    }

}