/* Layout: one bordered column. Header strip, full-bleed video, two-up work grid, footer strip. Lines do the work. */
:root {
  --paper: #fff;
  --ink: #000;
  --mute: #6b6b6b;
  --line: #000;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif;
  --cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --pad: clamp(12px, 2vw, 20px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #000; --ink: #fff; --mute: #9a9a9a; --line: #fff; color-scheme: dark }
}
:root[data-theme="dark"] { --paper: #000; --ink: #fff; --mute: #9a9a9a; --line: #fff; color-scheme: dark }

* { box-sizing: border-box }
body { background: var(--paper); color: var(--ink); font: 13px/1.4 var(--mono); margin: 0 }
a { color: inherit; text-decoration: none }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }

.site { border-inline: 1px solid var(--line); max-width: 1600px; margin-inline: auto }

header, footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 8px 24px; padding: var(--pad); border-bottom: 1px solid var(--line);
}
header { position: sticky; top: env(safe-area-inset-top, 0px); background: var(--paper); z-index: 2 }
.name { font: 700 clamp(15px, 1.6vw, 20px)/1 var(--sans); letter-spacing: -0.01em; text-transform: uppercase }
.name .cjk { font-family: var(--cjk); font-weight: 500; margin-left: 0.4em }
nav { display: flex; gap: 20px }
nav a:hover, .meta a:hover { text-decoration: underline; text-underline-offset: 3px }

.hero { border-bottom: 1px solid var(--line); background: var(--ink) }
.hero video { display: block; width: 100%; height: auto; max-height: 82vh; object-fit: cover }

.intro {
  display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--line);
}
.intro > * { padding: var(--pad); min-width: 0 }
.intro > * + * { border-left: 1px solid var(--line) }
.intro p { margin: 0; max-width: 60ch; font: 400 clamp(16px, 1.8vw, 22px)/1.3 var(--sans) }
.label { text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute) }

.work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.work a { display: block; position: relative; border-bottom: 1px solid var(--line) }
/* Column divider drawn over the left tile, so both columns stay exactly the same width and height */
.work a:nth-of-type(odd)::after, .gallery figure.l::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: var(--line); z-index: 2; pointer-events: none }
.work figure { margin: 0 }
.work .img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink) }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .25s }
.work figcaption {
  display: flex; gap: 16px; padding: 10px var(--pad); border-top: 1px solid var(--line);
}
.work figcaption span:first-child { color: var(--mute); font-variant-numeric: tabular-nums }
.work a:hover figcaption { background: var(--ink); color: var(--paper) }
.work a:hover figcaption span:first-child { color: inherit }

footer { border-bottom: 0 }
.meta { display: flex; flex-wrap: wrap; gap: 8px 24px }
.copy { user-select: all }

@media (max-width: 640px) {
  .intro { grid-template-columns: 1fr }
  .intro > * + * { border-left: 0; border-top: 1px solid var(--line) }
  .work { grid-template-columns: 1fr }
  .work a:nth-of-type(odd)::after, .gallery figure.l::after { display: none }
}
@media (prefers-reduced-motion: reduce) { .work img { transition: none !important } }

/* Project page */
.p-head { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--line) }
.p-head > * { padding: var(--pad); min-width: 0 }
.p-head > * + * { border-left: 1px solid var(--line) }
.p-head h1 { margin: 0; font: 700 clamp(28px, 5vw, 64px)/0.95 var(--sans); letter-spacing: -0.03em; text-transform: uppercase; text-wrap: balance }
.facts { display: grid; grid-template-columns: 1fr 2fr; border-bottom: 1px solid var(--line) }
.facts > div { padding: var(--pad); min-width: 0 }
.facts > div + div { border-left: 1px solid var(--line) }
.facts dl { margin: 0; display: grid; gap: 16px }
.facts dd { margin: 4px 0 0 }
.copy-en p, .copy-zh p { margin: 0 0 1em; max-width: 62ch; font: 400 16px/1.5 var(--sans) }
.copy-zh p { font-family: var(--cjk); font-size: 15px; line-height: 1.8 }
.copy-zh { border-top: 1px solid var(--line); margin: var(--pad) calc(-1 * var(--pad)) 0; padding: var(--pad) var(--pad) 0 }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) }
.gallery figure { margin: 0; border-bottom: 1px solid var(--line); grid-column: 1 / -1; background: var(--ink) }
.gallery figure.half { grid-column: auto }
.gallery figure { position: relative }
.gallery img { display: block; width: 100% }
.pager { display: flex; justify-content: space-between; gap: 16px; padding: var(--pad); border-bottom: 1px solid var(--line) }
.pager a:hover { text-decoration: underline; text-underline-offset: 3px }
@media (max-width: 640px) {
  .p-head, .facts { grid-template-columns: 1fr }
  .p-head > * + *, .facts > div + div { border-left: 0; border-top: 1px solid var(--line) }
  .gallery figure.half { grid-column: 1 / -1 }
}

/* Added for the Sanity-driven build */
.intro p + p { margin-top: 0.6em }
.intro p.zh { font-family: var(--cjk); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6 }
/* Keep every gallery image at its true proportions (width/height attributes only reserve space) */
.gallery img, .gallery video { display: block; width: 100%; height: auto; max-width: 100% }
.gallery figcaption, .g-caption { margin: 0; padding: 10px var(--pad); border-top: 1px solid var(--line); background: var(--paper); color: var(--mute) }
.g-caption { grid-column: 1 / -1; border-bottom: 1px solid var(--line) }
.g-text { grid-column: 1 / -1; padding: var(--pad); border-bottom: 1px solid var(--line); display: grid; gap: var(--pad) }
.g-text h2 { margin: 0; font: 700 clamp(18px, 2vw, 24px)/1.1 var(--sans); text-transform: uppercase }
.g-text .copy-zh { border-top: 0; margin: 0; padding: 0 }
.work img { height: 100% }

/* Hover swap, as on the old site: second image fades in over the thumbnail */
.work .img { position: relative }
.work .img img.alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease }
@media (hover: hover) {
  .work a:hover .img img.alt, .work a:focus-visible .img img.alt { opacity: 1 }
}

/* SEO additions: homepage h1 keeps the header look; headings for screen readers and crawlers only */
h1.name { margin: 0 }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.facts dd a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px }
.facts dd a:hover { text-decoration-thickness: 2px }

/* Blur-up loading: blurred preview behind each image, full image fades in once loaded */
.ph { position: relative; display: block; overflow: hidden; background-color: var(--ink) }
.ph::before { content: ""; position: absolute; inset: 0; background: var(--lqip) center / cover no-repeat; filter: blur(16px); transform: scale(1.08) }
.ph > img { position: relative }
.js .ph img:not(.alt) { opacity: 0; transition: opacity .6s ease }
.js .ph img.is-loaded:not(.alt) { opacity: 1 }
.work .img.ph img.alt { z-index: 1 }
@media (prefers-reduced-motion: reduce) { .js .ph img:not(.alt) { transition: none } }

/* Square pairs (1:1) and embedded YouTube / Vimeo */
.gallery figure.sq img { aspect-ratio: 1 / 1; object-fit: cover }
.gallery figure.embed .embed-frame { position: relative; aspect-ratio: 16 / 9; background: var(--ink) }
.gallery figure.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }