*{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}
.about-page{position:relative;min-height:100vh;padding:0 2.85vw 2.6vh;display:flex;flex-direction:column}
.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;
}
.info{width:100%;margin-top:17.1vh;display:grid;grid-template-columns:42fr 38fr 20fr;flex:1;min-height:64vh}
article{padding:0 2vw}article:first-child{padding-left:0}article:last-child{padding-right:0}
.cv,.contact{
  border-left:0;
  background:
    repeating-linear-gradient(
      to bottom,
      #050505 0 7px,
      transparent 7px 18px
    ) top left/2px 100% no-repeat;
}
h1{margin:0 0 36px;font-size:clamp(15px,1.15vw,21px);line-height:1;font-weight:700}
h2{margin:0 0 15px;font-size:13px;line-height:1.2;font-weight:700}h2:not(:first-of-type){margin-top:42px}
p{margin:0 0 20px;max-width:58ch;font-size:14px;line-height:1.55}
.cv-row{display:grid;grid-template-columns:58px 1fr;gap:10px;margin-bottom:10px;font-size:13px;line-height:1.4}
.contact p{font-size:13px;line-height:1.4;margin-bottom:10px}
.about-clock{align-self:center;margin-top:34px;display:flex;gap:34px;font-size:clamp(16px,1.25vw,22px);line-height:1;letter-spacing:.06em;white-space:nowrap}.about-clock span{display:inline-block}
@media(max-width:800px){.about-page{padding:0 18px 22px}.back-home{top:28px;left:18px}.info{margin-top:110px;display:block}article{padding:30px 0}article:first-child{padding-top:0}.cv,.contact{
    border-left:0;
    border-top:0;
    background:
      repeating-linear-gradient(
        to right,
        #050505 0 7px,
        transparent 7px 18px
      ) top left/100% 2px no-repeat;
  }}
.language-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5vw;
}
.language-block .chinese{
  padding-left:1.5vw;
  border-left:1px dashed #050505;
}
.language-block .chinese p{
  line-height:1.75;
}
@media(max-width:1100px){
  .language-block{display:block}
  .language-block .chinese{
    margin-top:28px;
    padding-left:0;
    padding-top:24px;
    border-left:0;
    border-top:1px dashed #050505;
  }
}

/* Version 3.1 — populated CV */
.cv .cv-entry {
  margin: 0 0 12px;
}
.cv .cv-entry p {
  margin: 0;
}
.cv .cv-sub {
  padding-left: 14px;
}
.cv h2 {
  margin-top: 24px;
}

/* Version 3.1 — wider statement + single-language switch */
.info {
  position: relative;
}
.language-switch {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 20px;
}
.language-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
.language-button:hover {
  text-decoration: underline;
}
.language-version {
  display: none;
}
.language-version.is-active {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(290px, .85fr);
  column-gap: clamp(24px, 3vw, 54px);
  align-items: start;
}
.language-version .statement {
  min-width: 0;
  width: 100%;
  max-width: none;
  padding-right: 0;
}
.language-version .statement .language-block,
.language-version .statement .english,
.language-version .statement .chinese {
  width: 100%;
  max-width: none;
}
.language-version .cv {
  min-width: 0;
}
.language-version .contact {
  grid-column: 1 / -1;
  margin-top: 30px;
}
@media (max-width: 800px) {
  .language-version.is-active {
    grid-template-columns: 1fr;
  }
  .language-version .contact {
    grid-column: 1;
  }
}

/* Corrected MOZIHAN bilingual layout:
   preserve original Statement | CV | Contact three-column format. */
.language-switch {
  width: 100% !important;
  display: flex !important;
  justify-content: flex-start !important;
  margin: 0 0 34px !important;
  padding-left: 57% !important;
  box-sizing: border-box !important;
}

.language-button {
  appearance: none;
  -webkit-appearance: none;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  color: inherit !important;
  font: inherit !important;
  font-weight: bold !important;
  cursor: pointer;
}

.language-version {
  display: none !important;
}

.language-version.is-active {
  display: grid !important;
  /* Statement is deliberately widened; CV remains substantial; Contact stays right. */
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1.08fr) minmax(190px, .62fr) !important;
  column-gap: 0 !important;
  width: 100% !important;
  align-items: start !important;
}

.language-version .statement,
.language-version .cv,
.language-version .contact {
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Preserve the original vertical dashed separators. */
.language-version .statement {
  grid-column: 1 !important;
  padding: 0 clamp(30px, 3vw, 58px) 0 0 !important;
  border-right: 0 !important;
}

.language-version .cv {
  grid-column: 2 !important;
  padding: 0 clamp(28px, 2.6vw, 48px) !important;
  border-left: 2px dashed currentColor !important;
  border-right: 0 !important;
}

.language-version .contact {
  grid-column: 3 !important;
  margin-top: 0 !important;
  padding: 0 0 0 clamp(28px, 2.6vw, 48px) !important;
  border-left: 2px dashed currentColor !important;
}

/* Let Statement text actually use the enlarged column instead of retaining old max-width. */
.language-version .statement .language-block,
.language-version .statement .english,
.language-version .statement .chinese {
  width: 100% !important;
  max-width: none !important;
}

.language-version .statement p {
  width: 100% !important;
  max-width: none !important;
}

/* Keep readable text measure but eliminate the conspicuous unused right-side void. */
.language-version .statement .english p,
.language-version .statement .chinese p {
  max-width: 46ch !important;
}

/* Chinese version uses exactly the same geometry. */
.language-version.language-zh {
  font-family: inherit;
}

@media (max-width: 900px) {
  .language-switch {
    padding-left: 52% !important;
  }
  .language-version.is-active {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(160px, .58fr) !important;
  }
  .language-version .statement {
    padding-right: 24px !important;
  }
  .language-version .cv {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .language-version .contact {
    padding-left: 24px !important;
  }
}

@media (max-width: 700px) {
  .language-switch {
    padding-left: 0 !important;
    justify-content: flex-end !important;
  }
  .language-version.is-active {
    display: block !important;
  }
  .language-version .statement,
  .language-version .cv,
  .language-version .contact {
    border-left: 0 !important;
    padding: 0 !important;
    margin-bottom: 36px !important;
  }
}


/* Screenshot-matched MOZIHAN layout fix */
.info {
  display: block !important;
  width: 100% !important;
  position: relative !important;
}

/* language control: above the content, near center but slightly right */
.language-switch {
  position: absolute !important;
  top: -46px !important;
  left: 58% !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  z-index: 5;
}

.language-version {
  width: 100% !important;
}

.language-version.is-active {
  display: grid !important;
  /* Same basic Statement | CV | Contact format as the reference screenshot,
     but Statement receives more usable width. */
  grid-template-columns: 45fr 35fr 20fr !important;
  column-gap: 0 !important;
  align-items: start !important;
}

/* Restore original page spacing and dashed separators */
.language-version article {
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

.language-version .statement {
  grid-column: 1 !important;
  padding: 0 2.2vw 0 0 !important;
  background: none !important;
  border: 0 !important;
}

.language-version .cv {
  grid-column: 2 !important;
  padding: 0 2vw !important;
  border: 0 !important;
  background:
    repeating-linear-gradient(
      to bottom,
      #050505 0 7px,
      transparent 7px 18px
    ) top left/2px 100% no-repeat !important;
}

.language-version .contact {
  grid-column: 3 !important;
  padding: 0 0 0 2vw !important;
  margin-top: 0 !important;
  border: 0 !important;
  background:
    repeating-linear-gradient(
      to bottom,
      #050505 0 7px,
      transparent 7px 18px
    ) top left/2px 100% no-repeat !important;
}

/* Critical: the old .language-block was a two-column English/Chinese layout.
   With only one language visible, that rule was wasting half of Statement width.
   Each active language now uses the full Statement column. */
.language-version .statement .language-block {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.language-version .statement .english,
.language-version .statement .chinese {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.language-version .statement p {
  width: 100% !important;
  max-width: 52ch !important;
}

/* Keep heading spacing visually consistent with the original reference. */
.language-version h1 {
  margin-bottom: 36px !important;
}

@media (max-width: 800px) {
  .language-switch {
    position: static !important;
    text-align: right !important;
    margin-bottom: 24px !important;
  }
  .language-version.is-active {
    display: block !important;
  }
  .language-version .statement,
  .language-version .cv,
  .language-version .contact {
    padding: 30px 0 !important;
    background: none !important;
  }
  .language-version .statement {
    padding-top: 0 !important;
  }
  .language-version .cv,
  .language-version .contact {
    background:
      repeating-linear-gradient(
        to right,
        #050505 0 7px,
        transparent 7px 18px
      ) top left/100% 2px no-repeat !important;
  }
}


/* Final MOZIHAN touches — preserve all other layout/content */
.language-version.is-active {
  /* Widen Statement again; CV/Contact retain the same three-column structure. */
  grid-template-columns: 49fr 32fr 19fr !important;
}

/* Finer, shorter, more closely spaced vertical dashes. */
.language-version .cv,
.language-version .contact {
  border: 0 !important;
  background:
    repeating-linear-gradient(
      to bottom,
      #050505 0 4px,
      transparent 4px 9px
    ) top left / 1px 100% no-repeat !important;
}

/* Smaller language switch; no underline or other hover decoration. */
.language-button {
  font-size: 0.78em !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
.language-button:hover,
.language-button:focus,
.language-button:active {
  text-decoration: none !important;
}


/* Statement refinement — ONLY widen the paragraph text.
   Do not move columns, dividers, CV, Contact, or language button. */
.language-version .statement .language-block,
.language-version .statement .english,
.language-version .statement .chinese {
  width: 100% !important;
  max-width: none !important;
}

.language-version .statement p,
.language-version .statement .english p,
.language-version .statement .chinese p {
  width: calc(100% - 12px) !important;
  max-width: 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.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;
}