@font-face {
    font-family: "Orbitron";
    src: url("../fonts/Orbitron-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Orbitron";
    src: url("../fonts/Orbitron-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}
/* =========================
   RESET
========================= */

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

body {
    background: #CED2DD;
  font-family: "Orbitron", sans-serif;
    color: #8a84ff;

    padding-top: 60px;
}

/* =========================
   HEADER (ORBITRON VERSION)
========================= */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;

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

    padding: 10px 15px;
    background: #CED2DD;

    border-bottom: 1px solid rgba(138, 132, 255, 0.15);
}

/* =========================
   LEFT LOGO
========================= */

.logo-text,
.logo a {
    font-family: "Orbitron", sans-serif;

    font-size: 1.4rem;   /* slightly bigger than nav */
    font-weight: 500;     /* still clean, not bold */
    letter-spacing: 1.5px;

    color: #8a84ff;
    text-decoration: none;

    transition: opacity 0.3s ease;
}

.logo-text:hover,
.logo a:hover {
    opacity: 0.6;
}
/* =========================
   CENTER NAV
========================= */

.header-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link {
    font-family: "Orbitron", sans-serif;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.5px;

    color: #8a84ff;
    text-decoration: none;

    transition: opacity 0.3s ease;
}

.nav-link:hover {
    opacity: 0.6;
}

/* =========================
   RIGHT ICONS
========================= */

.header-icons {
    display: flex;
    gap: 16px;
}

.header-icons a {
    color: #8a84ff;
    font-size: 1.4rem;

    transition: opacity 0.3s ease;
}

.header-icons a:hover {
    opacity: 0.6;
}

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

@media (max-width: 768px) {

    header {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .header-nav {
        position: static;
        transform: none;
    }

    .logo-text,
    .logo a {
        font-size: 1.3rem;
    }
}


/* =========================
   GALLERY
========================= */



.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* Tablet / smaller desktop */
@media (max-width: 1100px) {
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .gallery {
        grid-template-columns: 1fr;
    }

    body {
        padding-top: 110px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .artist-bio {
        margin: 40px 0 35px;
    }

    .artist-bio p {
        width: 90%;
        font-size: 16px;
    }

    .logo a {
        font-size: 1.6rem;
    }
}

.work {
    position: relative;
    display: block;
    overflow: hidden;
}

/* IMAGE */
.work img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* OVERLAY */
.work::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease;
}

/* TITLE */
.work-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);

    color: #ddff00;
    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: 1px;

    opacity: 0;
    transition: all 0.4s ease;

    z-index: 2;
    pointer-events: none;
    text-align: center;
}

/* HOVER EFFECTS */
.work:hover img {
    transform: scale(1.1);
}

.work:hover::after {
    background: rgba(0, 0, 0, 0.25);
}

.work:hover .work-title {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* =========================


/* =========================
   CV SECTION (ALIGNED WITH BIO)
========================= */
.cv {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 80px 0 100px;
    padding: 0 20px;
}

/* SECTION HEADINGS */
.cv h2 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    margin: 30px 0 12px;
    text-transform: uppercase;
    letter-spacing: 1px;

    width: 65%;
    text-align: left;
}

/* ENTRY WRAPPER */
.cv-item {
    width: 65%;
    margin-bottom: 6px;   /* was 10px */
    text-align: left;
    line-height: 1.25;
}

/* MAKE TITLE + META SIT ON SAME LINE */
.cv-title {
    display: inline;
    font-family: "IBM Plex Mono", monospace;
    font-weight: 400;   /* changed from 600 → normal weight */
    font-size: 15px;
    color: #000;
}

/* META INLINE NEXT TO TITLE */
.cv-meta {
    display: inline;
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    color: #000;
        line-height: 1.25;
}

/* OPTIONAL: spacing between title and meta */
.cv-meta::before {
 content: "  |  ";
}

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



 @media (max-width: 768px) {

    .cv-item,
    .cv h2 {
        width: 90%;
    }
}

@media (max-width: 480px) {

    .cv-item {
        width: 95%;
    }

    .cv-meta {
        font-size: 13px;
    }
}




/* =========================
   imprint SECTION (ALIGNED WITH BIO)
========================= */


.legal {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin: 80px 0 100px;
    padding: 0 20px;
}

.legal h2 {
    width: 65%;

    margin: 30px 0 12px;

    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;

    color: #000;
}

.legal p {
    width: 65%;

    margin: 0 0 10px;

    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;

    color: #000;
}

.legal a {
    color: inherit;
    text-decoration: none;
}

.legal a:hover {
    opacity: 0.6;
}

@media (max-width: 768px) {

    .legal h2,
    .legal p {
        width: 90%;
    }
}

@media (max-width: 480px) {

    .legal h2,
    .legal p {
        width: 95%;
    }

    .legal p {
        font-size: 13px;
    }
}


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



 @media (max-width: 768px) {

    .imprint-item,
    .imprint h2 {
        width: 90%;
    }
}

@media (max-width: 480px) {

    .imprint-item {
        width: 95%;
    }

    .imprint-meta {
        font-size: 13px;
    }
}







/* =========================
   WORK PAGE LAYOUT
========================= */

.work-page {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 20px;
    padding: 0 20px;
}

/* TITLE  */
.work-title-main {
    font-family: "Orbitron", sans-serif;
    font-size: 40px;
    font-weight: 500;

    color: #ddff00;
    margin-bottom: 10px;
    text-align: center;
}

/* YEAR */
.work-year {
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #000;

    text-align: left;
    letter-spacing: 0.5px;

    margin-bottom: 30px;
}

/* TEXT (MATCH BIO STYLE) */
.work-text {
    width: 65%;
    font-family: "IBM Plex Mono", monospace;
    font-size: 18px;
    color: #000;
    line-height: 1.6;

    text-align: left;
}

.work-credit {
    width: 65%;              /* SAME COLUMN AS TEXT */
    font-family: "IBM Plex Mono", monospace;
    font-size: 12px;
    color: #000;

    margin-top: 20px;
    text-align: left;
}
@media (max-width: 768px) {
    .work-credit {
        width: 90%;
        font-size: 11px; /* optional, keeps hierarchy clean */
    }
}

@media (max-width: 480px) {
    .work-credit {
        width: 95%;
        font-size: 11px;
    }
}
/* =========================
   LOGO GALLERY
========================= */

.logo-gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    margin-top: 30px;
    flex-wrap: wrap;
}

.logo-gallery a {
    display: block;
}

.logo-gallery img {
    max-height: 50px;
    width: auto;

    display: block;

    transition: opacity 0.3s ease;
}

.logo-gallery a:hover img {
    opacity: 0.7;
}
/* =========================
   LOGO GALLERY
========================= */

.logo-picture {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;

    margin-top: 30px;
    flex-wrap: wrap;
}

.logo-picture a {
    display: block;
}

.logo-picture img {
    max-height: 100px;
    width: auto;

    display: block;

    transition: opacity 0.3s ease;
}

.logo-picture a:hover img {
    opacity: 0.7;
}

/* =========================
   VIDEO
========================= */

/* =========================
   VIDEO (BASE STYLE)
========================= */



/* DEFAULT = LANDSCAPE (most videos like Vimeo YouTube) */
.video-wrapper {
    width: 65%;              /* same width as work text */
    margin: 0px auto 0;
    position: relative;

    aspect-ratio: 16 / 9;
}

.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}



/* =========================
   PORTRAIT VIDEO OVERRIDE
   (use this class when needed)
========================= */

.video-wrapper.portrait {
    max-width: 420px;
    aspect-ratio: 9 / 16;
}

/* =========================
   SPACER
========================= */

.page-spacer {
    height: 50px;
}



/* =========================
   FLEXIBLE VIDEO GALLERY
========================= */

.video-gallery-flex {
    display: flex;
    gap: 12px;

    width: 100%;
    align-items: flex-start;
}

.video-flex-item {
    flex: 1;
}

.video-flex-item iframe {
    width: 100%;
    aspect-ratio: 16 / 9;

    border: none;
    display: block;
}

/* =========================
   MOBILE VIDEO GALLERIES
========================= */

@media (max-width: 768px) {

    .video-gallery-flex {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .video-item,
    .video-flex-item {
        width: 100%;
    }
}
/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    .work-text {
        width: 90%;
        font-size: 16px;
    }

     .video-wrapper {
        width: 100%;
        max-width: none;
    }


    .work-title-main {
        font-size: 22px;
    }
}

@media (max-width: 480px) {

    .work-text {
        width: 95%;
        font-size: 15px;
    }

    .video-wrapper {
        width: 95%;
    }
}

/* =========================
   WORK PAGE IMAGE GALLERY
========================= */

.work-spacer {
    height: 12px;
}
/* =========================
   GALLERYS - DESKTOP
========================= */

.painting-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.painting-gallery img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2 columns on medium screens */
@media (max-width: 1100px) {
    .painting-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}

.two-image-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.two-image-gallery img {
    width: 100%;
    height: auto;
    display: block;
}

.mixed-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.mixed-gallery img {
    width: 100%;
    display: block;
    aspect-ratio: 9 / 16;
    object-fit: cover;
}

.mixed-video {
    width: 100%;
    aspect-ratio: 9 / 16;
}

.mixed-video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

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

/* 1 column on mobile */
@media (max-width: 768px) {
    .painting-gallery {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .two-image-gallery,
    .mixed-gallery {
        grid-template-columns: 1fr;
        gap: 8px;
    }





    .mixed-gallery {
        grid-template-columns: 1fr;
    }
}
.post-gallery-exhibitions {
    width: 65%;
    margin-top: 60px;
}

.post-gallery-exhibitions h2 {
    font-family: "IBM Plex Mono", monospace;
    font-size: 14px;
    font-weight: 400;
    color: #000;

    margin-bottom: 20px;

    text-transform: uppercase;
    letter-spacing: 1px;
}

.post-gallery-exhibitions .cv-item {
    width: 100%;
    margin-bottom: 6px;   /* tighter list */
    line-height: 1.25;
}

.post-gallery-exhibitions .cv-title {
    display: inline;
}

.post-gallery-exhibitions .cv-meta {
    display: inline;
}



@media (max-width: 768px) {
    .post-gallery-exhibitions {
        width: 90%;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .post-gallery-exhibitions {
        width: 95%;
        padding: 0;
    }
}



/* =========================
   FOOTER (ORBITRON VERSION)
========================= */

.site-footer {
    width: 100%;
    padding: 80px 20px 40px;
    text-align: center;
}

/* ALL FOOTER LINKS */
.site-footer a,
.site-footer .text-button,
.impressum-link {
    font-family: "Orbitron", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.5px;

    color: #8a84ff;
    text-decoration: none;

    transition: opacity 0.3s ease;
    display: inline-block;
}

.site-footer a:hover,
.site-footer .text-button:hover,
.impressum-link:hover {
    opacity: 0.6;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 768px) {
    .site-footer a,
    .site-footer .text-button,
    .impressum-link {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .site-footer a,
    .site-footer .text-button,
    .impressum-link {
        font-size: 0.9rem;
    }
}

/* =========================
   ARTWORK NAVIGATION
========================= */

.artwork-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;              /* Space between arrows */

    margin: 50px auto 30px;
}

.artwork-link {
    text-decoration: none;
    color: #8a84ff;

   font-family: "Orbitron", sans-serif;
    font-size: 3rem;        /* Much bigger */
    font-weight: 500;
    line-height: 1;

    transition: opacity 0.3s ease, transform 0.2s ease;
}

.artwork-link:hover {
    opacity: 0.6;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .artwork-nav {
        gap: 60px;
        margin: 40px auto 25px;
    }

    .artwork-link {
        font-size: 3rem;
    }
}





/* =========================
   360 VIDEO
========================= */

#viewer360{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    cursor:grab;
    background:#000;
}

#viewer360:active{
    cursor:grabbing;
}

#viewer360 canvas{
    display:block;
    width:100%;
    height:100%;
}

.viewer-overlay{
    position:absolute;
    inset:0;

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

    font-family:"IBM Plex Mono", monospace;
    font-size:14px;
    color:#ddff00;

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

    pointer-events:none;

    opacity:1;

    transition:opacity .5s;
}

.viewer-overlay.hide{
    opacity:0;
}