:root{
    --bg:#0a0a0a; --white:#f3f3f1; --red:#ff3344; --blue:#2a5dff; --yellow:#ffd400;
    --grey:#7a7a7a; --line: rgba(243,243,241,0.12);
  }
  *{margin:0; padding:0; box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{ background:var(--bg); color:var(--white); font-family:'Space Grotesk', sans-serif; overflow-x:hidden; }
  ::selection{ background:var(--yellow); color:var(--bg); }
  .display{ font-family:'Archivo Black', sans-serif; line-height:0.92; letter-spacing:-0.01em; }

  header{
    position:fixed; top:0; left:0; right:0; z-index:60;
    display:flex; justify-content:space-between; align-items:center; padding:24px 48px;
    mix-blend-mode:difference;
  }
  .mark{ display:flex; gap:4px; align-items:center; }
  .mark span{ width:9px; height:9px; border-radius:2px; }
  .mark span:nth-child(1){ background:var(--red); }
  .mark span:nth-child(2){ background:var(--blue); }
  .mark span:nth-child(3){ background:var(--yellow); }
  .mark b{ font-family:'Archivo Black',sans-serif; font-size:16px; margin-left:10px; }
  nav ul{ display:flex; gap:34px; list-style:none; }
  nav a{ color:var(--white); text-decoration:none; font-size:13px; font-weight:500; letter-spacing:0.04em; text-transform:uppercase; position:relative; }
  nav a.active{ color:var(--yellow); }
  nav a::after{ content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; background:var(--red); transition:width .25s ease; }
  nav a:hover::after{ width:100%; }

  /* ---------------- video hero ---------------- */
  #video-hero{ position:relative; height:100vh; overflow:hidden; background:#111; }
  .video-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.55; }
  .video-fallback-gradient{
    position:absolute; inset:0; display:none;
    background:linear-gradient(125deg, #1a0a0a 0%, #0a0a0a 35%, #0a1430 70%, #0a0a0a 100%);
    background-size:300% 300%; animation:gradientShift 10s ease infinite;
  }
  @keyframes gradientShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
  .video-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 40%, rgba(10,10,10,0.85) 100%); }

  .hero-content{
    position:absolute; left:48px; bottom:64px; right:48px; z-index:10;
    display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  }
  .project-name{ font-size:clamp(40px,7.5vw,108px); }
  .project-name .c1{ color:var(--red); } .project-name .c2{ color:var(--blue); }
  .hero-meta{ display:flex; gap:24px; margin-top:14px; }
  .hero-meta span{ font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--grey); }
  .hero-meta span b{ color:var(--white); font-weight:700; }

  .cta-pop{
    flex-shrink:0; display:inline-flex; align-items:center; gap:12px;
    background:var(--white); color:var(--bg); text-decoration:none;
    font-weight:700; font-size:13px; letter-spacing:0.04em; text-transform:uppercase;
    padding:17px 26px; border-radius:3px; opacity:0; transform:translateY(16px);
  }
  .cta-pop:hover{ background:var(--yellow); }

  .scroll-cue{ position:absolute; left:48px; top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:left center;
    font-size:11px; letter-spacing:0.3em; color:var(--grey); text-transform:uppercase; z-index:10; }

  /* ---------------- cinematic scroll video ---------------- */
  #cine-video{ padding:140px 0; }
  .cine-label{ text-align:center; font-size:12px; letter-spacing:0.25em; text-transform:uppercase; color:var(--grey); margin-bottom:36px; }
  .cine-frame{
    position:relative; margin:0 auto; width:64%; aspect-ratio:16/9; overflow:hidden;
    border-radius:6px; background:#111;
  }
  .cine-frame video, .cine-frame .video-fallback-gradient{ width:100%; height:100%; object-fit:cover; }
  .cine-frame::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line); border-radius:6px; }

  /* ---------------- blur-reveal project list ---------------- */
  #list{ padding:160px 48px; }
  .list-head{ margin-bottom:60px; }
  .list-head h2{ font-size:clamp(34px,5vw,60px); }
  .proj-item{
    display:grid; grid-template-columns:80px 1fr auto; align-items:baseline; gap:24px;
    padding:34px 0; border-top:1px solid var(--line); cursor:pointer;
    filter:blur(6px); opacity:0.35; transition:filter .5s ease, opacity .5s ease;
    scroll-margin-top:120px;
  }
  #list .proj-item:last-child{ border-bottom:1px solid var(--line); }
  .proj-item.is-active{ filter:blur(0); opacity:1; }
  .proj-item:target{ filter:blur(0); opacity:1; }
  .proj-item .idx{ font-family:'Archivo Black',sans-serif; font-size:13px; color:var(--grey); }
  .proj-item h3{ font-family:'Archivo Black',sans-serif; font-size:clamp(30px,5vw,68px); transition:color .3s ease; }
  .proj-item.is-active:nth-child(odd) h3{ color:var(--red); }
  .proj-item.is-active:nth-child(even) h3{ color:var(--blue); }
  .proj-item .cat{ font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--grey); white-space:nowrap; }

  /* ---------------- thumbnail grid ---------------- */
  #grid{ padding:0 48px 160px; }
  .grid-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
  .thumb{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#141414; }
  .thumb img{ width:100%; height:100%; object-fit:cover; opacity:0.55; filter:grayscale(55%); transition:all .5s ease; }
  .thumb:hover img{ opacity:1; filter:grayscale(0%); transform:scale(1.05); }
  .thumb-meta{ position:absolute; left:0; right:0; bottom:0; padding:20px; background:linear-gradient(to top, rgba(10,10,10,0.92), transparent); }
  .thumb-meta .cat{ font-size:10px; letter-spacing:0.2em; text-transform:uppercase; }
  .thumb:nth-child(6n+1) .cat{ color:var(--red); } .thumb:nth-child(6n+3) .cat{ color:var(--blue); } .thumb:nth-child(6n+5) .cat{ color:var(--yellow); }
  .thumb-meta h4{ font-family:'Archivo Black',sans-serif; font-size:22px; margin-top:6px; }

  footer{ border-top:1px solid var(--line); padding:26px 48px; text-align:center; font-size:12px; color:var(--grey); letter-spacing:0.04em; }

  @media (max-width:760px){
    header{ padding:18px 22px; }
    nav ul{ gap:18px; } nav a{ font-size:11px; }
    .hero-content{ left:22px; right:22px; bottom:40px; flex-direction:column; align-items:flex-start; gap:22px; }
    .cine-frame{ width:90%; }
    #list{ padding:100px 22px; }
    .proj-item{ grid-template-columns:1fr; gap:6px; }
    #grid{ padding:0 22px 100px; }
    .grid-wrap{ grid-template-columns:1fr; }
    footer{ padding:22px; }
  }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; } }
  a:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }