*{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}
.page{min-height:100vh;padding:0 2.85vw 2.6vh;display:flex;flex-direction:column}
.sheet{
  width:100%;
  margin-top:17.1vh;
  border-top:0;
  border-left:0;
  background:
    repeating-linear-gradient(to right,#050505 0 7px,transparent 7px 18px) top left/100% 2px no-repeat,
    repeating-linear-gradient(to bottom,#050505 0 7px,transparent 7px 18px) top left/2px 100% no-repeat
}
.row{display:grid;grid-template-columns:40% 12.7% 29.1% 18.2%;color:inherit;text-decoration:none}
.row>div{
  display:flex;
  align-items:center;
  min-height:10.05vh;
  padding:0 1.2vw;
  border:0;
  background:
    repeating-linear-gradient(to bottom,#050505 0 7px,transparent 7px 18px) top right/2px 100% no-repeat,
    repeating-linear-gradient(to right,#050505 0 7px,transparent 7px 18px) bottom left/100% 2px no-repeat
}
.header{font-weight:700;font-size:clamp(13px,1vw,18px)}
.header>div{min-height:7.25vh}
.work{font-size:clamp(15px,1.15vw,21px);letter-spacing:.015em}
.work>div{transition:padding 150ms cubic-bezier(.65,0,.35,1)}
.work:hover>div,.work:focus-visible>div{padding-left:1.65vw}
.work:focus-visible{outline:none}
.work-clock{align-self:center;margin-top:auto;display:flex;gap:34px;font-size:clamp(16px,1.25vw,22px);line-height:1;letter-spacing:.06em;white-space:nowrap}.work-clock span{display:inline-block}
@media(max-width:700px){.page{padding:0 18px 22px}.sheet{margin-top:13vh;overflow-x:auto}.row{min-width:760px}.row>div{min-height:72px;padding:0 14px}.header>div{min-height:50px}}
.back-home{
  position:absolute;
  top:4.5vh;
  left:2.85vw;
  text-decoration:none;
  font-family:"Courier New","Noto Sans CJK SC","Microsoft YaHei","PingFang SC",Courier,monospace;
  font-size:15px;
  font-weight:400;
  letter-spacing:.02em;
  color:transparent;
  background:
    repeating-linear-gradient(
      to right,
      #050505 0 6px,
      transparent 6px 7.5px
    );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.back-home:hover,.back-home:focus-visible{
  text-decoration:none;
}
@media(max-width:700px){
  .back-home{top:28px;left:18px}
}


/* 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 — chart typography refinement */
.sheet .row > div,
.sheet .header > div,
.row > div,
.header > div {
  font-size: 1.08em !important;
  line-height: 1.28 !important;
}
.sheet .row > div,
.row > div {
  min-height: 76px !important;
  padding-left: 17px !important;
  padding-right: 17px !important;
}
.sheet .header > div,
.header > div {
  min-height: 54px !important;
}
@media (max-width:700px) {
  .sheet .row, .row { min-width: 800px !important; }
  .sheet .row > div, .row > div { min-height: 78px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .sheet .header > div, .header > div { min-height: 54px !important; }
}

/* Restore original chart-row hover motion after the Version 4.1 padding enlargement */
.sheet .work > div {
  transition: padding-left 150ms cubic-bezier(.65,0,.35,1) !important;
}
.sheet .work:hover > div,
.sheet .work:focus-visible > div {
  padding-left: 1.65vw !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;
}

/* VERSION 5 — mobile-only refinement */
@media (max-width:700px){
  .page{padding-left:10px;padding-right:10px}
  .sheet{width:100%;margin-top:13vh;overflow-x:hidden}
  .row{min-width:0;width:100%;grid-template-columns:36% 13% 34% 17%}
  .row>div{min-width:0;min-height:62px;padding:0 5px;overflow-wrap:anywhere;word-break:normal}
  .header>div{min-height:44px}
  .sheet .row>div,.sheet .header>div,.row>div,.header>div{font-size:10px !important;line-height:1.2}
  .work{font-size:10px !important;letter-spacing:0}
  .work:hover>div,.work:focus-visible>div{padding-left:7px}
}


/* VERSION 8 — mobile archive charts: fit the complete four-column chart in viewport */
@media (max-width:700px){
  .page{
    width:100%;
    max-width:100vw;
    padding-left:6px !important;
    padding-right:6px !important;
    overflow-x:hidden;
  }
  .sheet{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
  }
  .sheet .row,
  .row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:minmax(0,34%) minmax(0,13%) minmax(0,36%) minmax(0,17%) !important;
  }
  .sheet .row > div,
  .sheet .header > div,
  .row > div,
  .header > div{
    min-width:0 !important;
    padding-left:3px !important;
    padding-right:3px !important;
    font-size:8px !important;
    line-height:1.12 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }
  .sheet .work:hover > div,
  .sheet .work:focus-visible > div,
  .work:hover > div,
  .work:focus-visible > div{
    padding-left:4px !important;
  }
}