/* 首页顶部的区块导航（2026-10-09，参考 jayuestudio 顶部导航），逻辑在 js/topbar.js。
   只加这一条：Works / Lab / About / Journey / Contact，居中放在顶部，和左上 PORTFOLIO · 2026、右上时间同一行；首屏不显示。
   四角原有的固定元素（竖排 ABOUT、左上标签、右上三行、左下邮箱、右下状态）一律不动——
   10-09 试过把它们收成一行顶栏，本人看后定：导航可以加，其他还是原来的好。宽屏才出，窄屏仍用 MENU。 */

.topnav { display: none; }

@media (min-width: 1101px) {
  .topnav {
    position: fixed;
    top: 23px;               /* 字的中线落在 y 36，和左上 PORTFOLIO · 2026、右上时间同一条线（原 26px，低了 3px） */
    left: 50%;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 34px;
    height: 26px;
    translate: -50% 0;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* 首屏不出：那是一整幅电影画面，顶上多一排字抢戏（10-09 本人定）。作品区顶到顶部后才淡入，回到首屏再收起 */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
  }
  .topnav.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  /* 当前所在区块亮起并带一个红方点（和各区块 kicker 前的红方块同一个记号） */
  .topnav a {
    position: relative;
    color: var(--text-dim);
    text-decoration: none;
    transition: color 0.25s ease;
  }
  .topnav a:hover,
  .topnav a.is-current { color: var(--text); }
  .topnav a::before {
    content: '';
    position: absolute;
    left: -13px;
    top: 50%;
    width: 5px;
    height: 5px;
    background: var(--accent);
    translate: 0 -50%;
    scale: 0;
    transition: scale 0.3s var(--ease);
  }
  .topnav a.is-current::before { scale: 1; }
}

body.is-leaving .topnav { transition: opacity 0.28s var(--ease); opacity: 0 !important; }