*{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;
}
.work-page{
  position:relative;
  min-height:100vh;
  padding:0 2.85vw 2.6vh;
  display:flex;
  flex-direction:column;
}
.back{
  position:absolute;
  top:4.5vh;
  left:2.85vw;
  text-decoration:none;
  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;
}
.artwork-space{
  width:100%;
  min-height:58vh;
  margin-top:12vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.artwork-placeholder{
  width:min(66vw,980px);
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f4f4f4;
}
.artwork-placeholder span{
  font-size:11px;
  letter-spacing:.04em;
}
.metadata{
  margin-top:2.5vh;
  font-size:13px;
  line-height:1.45;
}
.metadata p{
  margin:0 0 5px;
}
.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;
}
@media(max-width:700px){
  .work-page{padding:0 18px 22px}
  .back{top:28px;left:18px}
  .artwork-space{margin-top:95px;min-height:55vh}
  .artwork-placeholder{width:92vw}
  .metadata{margin-top:24px}
}

/* Scroll refinement */
html, body { overflow-x: hidden; }
body { min-height: 320vh; }
.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; }


.artwork-placeholder img {
    max-width: 100%;
    max-height: 72vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =========================================================
   VERSION 1 — THREE PAINTING PAGE OPTIONS
   ========================================================= */

/* A — one image */
.painting-single {
  width: min(72vw, 1100px);
  min-height: 74vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.painting-single img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* B — two images side by side, visually equal-sized */
.painting-pair {
  width: min(86vw, 1360px);
  min-height: 74vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 52px);
  align-items: center;
}
.painting-pair .pair-cell {
  height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.painting-pair .pair-cell img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* C — variable-number image gallery */
.painting-gallery {
  position: relative;
  width: min(78vw, 1180px);
  min-height: 74vh;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.painting-gallery .gallery-image {
  display: none;
  max-width: 82%;
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
}
.painting-gallery .gallery-image.is-active {
  display: block;
}
.gallery-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5;
}
.gallery-side.prev { left: 0; }
.gallery-side.next { right: 0; }
.gallery-side.prev:hover::after,
.gallery-side.next:hover::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #111;
  font: 16px "Courier New", monospace;
}
.gallery-side.prev:hover::after { content: "←"; left: 18%; }
.gallery-side.next:hover::after { content: "→"; right: 18%; }

@media (max-width: 800px) {
  .painting-pair {
    grid-template-columns: 1fr;
  }
  .painting-pair .pair-cell {
    height: 40vh;
  }
}

/* VERSION 2 — larger paired painting documentation + click-to-enlarge */
.painting-pair {
  width: min(94vw, 1560px) !important;
  gap: clamp(10px, 1.5vw, 26px) !important;
}
.painting-pair .pair-cell {
  height: 72vh !important;
}
.painting-pair .pair-cell img {
  max-width: 100% !important;
  max-height: 72vh !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  cursor: zoom-in;
}

/* Full-screen artwork viewer */
.painting-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.96);
  cursor: zoom-out;
}
.painting-lightbox.is-open { display: flex; }
.painting-lightbox img {
  max-width: 96vw;
  max-height: 96vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* 2026 Scene 0 grouped rows */
.scene0-space{width:100%;height:auto!important;min-height:72vh;padding:7vh 3vw 12vh;box-sizing:border-box}.scene0-grid{width:94vw;margin:0 auto;display:flex;flex-direction:column;gap:clamp(18px,3vh,38px)}.scene0-row{width:100%;display:flex;gap:clamp(8px,1.2vw,18px);align-items:stretch;justify-content:center}.scene0-cell{flex:1 1 0;min-width:0;height:clamp(170px,26vw,390px);display:flex;align-items:center;justify-content:center}.scene0-cell img{width:100%;height:100%;object-fit:contain;display:block;cursor:zoom-in}@media(max-width:800px){.scene0-grid{width:92vw}.scene0-row{flex-wrap:wrap}.scene0-cell{flex:1 1 42%;height:34vh}}

/* 2026 Scene 0 — Preview-style image browser */
.mac-preview-space {
  width: 100%;
  height: auto !important;
  min-height: 78vh;
  padding: 5vh 3vw 10vh;
  box-sizing: border-box;
}
.mac-preview {
  width: 94vw;
  min-height: 72vh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: clamp(92px, 10vw, 145px) 1fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: stretch;
}
.preview-index {
  max-height: 72vh;
  overflow-y: auto;
  padding: 2px 10px 2px 2px;
  box-sizing: border-box;
}
.preview-thumb {
  width: 100%;
  height: 88px;
  margin: 0 0 10px;
  padding: 5px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.preview-thumb img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.preview-thumb.is-active {
  border-color: #999;
}
.preview-main {
  height: 72vh;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-main > img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
}
@media (max-width: 700px) {
  .mac-preview {
    grid-template-columns: 78px 1fr;
    gap: 12px;
  }
  .preview-thumb { height: 68px; }
}

/* Scene 0 Preview — visually quiet thumbnail scrolling */
.preview-index {
  scrollbar-width: none !important;       /* Firefox */
  -ms-overflow-style: none !important;    /* older Edge */
  overscroll-behavior: contain;
}
.preview-index::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;               /* Chrome / Safari */
}

/* Subtle visual indication that more thumbnails continue below,
   without using a conventional scrollbar. */
.preview-index {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 10px,
    black calc(100% - 18px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    black 10px,
    black calc(100% - 18px),
    transparent 100%
  );
}

/* Scene 0 Preview — no magnifier cursor on the main image */
.preview-main > img {
  cursor: default !important;
}

/* Version 2.25 refinement — Preview index selection frame */
.preview-thumb.is-active {
  border-style: dashed !important;
  border-width: 1px !important;
}

/* Version 2.27 — title beside enlarged Preview image */
.preview-main-with-title {
  height: 72vh;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(18px, 2.4vw, 38px);
  align-items: center;
}
.preview-main-with-title .preview-main {
  height: 72vh;
}
.preview-work-title {
  max-width: 220px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: bold;
  text-align: left;
}
@media (max-width: 700px) {
  .preview-main-with-title {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .preview-work-title {
    max-width: none;
  }
}

/* 2026 Preview title refinement */
.preview-main-with-title {
  grid-template-columns: minmax(0, 1fr) clamp(205px, 18vw, 285px) !important;
  gap: clamp(14px, 2vw, 30px) !important;
}
.preview-work-title {
  max-width: none !important;
  width: 100%;
  font-size: 10px !important;
  line-height: 1.45 !important;
  font-weight: bold;
  text-align: left;
  white-space: nowrap; /* keeps the final scene/rehearsal number with its phrase */
  overflow: visible;
  letter-spacing: 0;
}

/* Echo the site's dashed-line language without boxing the title:
   a short, fine dashed rule beneath the text. */
.preview-work-title::after {
  content: "";
  display: block;
  width: 100%;
  margin-top: 7px;
  border-bottom: 1px dashed currentColor;
}

@media (max-width: 700px) {
  .preview-main-with-title {
    grid-template-columns: 1fr !important;
  }
  .preview-work-title {
    white-space: normal;
    font-size: 9px !important;
  }
}

/* Replace title underline with dashed-stroke typography */
.preview-work-title::after {
  content: none !important;
  display: none !important;
}

/* Dashed-line lettering: use a dotted/dashed SVG stroke mask over the same text.
   The ordinary text is made transparent, while the stroke preserves legibility
   and matches the site's dash-line language. */
.preview-work-title {
  position: relative;
  color: transparent !important;
  -webkit-text-stroke: 0.55px currentColor;
  text-stroke: 0.55px currentColor;
}

/* Fallback: CSS cannot natively make text-stroke itself dashed, so the actual
   dashed typography is rendered by SVG on the five 2026 pages. */

.preview-title-svg {
  display: block;
  width: 100%;
  height: 22px;
  overflow: visible;
}
.preview-title-svg text {
  fill: none;
  stroke: #111;
  stroke-width: 0.65px;
  stroke-dasharray: 1.4 1.15;
  stroke-linecap: butt;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
}

/* Clearer dashed typography — preserve dash construction while improving legibility */
.preview-title-svg text {
  fill: rgba(17,17,17,0.13) !important;
  stroke: #111 !important;
  stroke-width: 0.82px !important;
  stroke-dasharray: 3.8 1.15 !important;
  stroke-linecap: square !important;
  stroke-linejoin: round !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}


/* Version 3 refinement — 2024 work information on one long line */
body.work-2024 .metadata,
body.work-2024 .work-meta,
body.work-2024 .painting-info {
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
}

body.work-2024 .metadata p,
body.work-2024 .work-meta p,
body.work-2024 .painting-info p {
  display: inline !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body.work-2024 .metadata p:not(:last-child)::after,
body.work-2024 .work-meta p:not(:last-child)::after,
body.work-2024 .painting-info p:not(:last-child)::after {
  content: ", ";
  white-space: pre;
}


/* Version 3 refinement — 2025 work information on one long line */
body.work-2025 .metadata,
body.work-2025 .work-meta,
body.work-2025 .painting-info {
  width: max-content !important;
  max-width: none !important;
  white-space: nowrap !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0 !important;
}

body.work-2025 .metadata p,
body.work-2025 .work-meta p,
body.work-2025 .painting-info p {
  display: inline !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

body.work-2025 .metadata p:not(:last-child)::after,
body.work-2025 .work-meta p:not(:last-child)::after,
body.work-2025 .painting-info p:not(:last-child)::after {
  content: ", ";
  white-space: pre;
}


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

/* Match 2024 + 2025 specific-work information typography to 2026 */
body.work-2024 .metadata,
body.work-2024 .work-meta,
body.work-2025 .metadata,
body.work-2025 .work-meta {
  font-size: 1.08em !important;
  line-height: 1.32 !important;
}
body.work-2024 .metadata p,
body.work-2024 .work-meta p,
body.work-2025 .metadata p,
body.work-2025 .work-meta p {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* 2024 + 2025 specific-work information — smaller, matching the supplied visual reference */
body.work-2024 .metadata,
body.work-2024 .work-meta,
body.work-2024 .artwork-info,
body.work-2024 .work-info,
body.work-2025 .metadata,
body.work-2025 .work-meta,
body.work-2025 .artwork-info,
body.work-2025 .work-info {
  font-size: clamp(11px, 0.82vw, 13px) !important;
  line-height: 1.38 !important;
}

body.work-2024 .metadata p,
body.work-2024 .work-meta p,
body.work-2024 .artwork-info p,
body.work-2024 .work-info p,
body.work-2025 .metadata p,
body.work-2025 .work-meta p,
body.work-2025 .artwork-info p,
body.work-2025 .work-info p {
  font-size: inherit !important;
  line-height: inherit !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 artwork scale + information typography */
@media (max-width:700px){
  .work-page{padding-left:10px;padding-right:10px}
  .artwork-space{width:100%;margin-top:88px;min-height:62vh}
  .artwork-placeholder{width:96vw;max-width:none}
  .artwork-placeholder img{max-width:96vw;max-height:78vh}
  .mac-preview-space{width:100%;padding-left:0;padding-right:0}
  .mac-preview{width:98vw;max-width:none;grid-template-columns:52px minmax(0,1fr)}
  .preview-index{width:52px}
  .preview-thumb{height:52px}
  .preview-main,.preview-main-with-title{min-width:0}
  .preview-main>img{max-width:100%;max-height:80vh}
  .metadata,.artwork-info,.work-info,.preview-work-title{font-size:10px !important;line-height:1.35 !important}
  .artwork-info p,.work-info p,.metadata p{font-size:10px !important;line-height:1.35 !important}
}