:root{
    --bg1:#f3f3f3;
    --bg2:#e9e9e9;
    --ink:#111;
    --muted: rgba(0,0,0,.55);
    --pad: 120px;
  
    --navW: 260px; /* reserve right for nav */
    --dot: 16px;
  
    --font-serif: "instrument-serif", serif;
  }
  
  html,body{height:100%; margin:0;}
  body{
    overflow:hidden;
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 10% 15%, rgba(0,0,0,.08), transparent 55%),
      radial-gradient(900px 600px at 90% 20%, rgba(0,0,0,.06), transparent 58%),
      radial-gradient(1000px 700px at 20% 90%, rgba(0,0,0,.06), transparent 55%),
      radial-gradient(900px 600px at 95% 85%, rgba(0,0,0,.07), transparent 55%),
      linear-gradient(180deg, var(--bg1), var(--bg2));
  }
  
  .stage{ position:relative; height:100%; width:100%; }
  
  /* -----------------------
     Top-right nav buttons
  ------------------------*/
  .nav{
    position:absolute;
    top:44px;
    right:54px;
    display:flex;
    flex-direction:column;
    gap:10px;
    z-index:50;
    user-select:none;
  }
  
  .nav{
    position:absolute;
    top:44px;
    right:54px;
    display:flex;
    flex-direction:column;
    gap:5px;
    z-index:50;
    user-select:none;
  }
  
  .navBtn{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    color: rgba(0,0,0,.85);
    font-family: var(--font-serif);
    font-size:18px;
    font-style: normal;
    transform-origin: right center;
    transition: transform 180ms ease;
  }
  
  /* dot base */
  .navBtn .dot{
    width: 16px;               /* 固定 16px */
    height: 16px;
    border-radius:999px;
    background: transparent;
    border: 1px solid transparent; /* 用 border 而不是 outline */
    transition: border 180ms ease, background 180ms ease;
  }
  
  /* selected: italic + filled dot */
  .navBtn.active{
    font-style: italic;
    pointer-events: none;      /* 🔥 关键：禁止 hover */
  }
  
  .navBtn.active .dot{
    background: rgba(0,0,0,.95);
    border: none;
  }
  
/* 不再 skew 整个按钮 */
.navBtn:not(.active):hover{
    transform: none;
  }
  
  /* 只 skew 文字 */
  .navBtn:not(.active):hover .label{
    display:inline-block;       /* 必须 */
    transform: skewX(-10deg);
    transition: transform 180ms ease;
  }
  
  /* dot 只做 outline，不 skew */
  .navBtn:not(.active):hover .dot{
    border: 1px solid rgba(0,0,0,.65);
  }
  
  /* -----------------------
     Map / circles
  ------------------------*/
  .map{
    position:absolute;
    inset:0;
    z-index:10;
  }
  
  .circle{
    position:absolute;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    transform: translate(-50%,-50%);
    overflow:hidden;
    cursor:pointer;
  
    /* image */
    background-image: var(--img);
    background-size: cover;
    background-position: center;
    background-repeat:no-repeat;
  
    filter: grayscale(1) contrast(1.08);
    opacity: .92;
    transition: transform 220ms ease, opacity 220ms ease, filter 220ms ease;
  }
  
  .circle:hover{
    transform: translate(-50%,-50%) scale(1.35);
    opacity: 1;
    filter: grayscale(0) contrast(1.05);
  }
  
  .circle.hidden{
    opacity:0 !important;
    pointer-events:none !important;
  }
  
  /* -----------------------
     Crosshair
  ------------------------*/
  .crosshair{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;
    opacity:0;
    transition: opacity 150ms ease;
  }
  .crosshair.on{ opacity:1; }
  
  .crosshair .h{
    position:absolute;
    height:1px;
    background: rgba(0,0,0,.45);
    left:0;
    width:0;
  }
  .crosshair .v{
    position:absolute;
    width:1px;
    background: rgba(0,0,0,.45);
    bottom:0;
    height:0;
  }
  
  /* -----------------------
     Overlay + bar
  ------------------------*/
  .overlay{
    position:absolute;
    inset:0;
    z-index:40;
    pointer-events:none;
    opacity:0;
    transition: opacity 220ms ease;
  }
  .overlay.on{
    opacity:1;
    pointer-events:auto;
  }
  
  .overlayBackdrop{
    position:absolute;
    inset:0;
    background: rgba(255,255,255,.0);
  }
  
  /* bottom bar that slides up */
  .bar{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background: rgba(255,255,255,.94);
  
    transform: translateY(110%);
    transition: transform 260ms ease;
    padding: 26px 54px 30px;
  }
  .overlay.on .bar{
    transform: translateY(0%);
  }
  
  /* close dash */
  .close{
    position:absolute;
    right:54px;
    top:16px;
    width:48px;
    height:36px;
    border:none;
    background:transparent;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    color: rgba(0,0,0,.85);
  }
  
  /* layout inside bar */
  .barGrid{
    display:grid;
    grid-template-columns: 360px 1fr 1fr;
    gap: 26px;
    align-items:end;
  }
  
  /* info block (left bottom like your fig) */
  .info{
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.65;
    color: rgba(0,0,0,.9);
  }
  .info .row{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 22px;
  }
  .info .k{
    color: rgba(0,0,0,.75);
    font-style: italic;
  }
  .info .v{
    color: rgba(0,0,0,.9);
  }
  
  /* images */
  .imgs{
    position:relative;
    height: 30%;
    transform: translateY(-126px);
  }
  .imgA, .imgB{
    position:absolute;
    overflow:hidden;
  }
  .imgA{
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 46vw;
    aspect-ratio: 1 / 1;
    opacity: .92;
  }
  .imgB{
    left: 220px;
    bottom: 24px;
    width: 120%;
    max-width: 56vw;
    aspect-ratio: 16 / 10;
    opacity: .96;
  }
  .imgs img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  /* title link (big, right) */
  .titleArea{
    align-self: start;
    justify-self: end;
    z-index: 1000;
    transform: translateY(-354px);
  }
  .titleLink{
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 76px;
    line-height: 1;
    color: rgba(255,69,0,1); /* 默认橙色，你也可以在 JS 给每个 world 改 */
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 3px;
  }
  
  /* fade for navigation if you want */
  .fade{
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.92);
    opacity:0;
    pointer-events:none;
    transition:opacity 420ms ease;
    z-index:999;
  }
  .fade.on{ opacity:1; }
  
 
  



  @media (max-width: 980px){
    .nav{
      top:14px;
      left:16px;
      right:16px;
      justify-content:flex-start;
      gap:8px 14px;
    }

    .navBtn{
      font-size:14px;
      gap:8px;
    }

    .navBtn .dot{
      width:12px;
      height:12px;
      flex:0 0 12px;
    }

    .circle{
      width:38px !important;
      height:38px !important;
    }
  
    .bar{
      padding:20px 20px 24px;
    }
  
    .close{
      right:18px;
      top:10px;
    }
  
    .barGrid{
      grid-template-columns:1fr;
      gap:18px;
      align-items:start;
    }
  
    .info{
      font-size:15px;
    }
  
    .info .row{
      grid-template-columns:160px 1fr;
      gap:16px;
    }
  
    .imgs{
      min-height:220px;
    }
  
    .imgA{
      width:min(44vw, 300px);
    }
  
    .imgB{
      left:110px;
      width:min(56vw, 420px);
    }
  }
  
  /* --------------------------------
     MOBILE
  --------------------------------- */
  @media (max-width: 768px){
    body{
      overflow:hidden;
    }
  
    .stage{
      height:100dvh;
    }
  
    .nav{
      top:14px;
      left:16px;
      right:16px;
      justify-content:flex-start;
      gap:8px 14px;
    }

    .navBtn{
      font-size:14px;
      gap:8px;
    }

    .navBtn .dot{
      width:12px;
      height:12px;
      flex:0 0 12px;
    }

    .circle{
      width:38px !important;
      height:38px !important;
    }
  
  
    .circle:hover{
      transform: translate(-50%,-50%) scale(1.12);
    }
  
    .crosshair .h,
    .crosshair .v{
      background: rgba(0,0,0,.32);
    }
    .overlay{
      position:fixed;
      inset:0;
      z-index:40;
    }
  
    .overlayBackdrop{
      position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:20%;
    }
  
    .bar{
      position:absolute;
      inset:0;
      transform:translateY(100%);
      transition:transform 260ms ease;
      background:transparent;   /* 关键：去掉整页底色 */
      padding:0;
      overflow:hidden;
      border-radius:0;
    }
  
    .overlay.on .bar{
      transform:translateY(0);
    }
  
    .bar::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:40%;
      background:#ffffff;       /* 只在底部 20% 出现 */
      z-index:0;
    }
  
    .barGrid,
    .imgs,
    .info,
    .close{
      position:relative;
      z-index:1;
    }
  
    .barGrid{
      position:relative;
      display:block;
      width:100%;
      height:100%;
      padding:0;
    }
  
    /* 图片区域：上方错位叠放 */
    .imgs{
      position:absolute;
      left:0;
      top:0;
      width:160%;
      height:58%;
      min-height:auto;
      transform:none;
    }
  
    .imgA,
    .imgB{
      position:absolute;
      overflow:hidden;
      background:transparent;
    }
  
    .imgA{
      left:6.5%;
      top:32%;
      width:49%;
      aspect-ratio: 1 / 1;
      opacity:1;
      z-index:1;
    }
  
    .imgB{
      left:22%;
      top:47%;
      width:73%;
      aspect-ratio: 1.48 / 1;
      opacity:1;
      z-index:2;
    }
  
    .imgA img,
    .imgB img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
  
    /* 信息区：放在图片下方 */
    .info{
      position:absolute;
      left:8.5%;
      top:78%;
      width:78%;
      font-size:16px;
      line-height:1.15;
      color:rgba(0,0,0,.92);
    }
  
    .info .row{
      display:grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap:18px;
      margin:0 0 8px 0;
      align-items:start;
    }
  
    .info .k,
    .info .v{
      margin:0;
      padding:0;
    }
  
    .info .k{
      font-style:normal;
      color:rgba(0,0,0,.92);
    }
  
    .info .v{
      color:rgba(0,0,0,.96);
    }
  
    /* 关闭按钮改成右下短横线 */
    .close{
      position:absolute;
      right:20%;
      bottom:3.5%;
      top:auto;
      width:15px;
      height:10px;
      padding:0;
      border:none;
      background:transparent;
      color:transparent;
      font-size:0;
      line-height:0;
      cursor:pointer;
      z-index:10;
    }
  
    .close::before{
      content:"";
      position:absolute;
      left:0;
      top:50%;
      width:25px;
      height:1px;
      background:rgba(0,0,0,.78);
      transform:translateY(-50%);
    }
  
    /* 手机上不要 hover 放大 */
    .imgB a:hover img{
      transform:none;
    }
  }
  

  @media (max-width: 500px){
    .nav{
      top:35px;
      left:20px;
      right:14px;
      gap:6px 12px;
    }

    .navBtn{
      font-size:13px;
    }

    .circle{
      width:34px;
      height:34px; 
    }

    .imgs{
      height:100%;
    }
  
    .imgA{
      left:6.5%;
      top:33.5%;
      width:55%;
    }
  
    .imgB{
      left:22%;
      top:48.5%;
      width:100%;
    }
  
    .info{
      left:8.5%;
      top:73%;
      width:79%;
      font-size:14px;
    }
  
    .info .row{
      grid-template-columns: 1.2fr 0.8fr;
      gap:14px;
      margin-bottom:6px;
    }
  

    .close{
      position:absolute;
      right:10%;
      bottom:5.5%;
      top:auto;
      width:20px;
      height:15px;
      padding:0;
      border:none;
      background:transparent;
      color:transparent;
      font-size:0;
      line-height:0;
      cursor:pointer;
      z-index:10;
    }

    

  }