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

    :root {
      --bg:         #f0eeea;
      --fg:         #111;
      --muted:      #555;
      --card-bg:    #e5e3df;
      --card-hover: #dddbd7;
      --border:     #d5d3cf;
      --line:       #aaa;
      --subtle:     #bbb;
    }
    [data-theme="dark"] {
      --bg:         #0e0e0e;
      --fg:         #e8e6e1;
      --muted:      #aaa;
      --card-bg:    #1a1a1a;
      --card-hover: #222;
      --border:     #2a2a2a;
      --line:       #333;
      --subtle:     #555;
    }

    html, body {
      min-height: 100%;
      background: var(--bg);
      color: var(--fg);
      font-family: 'IBM Plex Mono', monospace;
      transition: background 0.4s, color 0.4s;
    }

    /* ── TOP BAR ── */
    header {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      border-bottom: 1px solid var(--border);
      background: var(--bg);
      z-index: 100;
      transition: background 0.4s, border-color 0.4s;
      overflow: hidden;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
    .header-left {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .back-link {
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.06em;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.2s;
    }
    .back-link:hover { color: var(--fg); }
    .back-link::before { content: '← '; }

    .breadcrumb {
      font-size: 13px; letter-spacing: 0.06em; color: var(--subtle);
    }
    .breadcrumb span { color: var(--fg); }

    .header-right {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    /* ── THEME TOGGLE ── */
    .theme-toggle {
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .toggle-track {
      width: 32px; height: 18px;
      border-radius: 9px;
      border: 1px solid var(--line);
      background: transparent;
      position: relative;
      transition: border-color 0.3s;
    }
    .toggle-dot {
      position: absolute;
      top: 3px; left: 3px;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--fg);
      transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
    }
    [data-theme="dark"] .toggle-dot { transform: translateX(14px); }
    .toggle-label {
      font-size: 12px;
      letter-spacing: 0.1em;
      color: var(--muted);
      font-family: 'IBM Plex Mono', monospace;
    }
    .lang-toggle {
      background: none; border: none; cursor: pointer;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px; letter-spacing: 0.1em;
      color: var(--muted); transition: color 0.2s; padding: 0;
    }
    .lang-toggle:hover { color: var(--fg); }

    /* ── MAIN ── */
    main {
      padding: 80px 32px 60px;
      max-width: 1100px;
      margin: 0 auto;
    }

    /* ── PAGE TITLE ── */
    .page-title {
      margin-bottom: 48px;
      opacity: 0;
      animation: fadeUp 0.6s ease 0.1s forwards;
    }
    .page-title h1 {
      font-size: 48px;
      font-weight: 300;
      line-height: 1.1;
      color: var(--fg);
    }
    .page-title p {
      margin-top: 8px;
      font-size: 12px;
      letter-spacing: 0.1em;
      color: var(--muted);
    }

    /* ── GRID ── */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
    }

    /* ── PROJECT CARD ── */
    .project-card {
      background: var(--card-bg);
      aspect-ratio: 16/9;
      text-decoration: none;
      color: var(--fg);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 20px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      opacity: 0;
      transition: background 0.3s ease;
    }
    /* staggered fade in */
    .project-card:nth-child(1) { animation: fadeUp 0.5s ease 0.2s forwards; }
    .project-card:nth-child(2) { animation: fadeUp 0.5s ease 0.3s forwards; }
    .project-card:nth-child(3) { animation: fadeUp 0.5s ease 0.4s forwards; }
    .project-card:nth-child(4) { animation: fadeUp 0.5s ease 0.5s forwards; }
    .project-card:nth-child(5) { animation: fadeUp 0.5s ease 0.6s forwards; }
    .project-card:nth-child(6) { animation: fadeUp 0.5s ease 0.7s forwards; }
    .project-card:nth-child(7) { animation: fadeUp 0.5s ease 0.8s forwards; }
    .project-card:nth-child(8) { animation: fadeUp 0.5s ease 0.9s forwards; }
    .project-card:nth-child(9) { animation: fadeUp 0.5s ease 1.0s forwards; }
    .project-card:nth-child(10){ animation: fadeUp 0.5s ease 1.1s forwards; }

    .project-card:hover { background: var(--card-hover); }

    /* image area */
    .card-img {
      position: absolute;
      inset: 0;
      background: var(--card-bg);
      background-size: cover;
      background-position: center top;
      transition: transform 0.5s ease, filter 0.3s ease;
      filter: brightness(0.75) saturate(0.7);
      image-rendering: -webkit-optimize-contrast;
    }
    .project-card:hover .card-img {
      transform: scale(1.04);
      filter: brightness(0.85) saturate(0.85);
    }

    /* gradient overlay — sits above image, below text */
    .card-gradient {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.35) 50%,
        rgba(0,0,0,0.08) 100%
      );
      z-index: 1;
      transition: opacity 0.3s;
    }
    .project-card:hover .card-gradient {
      opacity: 0.85;
    }

    /* number top-right */
    .card-num {
      position: absolute;
      top: 16px; right: 16px;
      font-size: 9px;
      letter-spacing: 0.1em;
      color: rgba(255,255,255,0.55);
      z-index: 2;
    }

    /* bottom info */
    .card-info {
      position: relative;
      z-index: 2;
    }
    .card-tag {
      font-size: 10px;
      letter-spacing: 0.14em;
      color: rgba(255,255,255,0.65);
      margin-bottom: 4px;
      text-transform: uppercase;
    }
    .card-title {
      font-size: 15px;
      font-weight: 400;
      letter-spacing: 0.04em;
      line-height: 1.3;
      color: #fff;
    }

    /* hover arrow reveal */
    .card-arrow {
      position: absolute;
      bottom: 20px; right: 20px;
      font-size: 14px;
      color: rgba(255,255,255,0.7);
      opacity: 0;
      transform: translate(-4px, 4px);
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 2;
    }
    .project-card:hover .card-arrow {
      opacity: 1;
      transform: translate(0, 0);
    }

    /* ── FOOTER COUNT ── */
    .projects-count {
      margin-top: 24px;
      font-size: 9px;
      letter-spacing: 0.1em;
      color: var(--muted);
      opacity: 0;
      animation: fadeUp 0.4s ease 0.7s forwards;
    }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ══════════════════
       MOBILE
    ══════════════════ */
    @media (max-width: 600px) {
      header {
        height: 44px;
        padding: 0 16px;
      }
      .back-link { font-size: 13px; }
      .breadcrumb { display: none; }

      main { padding: 60px 12px 48px; }

      .page-title { margin-bottom: 20px; }
      .page-title h1 { font-size: 32px; }
      .page-title p  { font-size: 12px; }

      .projects-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
      .project-card {
        aspect-ratio: 16/9;
        padding: 14px;
      }
      .card-title { font-size: 15px; }
      .card-arrow { opacity: 1; transform: none; }
    }
    .noise-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; }
    /* ── CARD TILT ── */
    .projects-grid { perspective: 1200px; }
    .project-card { transition: background 0.3s ease; }
    /* ── TEXT SELECTION ── */
    ::selection { background: #111; color: #f0eeea; }
    [data-theme="dark"] ::selection { background: #e8e6e1; color: #0e0e0e; }