*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{background:#fff;color:#050505;font-family:"Courier New","Noto Sans CJK SC","Microsoft YaHei","PingFang SC",Courier,monospace}
.home{min-height:100vh;padding:5vh 3.2vw 2.5vh;display:flex;flex-direction:column}
.field{position:relative;flex:1;min-height:72vh;max-height:80vh;overflow:hidden}
.rule{position:absolute;left:0;right:0;top:var(--y);height:2px;transform:translateY(var(--push,0px)) scaleY(var(--thin,1));transform-origin:center;transition:transform 190ms cubic-bezier(.65,0,.35,1)}
.rule::before,.rule::after{content:"";position:absolute;top:0;height:100%;background:repeating-linear-gradient(to right,#050505 0 5px,transparent 5px 10px);transition:transform 190ms cubic-bezier(.65,0,.35,1)}
.rule::before{left:0;width:var(--cut-left,100%);transform:translateX(var(--side-left,0px))}
.rule::after{left:var(--cut-right,100%);right:0;transform:translateX(var(--side-right,0px))}
.nav{position:absolute;z-index:2;color:#050505;text-decoration:none;padding:2px 7px;font-size:clamp(11px,.88vw,15px);font-weight:700;font-style:italic;line-height:1;transform:translateY(-50%);white-space:nowrap}
.name{left:16.5%;top:8%}.painting{left:65%;top:32%}.installation{left:27.5%;top:56%}.video{left:73%;top:92%}
.clock{align-self:center;margin-top:18px;display:flex;gap:34px;font-size:clamp(16px,1.25vw,22px);letter-spacing:.06em;white-space:nowrap}.clock span{display:inline-block}
@media(prefers-reduced-motion:reduce){.rule,.rule::before,.rule::after{transition:none}}


/* First-row / phantom-gap safeguard */
.rule:not(.has-cut)::after {
  -webkit-mask: none !important;
  mask: none !important;
}


/* VERSION 4 — final typography/navigation refinements */

/* English / Latin typography */
html, body, button, input, textarea, select,
a, p, div, span, h1, h2, h3, h4, h5, h6,
table, th, td, li {
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

/* Chinese glyphs: use a Heiti-style sans-serif stack while retaining Courier New for Latin.
   Browsers select the Chinese fallback only for glyphs Courier New does not contain. */
html, body, button, input, textarea, select,
a, p, div, span, h1, h2, h3, h4, h5, h6,
table, th, td, li {
  font-family: "Courier New", "SimHei", "Heiti SC", "STHeiti", "Microsoft YaHei", sans-serif;
}

/* Smaller back navigation on all pages */
.back-home,
.back-link,
.back,
.back-nav,
a[href="index.html"],
a[href="./index.html"],
a[href="painting.html"],
a[href="./painting.html"],
a[href="installation.html"],
a[href="./installation.html"],
a[href="video.html"],
a[href="./video.html"] {
  font-size: 0.72rem !important;
}


/* VERSION 4 — homepage labels:
   smaller type; dashed rule crosses directly through the words at rest.
   Existing hover transform/motion is intentionally left untouched. */
.home-link,
.nav-link,
.menu-link,
.home-item a,
nav a,
.menu a {
  font-size: clamp(0.78rem, 1.15vw, 1rem) !important;
  position: relative;
  z-index: 1;
}

/* Put the existing dashed line visually through the label rather than beside it.
   The line element/pseudo-elements keep their original hover animation. */
.home-link::before,
.home-link::after,
.nav-link::before,
.nav-link::after,
.menu-link::before,
.menu-link::after,
.home-item a::before,
.home-item a::after,
nav a::before,
nav a::after,
.menu a::before,
.menu a::after {
  top: 50% !important;
}

/* Crossing segment through homepage words at rest */
.homepage-label,
.label,
.nav-label,
.line-label,
.dash-label {
  font-size: clamp(0.78rem, 1.15vw, 1rem) !important;
  position: relative !important;
}
.homepage-label::after,
.label::after,
.nav-label::after,
.line-label::after,
.dash-label::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(
    to right,
    currentColor 0 4px,
    transparent 4px 9px
  );
}
a:hover .homepage-label::after,
a:hover .label::after,
a:hover .nav-label::after,
a:hover .line-label::after,
a:hover .dash-label::after,
.homepage-label:hover::after,
.label:hover::after,
.nav-label:hover::after,
.line-label:hover::after,
.dash-label:hover::after {
  opacity: 0;
}

/* VERSION 4 exact homepage label treatment */
.nav {
  font-size: clamp(9px, .70vw, 12px) !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}
/* Let the dashed row remain visible over the label text at rest. */
.rule { z-index: 3; pointer-events: none; }
.nav { z-index: 2; }


/* Homepage final normalization — MOZIHAN / 莫籽涵 matches the other three labels */
.nav.name {
  font-size: clamp(9px, .70vw, 12px) !important;
}


/* Optical size correction for MOZIHAN / 莫籽涵 only */
.nav.name {
  font-size: clamp(10.5px, .82vw, 14px) !important;
}


/* VERSION 4.2 — back-navigation position refinement */
.back-home,
.back-link,
.back,
.back-nav {
  margin-left: clamp(18px, 2.2vw, 36px) !important;
}


/* VERSION 4.2 — back-navigation vertical refinement */
.back-home,
.back-link,
.back,
.back-nav {
  transform: translateY(18px) !important;
}


/* VERSION 4.2 — deliberately awkward back-navigation placement */
.back-home,
.back-link,
.back,
.back-nav {
  margin-left: clamp(48px, 5.6vw, 92px) !important;
  transform: translateY(34px) !important;
}


/* Version 4.4 — wider spacing between bottom time displays */
.work-clock,
.clock,
.time {
  column-gap: clamp(44px, 5vw, 90px) !important;
  gap: clamp(44px, 5vw, 90px) !important;
}


/* Version 4.4 — increase bottom time spacing further */
.work-clock,
.clock,
.time,
.about-clock {
  gap: clamp(100px, 13vw, 240px) !important;
  column-gap: clamp(100px, 13vw, 240px) !important;
}