*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%}
body{
  background:#000;
  color:#fff;
  font-family:"Courier New","Noto Sans CJK SC","Microsoft YaHei","PingFang SC",Courier,monospace;
  overflow:hidden;
}
.video-page{
  position:relative;
  width:100%;
  height:100vh;
  min-height:620px;
  padding:0 2.85vw 2.6vh;
}
.back{
  position:absolute;
  top:4.5vh;
  left:2.85vw;
  z-index:10;
  text-decoration:none;
  font-size:15px;
  letter-spacing:.02em;
  color:#fff;
}
.video-stage{
  position:absolute;
  left:50%;
  top:46%;
  transform:translate(-50%,-50%);
  width:min(72vw,1120px);
  display:flex;
  justify-content:center;
}
.video-frame{
  width:100%;
  aspect-ratio:16/9;
  max-height:62vh;
  background:#080808;
  border:1px solid rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  letter-spacing:.05em;
}
.video-info{
  position:absolute;
  left:2.85vw;
  bottom:3.1vh;
  width:min(30vw,430px);
  font-size:12px;
  line-height:1.35;
}
.video-info p{margin:0 0 4px}
.video-info .intro{
  margin-top:10px;
  max-width:430px;
}
.work-clock{
  position:absolute;
  left:50%;
  bottom:2.8vh;
  transform:translateX(-50%);
  display:flex;
  gap:34px;
  font-size:clamp(16px,1.25vw,22px);
  line-height:1;
  letter-spacing:.06em;
  white-space:nowrap;
}
@media(max-width:800px){
  body{overflow:auto}
  .video-page{min-height:100vh;height:auto;padding:90px 18px 90px}
  .back{top:28px;left:18px}
  .video-stage{
    position:relative;
    left:auto;top:auto;transform:none;
    width:100%;
  }
  .video-frame{max-height:none}
  .video-info{
    position:relative;
    left:auto;bottom:auto;
    width:100%;
    margin-top:28px;
  }
  .work-clock{
    position:relative;
    left:auto;bottom:auto;transform:none;
    justify-content:center;
    margin-top:45px;
  }
}

/* Scroll refinement */
html, body { overflow-x: hidden; overflow-y: visible; }
body { min-height: 320vh; }
.video-page { min-height: 100vh; height: 100vh; }
.work-clock {
  position: fixed !important;
  left: 50% !important;
  bottom: 2.8vh !important;
  transform: translateX(-50%) !important;
  z-index: 1000;
}

html, body { min-height: 700vh !important; }
body { min-height: 700vh !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.1 — specific-work information typography refinement */
.metadata,
.work-meta,
.artwork-info,
.work-info {
  font-size: 1.08em !important;
  line-height: 1.32 !important;
}
.metadata p,
.work-meta p,
.artwork-info p,
.work-info p {
  line-height: 1.32 !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;
}


/* VIDEO specific-work Back only — same treatment as Painting, kept white */
.back {
  font-weight:400;
  color:transparent;
  background:repeating-linear-gradient(
    to right,
    #fff 0 6px,
    transparent 6px 7.5px
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}


/* 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;
}

/* VERSION 5 — mobile-only video scale + information typography */
@media (max-width:800px){
  .video-page{padding-left:10px;padding-right:10px}
  .video-stage{width:calc(100vw - 20px) !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important}
  .video-frame,.actual-video{width:100% !important;max-width:none !important;max-height:none !important}
  .video-info,.artwork-info,.work-info{width:100% !important;max-width:none !important;font-size:10px !important;line-height:1.35 !important}
  .video-info p,.artwork-info p,.work-info p,.video-info .intro,.home-without-organs-info .intro-block p{font-size:10px !important;line-height:1.35 !important}
}