:root {
      --bg: #1a1a1d;
      --card-bg: rgba(255,255,255,0.06);
      --border: rgba(255,255,255,0.08);
      --text-muted: rgba(255,255,255,0.65);
      --accent: #ffffff;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', sans-serif;
      background: var(--bg);
      color: white;
    }

    /* PAGE WRAPPER */
    .page {
      max-width: 1100px;
      margin: 0 auto;
      padding: 48px 20px 96px;
    }

    /* HEADER */
    .page-header {
      margin-bottom: 64px;
    }

    .page-header h1 {
      font-weight: 300;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      margin: 0 0 12px;
      font-size: 28px;
    }

    .page-header p {
      margin: 0;
      color: var(--text-muted);
      max-width: 520px;
      line-height: 1.5;
    }

    /* PROJECT LIST */
    .project-list {
      display: flex;
      flex-direction: column;
      gap: 0px;
    }

    /* PROJECT ITEM */
    .project {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      align-items: center;
    }

    .project:nth-child(even) .project-poster {
      order: 2;
    }

    .project:nth-child(even) .project-content {
      order: 1;
    }


    /* POSTER */
    .project-poster {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      width: 100%;
      box-shadow:
        0 0 0 2px #000,
        12px 12px 0 rgba(0,0,0,0.35);
    }

.project:nth-child(even) .project-poster {
  box-shadow:
    0 0 0 2px #000,
    -12px 12px 0 rgba(0,0,0,0.35);
}


    .project-poster img {
      width: 100%;
      height: auto;
      object-fit: cover;
      display: block;
    }

    /* CONTENT */
    .project-content {
      display: flex;
      flex-direction: column;
      color: var(--text);
    }

    


.project {
  --accent: #ffffff; 
}

.project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;

  padding: 72px 0; /* vertical rhythm only */
}



/* PROJECT SECTION BACKGROUND */
.project {
  position: relative;
  padding: 56px 0;
}

/* soft tinted background layer */
.project::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  background: var(--accent);
  z-index: 0;
}

.project-content {
  color: var(--text);
}





.project > * {
  position: relative;
  z-index: 2;
}


.project-content h2 {
  margin: 0 0 10 0px;
  font-size: 2.5rem;
  /* color: var(--accent);              ✅ uses dominant color */
  text-transform: uppercase;         /* matches your board-info vibe */
}



    .project-content p {
      margin: 0 0 24px;
      /* color: var(--text-muted); */
      line-height: 1.6;
    }

    /* Default: left-aligned text */
.project-content {
  text-align: left;
}

/* When image is on the right → text aligns right */
.project:nth-child(even) .project-content {
  text-align: right;
  align-items: flex-end;
}


    /* TAGS */
    .project-meta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 24px;
    }

    .project-meta span {
      font-size: 12px;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--border);
      color: white;
    }

    /* BUTTON IF NEEDED */
    .project-actions a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 8px;
      background: rgba(255,255,255,0.1);
      border: 1px solid var(--border);
      color: white;
      text-decoration: none;
      font-size: 14px;
      transition: background 0.2s ease;
    }

    .project-actions a:hover {
      background: rgba(255,255,255,0.2);
    }


    /* Card container */
    .card-container {
      position: fixed;
      top: 30px;
      left: 30px;
      width: 140px;
      height: 196px;
      perspective: 1000px;
      z-index: 1000;
      cursor: pointer;
    }

        /* The card wrapper that flips */
        .card {
            width: 100%;
            height: 100%;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-container:hover .card {
            transform: rotateY(180deg);
        }

        /* Front and back faces */
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
            transition: box-shadow 0.3s;
        }

        .card-container:hover .card-face {
            box-shadow: 0 8px 16px rgba(0,0,0,0.3);
        }

        .card-front {
            background: #000;
        }

        .card-back {
            background: #000;
            transform: rotateY(180deg);
        }

        /* Images on the cards */
        .card-face img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
        }

/* FOOTER */
.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 100;

  width: 100%;
  height: 42px;

  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);

  background: rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(0, 0, 0, 0.12);

  color:#000;
  font-weight: bold;
}




.footer-inner {
  height: 100%;
  padding: 0 12px;

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



.footer-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  text-align: center;
}


.footer-links {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
}


.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  color: currentColor;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  position: relative;
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

.footer-links a:hover::after {
  transform: scaleX(1);
  opacity: 0.5;
}

.project:last-child {
  padding-bottom: 24px;
}


    

    /* MOBILE STACK */
    @media (max-width: 768px) {
      .project {
        grid-template-columns: 1fr;
        gap: 32px;
        align-items: start;
      }

      .project:nth-child(even) {
        direction: ltr;
      }

      .project-content {
        order: 1;
      }

      .project-poster {
        order: 2;
      }

      .page {
        padding-top: 32px;
      }

      .page-header h1 {
        font-size: 22px;
      }

      .card-container {
        display: none;
      }

      .site-footer {
        height: 48px;
      }

      .footer-inner {
        padding: 16px 10px;
      }

      .footer-links {
        flex-wrap: wrap;
        gap: 14px;
      }
    }