/* Ruoxi Ren — typography and proportions follow arambartholl.com (measured 2026-09-25):
   Helvetica Neue 16/23, .4px tracking, 24.5px bold name/titles, 25px column padding, 138px top offset. */
:root{
  --ink:#000;
  --link:#222;
  --mute:#767676;
  --line:#e6e6e6;
  --bg:#fff;
  --pad:25px;                 /* page padding; columns add another 25px each side */
  --top:138px;
  --ease:cubic-bezier(.22,.61,.24,1);
  --font:"Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:23px;letter-spacing:.4px;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
:lang(zh-CN) body,body:lang(zh-CN){letter-spacing:.6px}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--link);text-decoration:none}
p{margin:0;padding:0 0 23px}
h1,h2,h3{margin:0;font-weight:700}
ul{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;letter-spacing:inherit}
::selection{background:#000;color:#fff}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}

/* underline links (Aram: 1px solid #222 border, 2px gap in the nav) */
.content p a,.content li a,.is-a,.statement__text a,.article__body a{
  border-bottom:1px solid var(--link);transition:border-color .2s}
.content p a:hover,.content li a:hover,.is-a:hover{border-bottom-color:transparent}

/* ── header ─────────────────────────────────────────────────────────────── */
.head{
  position:fixed;top:0;left:0;right:0;z-index:20;
  padding:0 var(--pad);background:var(--bg);
}
.nav{display:flex;align-items:baseline;justify-content:space-between;height:62px;padding:0 var(--pad)}
.nav__name{font-size:24.5px;line-height:24.5px;font-weight:700;color:var(--ink);letter-spacing:.4px;padding-top:17px}
.nav__list{display:flex;flex:1;justify-content:space-between;align-items:baseline;padding-left:14%}
.nav__list a,.nav__list .is-current{font-size:16px;line-height:16px;padding-bottom:2px;color:var(--link);
  border-bottom:1px solid transparent;transition:border-color .2s}
.nav__list a:hover,.nav__list .is-current{border-bottom-color:var(--link)}
.nav__list .is-current{color:var(--ink)}
.nav__lang a,.nav__lang span{margin-left:6px}
.nav__lang a{color:var(--mute)}
.nav__lang a:hover{color:var(--ink)}

.content{padding:var(--top) var(--pad) 0;min-height:70vh}
.content::after{content:"";display:table;clear:both}
.foot{padding:92px calc(var(--pad)*2) 30px;font-size:13px;line-height:18px;color:var(--mute);clear:both}

/* ── grids (works index + journal): plain CSS grid, laid out by the browser before the first paint ── */
.masonry{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:start;--cols:3}
.masonry>*{display:block;min-width:0;padding:0 var(--pad) 46px}

/* works index */
.works{--cols:3}
.work{color:var(--ink)}
.work__img{display:block;aspect-ratio:3/2;overflow:hidden;margin-bottom:12px}
.work__img img{width:100%;height:100%;object-fit:cover}
.work__t{display:block;font-weight:700;font-style:italic}
/* edition homepage (V2): label + statement, then the three manifesto themes; theme heads and signature sit on the
   works grid — left third / right two thirds, so their text lines up with the first and second image columns */
.intro,.theme__head,.sig{display:grid;grid-template-columns:1fr 2fr;align-items:baseline}
.intro>*,.theme__head>*,.sig>*{padding:0 var(--pad);min-width:0}
.intro{padding-bottom:92px}
.intro__label{color:var(--mute);padding-bottom:18px}
.intro__text{font-size:24.5px;line-height:35px;max-width:30em;padding-bottom:0}
.theme{padding-bottom:30px;scroll-margin-top:72px}
.theme__head{padding:14px 0 30px;
  background:linear-gradient(var(--ink),var(--ink)) var(--pad) 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.theme__head h2{font-size:24.5px;line-height:30px;padding-bottom:8px}
.theme__head p{padding-bottom:0;max-width:40em}
.theme__line{color:var(--mute)}
.allworks{padding:10px var(--pad) 0;font-size:24.5px;line-height:30px;font-weight:700}
.allworks a{border-bottom:1px solid var(--ink)}
.sig{padding-top:92px;color:var(--mute)}
.work__en,.work__l{display:block}
.work__l{padding-top:6px;max-width:30em}
/* V2 type: a monospace voice for system text (label, numbers, dates); Helvetica for everything said */
.ed-v2{--mono:ui-monospace,"SF Mono",Menlo,Consolas,"PingFang SC",monospace}
.ed-v2 .intro__label,.ed-v2 .theme__num,.ed-v2 .work__m,.ed-v2 .sig{font-family:var(--mono);font-size:13px;letter-spacing:0}
.ed-v2 .theme__num{color:var(--ink);line-height:30px}
.ed-v2 .theme__num:lang(en){text-transform:uppercase}
.ed-v2 .work__m{color:var(--mute);padding-top:2px}
.ed-v2 .work__en{font-style:italic}
.nav__zh{padding-left:4px}
.about__lead{padding-bottom:12px;margin-bottom:23px;border-bottom:1px solid var(--line)}
.about__lead p{font-size:19px;line-height:29px}
/* homepage options (2026-10-02) — sub-groups, project rows, question intro */
.theme__sub{padding:8px var(--pad) 16px;color:var(--mute)}
.works--small{--cols:4}
.works--small .work__l{color:var(--mute);font-size:14px;line-height:20px}
.draft{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid var(--mute);color:var(--mute);font-size:11px;line-height:16px;text-transform:none}
.ed-v2 .theme__sub{font-family:var(--mono);font-size:13px;letter-spacing:0}
.theme__sub--more{padding-top:20px;margin-top:10px;
  background:linear-gradient(var(--ink),var(--ink)) var(--pad) 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.proj{display:grid;grid-template-columns:2fr 1fr;align-items:start;color:var(--ink);padding-bottom:69px}
.proj>*{padding:0 var(--pad);min-width:0}
.proj__img{display:block}
.proj__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.proj__info>span{display:block}
.proj__t{font-size:24.5px;line-height:30px;font-weight:700;font-style:italic;padding-bottom:4px}
:lang(zh-CN) .proj__t{font-style:normal}
.proj__en{font-style:italic;padding-bottom:4px}
.proj__m{color:var(--mute);padding:6px 0 16px}
.ed-v2 .proj__m{font-family:var(--mono);font-size:13px;letter-spacing:0}
.proj__with{color:var(--mute)}
.proj__l{padding-top:16px;max-width:24em}
.proj:hover .proj__t{text-decoration:underline;text-underline-offset:4px}
.intro__q{font-size:34px;line-height:42px;font-weight:700;letter-spacing:-.2px;max-width:20em;padding-bottom:23px}
:lang(zh-CN) .intro__q{letter-spacing:1px;line-height:50px}
.intro--q .intro__text{font-size:19px;line-height:29px;color:var(--mute)}
.ed-o4 .theme__head h2,.ed-o5 .theme__head h2{font-weight:400;line-height:33px;max-width:26em}
.proj__role{padding-top:4px}
/* option 5: one typeface, three levels — the opening sentence, the work titles, everything else small */
.ed-o5 .intro__label,.ed-o5 .theme__num,.ed-o5 .theme__sub,.ed-o5 .proj__m,.ed-o5 .work__m,.ed-o5 .sig,.ed-o5 .mfo__num{
  font-family:var(--font);letter-spacing:.4px;text-transform:none}
.ed-o5 .intro{padding-bottom:69px}
.ed-o5 .theme__num:lang(en),.ed-o5 .mfo__num:lang(en){text-transform:none}
.ed-o5 .intro__label{font-size:14px;line-height:20px;padding-top:9px}
.ed-o5 .intro__text{font-size:28px;line-height:38px;max-width:24em}
.ed-o5 .theme__head{padding:12px 0 34px}
.ed-o5 .theme__num{font-size:16px;line-height:23px;font-weight:700;color:var(--ink)}
.ed-o5 .theme__head h2{font-size:16px;line-height:23px;font-weight:400;color:var(--mute);max-width:36em}
.ed-o5 .proj__m,.ed-o5 .work__m{font-size:16px;line-height:23px}
.ed-o5 .proj__t{font-size:22px;line-height:28px}
.ed-o5 .proj__m{padding:4px 0 12px}
.ed-o5 .proj__l{padding-top:12px}
.ed-o5 .theme__head{padding:12px 0 28px}
.intro__sub{color:var(--mute);padding:14px 0 0}
.theme__head--side>div{grid-column:1}
.theme__side{padding:8px 0 0;max-width:24em}
/* option 5 layouts A / B / C */
.t-a .intro{display:block;padding:24px var(--pad) 96px}
.t-a .intro>*{padding:0}
.t-a .intro__label{display:none}
.t-a .intro__text{font-size:52px;line-height:60px;letter-spacing:-.6px;max-width:19em}
.t-a .intro__sub{font-size:19px;line-height:27px;padding-top:22px}
:lang(zh-CN) .t-a .intro__text{letter-spacing:1px;line-height:72px;max-width:17em}
.t-b .intro{grid-template-columns:2fr 1fr}
.t-b .intro__label{display:none}
.t-b .intro>div{grid-column:1}
.t-b .intro__text{font-size:38px;line-height:46px;max-width:none;letter-spacing:-.3px}
:lang(zh-CN) .t-b .intro__text{letter-spacing:.5px;line-height:56px}
.t-b .theme__head--side{grid-template-columns:2fr 1fr}
.t-b .theme__head--side>div{grid-column:2}
.t-c .intro__text{font-size:38px;line-height:46px;letter-spacing:-.3px}
:lang(zh-CN) .t-c .intro__text{letter-spacing:.5px;line-height:56px}
.toc{padding:0 var(--pad) 92px;margin:0;list-style:none}
.toc li{border-top:1px solid var(--line)}
.toc li:last-child{border-bottom:1px solid var(--line)}
.toc a{display:grid;grid-template-columns:1fr 2fr;padding:12px 0;color:var(--ink)}
.toc a:hover .toc__v{color:var(--ink)}
.toc__k{font-weight:700;padding-right:var(--pad)}
.toc__v{color:var(--mute);padding-left:var(--pad);max-width:40em}
.ed-o5 .sig{font-size:14px}
.proj__role--todo{display:inline-block!important;margin-top:8px;padding:1px 6px;border:1px dashed var(--mute);color:var(--mute);font-size:13px}
.mfos{max-width:44em;padding-top:23px}
.mfos h2{font-size:16px;padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.mfo{padding-bottom:28px}
.mfo__num{color:var(--mute);padding-bottom:6px}
.ed-v2 .mfo__num{font-family:var(--mono);font-size:13px;letter-spacing:0}
.ed-v2 .mfo__num:lang(en){text-transform:uppercase}
.mfo__line{font-size:19px;line-height:27px;font-weight:700;padding-bottom:8px}
.mfo__text{padding-bottom:0}
:lang(zh-CN) .work__t{font-style:normal}
.work__m{display:block}

/* ── work page (single piece) ────────────────────────────────────────────── */
.pics{float:left;width:66.6667%;padding:0 var(--pad)}
.pics--rest{clear:left}
.info{float:right;width:33.3333%;padding:0 var(--pad)}
.pic{margin:0 0 23px}
.pic img,.pic video{width:100%}
.pic video{height:auto;background:#000}
.pic figcaption{font-size:13px;line-height:18px;color:var(--mute);padding-top:8px}
.pic figcaption em{font-style:normal;color:var(--ink)}
.info h1{font-size:24.5px;line-height:28px;font-style:italic;padding-bottom:23px}
:lang(zh-CN) .info h1{font-style:normal}
.info__meta p{padding-bottom:0}
.info__meta{padding-bottom:23px}
.info__meta .nft{padding-top:23px;word-break:break-all}
.subworks{padding-top:23px}
.info__small{padding-top:23px;font-size:13px;line-height:19px;color:var(--mute)}
.info__small p{padding-bottom:0}
.info__small a{color:var(--mute)}
.subworks__h{padding-bottom:0}
.subworks li a{border-bottom:1px solid var(--link)}
.pic--link figcaption a{color:var(--ink)}
.pic--link figcaption a:hover em{text-decoration:underline;text-underline-offset:3px}
.statement__text{display:none}
.statement__text p{max-width:46em}
.read-less{display:none}

@media (min-width:1100px){
  .is-piece .pic img{cursor:zoom-in;transition:opacity .2s}
  .is-piece .pic img:hover{opacity:.9}
  .is-piece .pic--link img{cursor:pointer}
  /* Read statement: images step back to one third, the text takes two thirds */
  .is-statementview .pics{width:33.3333%}
  .is-statementview .info{width:66.6667%;cursor:pointer}
  .is-statementview .info a,.is-statementview .info button{cursor:pointer}
  .is-statementview .statement__text{display:block;cursor:auto}
  .is-statementview .read-more{display:none}
  .is-statementview .read-less{display:block}
  /* Click an image: full-bleed image view, click again to return */
  .is-imageview .content{padding-left:0;padding-right:0}
  .is-imageview .pics{width:100%;padding:0}
  .is-imageview .info{display:none}
  .is-imageview .pic{margin-bottom:23px}
  .is-imageview .pic img{cursor:zoom-out}
  .is-imageview .pic figcaption{padding-left:calc(var(--pad)*2)}
}

/* ── journal ─────────────────────────────────────────────────────────────── */
.journal__intro{width:66.6667%;padding:0 var(--pad) 69px;max-width:52em}
.entries{--cols:4}
.jgroup{padding-bottom:23px}
.jgroup__h{font-size:16px;line-height:23px;margin:0 var(--pad) 23px;padding-top:12px;border-top:1px solid var(--ink)}
.article__orig{padding-top:23px}
.article__orig a{border-bottom:1px solid var(--link)}
.article__orig span{color:var(--mute);font-size:14px}
.entry{color:var(--ink)}
.entry__img{display:block;margin-bottom:14px;overflow:hidden}
.entry__img img{width:100%}
.entry__t{display:block;font-weight:700;padding-bottom:8px}
.entry__m{display:block;color:var(--mute);padding-bottom:12px}
.entry__a{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;max-height:115px}
.entry__more{display:inline-block;margin-top:14px;border-bottom:1px solid var(--link)}
.entry:hover .entry__more{border-bottom-color:transparent}
/* entries without a picture get a typographic cover, so every card reads the same way */
.entry__type{display:flex;align-items:flex-end;aspect-ratio:4/3;padding:18px 20px;background:#f2f2f0;
  font-size:24.5px;line-height:29px;font-weight:700}

/* article: meta column left (1/3, stays in view), reading column right (2/3) */
.article{display:grid;grid-template-columns:1fr 2fr;align-items:start}
.article>*{padding:0 var(--pad)}
.article__side{position:sticky;top:92px}
.article__back{padding-bottom:46px}
.article__cover{margin:0 0 46px}
.article__cover img{width:100%}
.article__back a{color:var(--mute)}
.article__back a:hover{color:var(--ink)}
.article__kind{color:var(--mute)}
.article__side h1{font-size:24.5px;line-height:30px;padding-bottom:12px}
.article__alt{color:var(--mute)}
.article__abstract{font-size:19px;line-height:29px;max-width:34em;padding-bottom:34px;margin-bottom:34px;border-bottom:1px solid var(--line)}
.article__body{font-size:18px;line-height:30px;max-width:36em}
.article__body p{padding-bottom:24px}
.article__body h3{font-size:18px;padding:12px 0 12px}
.article__body blockquote{margin:0 0 24px;padding-left:20px;border-left:2px solid var(--ink)}
.article__body ul{padding:0 0 24px 1.1em;list-style:disc}
.article__figs{max-width:48em;padding-top:12px}
.article__fig{margin:0 0 34px}
.article__fig img{width:auto;max-width:100%;max-height:82vh}
.article__fig figcaption{font-size:13px;line-height:18px;color:var(--mute);padding-top:8px}
.article__src{max-width:36em;padding-top:23px;margin-top:23px;border-top:1px solid var(--line);font-size:14px;line-height:21px}
.article__src h2{font-size:14px;padding-bottom:10px}
.article__src li{padding-bottom:8px;overflow-wrap:anywhere}
.article__pn{display:flex;justify-content:space-between;gap:30px;max-width:36em;padding-top:46px}
.pn{display:block;max-width:48%;color:var(--ink)}
.pn span{display:block;color:var(--mute);font-size:13px}
.pn--next{text-align:right;margin-left:auto}
.pn:hover{text-decoration:underline;text-underline-offset:3px}

/* ── info page ───────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1fr 2fr;align-items:start}
.about>*{padding:0 var(--pad)}
.about__pic{position:sticky;top:92px}
.about__bio{max-width:40em}
.about__links{padding-bottom:23px}
.cv{max-width:44em;padding-top:23px}
.cv__sec{padding-bottom:46px}
.cv__sec h2{font-size:16px;padding-bottom:12px;border-bottom:1px solid var(--ink);margin-bottom:12px}
.cv__sec li strong{display:inline-block;padding-top:12px}
.cv__sec li:first-child strong{padding-top:0}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.nf{padding:0 var(--pad)}
.nf h1{font-size:24.5px;padding-bottom:23px}

/* ── medium: 768–1099 ───────────────────────────────────────────────────── */
@media (max-width:1099px){
  .works{--cols:2}
  .entries{--cols:2}
  .pics,.info{float:none;width:100%}
  .info{padding-bottom:23px}
  .statement.is-open .statement__text{display:block}
  .statement.is-open .read-more{display:none}
  .statement.is-open .read-less{display:block}
  .journal__intro{width:100%}
  .intro,.theme__head,.sig{grid-template-columns:1fr}
  .ed-v2 .theme__num{line-height:23px;padding-bottom:6px}
  .proj{grid-template-columns:1fr}
  .ed-o5 .intro__text{font-size:22px;line-height:31px}
  .t-a .intro__text{font-size:30px;line-height:37px}
  :lang(zh-CN) .t-a .intro__text{line-height:44px}
  .t-b .intro,.t-b .theme__head--side{grid-template-columns:1fr}
  .t-b .intro>div,.t-b .theme__head--side>div{grid-column:1}
  .t-b .intro__text,.t-c .intro__text{font-size:26px;line-height:33px}
  :lang(zh-CN) .t-b .intro__text,:lang(zh-CN) .t-c .intro__text{line-height:40px}
  .toc a{grid-template-columns:1fr}
  .toc__v{padding:4px 0 0}
  .theme__side{max-width:none}
  .proj__info{padding-top:14px}
  .intro__q{font-size:26px;line-height:33px}
  :lang(zh-CN) .intro__q{line-height:40px}
  .intro__text{font-size:20px;line-height:30px}
  .theme__head h2{font-size:20px;line-height:26px}
  .article,.about{grid-template-columns:1fr}
  .article__side,.about__pic{position:static}
  .article__back{padding-bottom:23px}
  .about__pic{max-width:420px;padding-bottom:34px}
}
/* ── small: < 768 — name on its own line, nav underneath ─────────────────── */
@media (max-width:767px){
  :root{--pad:12px;--top:118px}
  .nav{flex-wrap:wrap;height:auto;padding:14px var(--pad) 12px}
  .nav__name{width:100%;padding:0 0 14px}
  .nav__list{justify-content:flex-start;gap:22px;padding-left:0}
  .masonry>*{padding-bottom:36px}
  .article__body{font-size:17px;line-height:28px}
  .article__abstract{font-size:18px;line-height:27px}
}
@media (max-width:479px){
  .works,.entries{--cols:1}
}

/* ═══ Design system (2026-10-02) ══════════════════════════════════════════════════════════════════
   After e-flux and ArtReview (measured): Neue Haas Unica/Helvetica family; text #101010 not black;
   secondary #404040, meta #808080; hairlines #e6e6e6; 30px gutters and page margins (2 × --pad);
   size carries the hierarchy, weight only marks small labels; no extra letter-spacing.
   Scoped to .ds so earlier editions keep their look.
   Scale (px): 13 meta · 16 body · 20 lead · 28 title · 40 statement   Spacing: 8 · 16 · 24 · 32 · 48 · 64 · 96   */
.ds{
  --ink:#101010; --ink-2:#404040; --mute:#808080; --line:#e6e6e6; --link:#101010; --bg:#fff;
  --pad:15px;
  --fs-meta:13px; --lh-meta:18px; --fs-body:16px; --lh-body:24px; --fs-lead:20px; --lh-lead:28px;
  --fs-title:28px; --lh-title:32px; --fs-statement:40px; --lh-statement:46px;
  --gap-row:64px; --gap-tile:48px;
  color:var(--ink);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0;
}
.ds :lang(zh-CN),.ds:lang(zh-CN){letter-spacing:.02em}
.ds p{padding-bottom:var(--lh-body)}
/* header */
.ds .nav__name{font-size:22px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.ds .nav__list a,.ds .nav__list .is-current{font-size:var(--fs-body);color:var(--ink)}
.ds .nav__lang a{color:var(--mute)}
.ds .foot{color:var(--mute);font-size:var(--fs-meta);padding-left:calc(var(--pad)*2)}
/* opening statement */
.ds .intro{padding-bottom:96px}
.ds .intro__text{font-size:var(--fs-statement);line-height:var(--lh-statement);font-weight:400;letter-spacing:-.015em;color:var(--ink)}
.ds:lang(zh-CN) .intro__text,.ds .intro__text:lang(zh-CN){letter-spacing:.02em;line-height:58px}
.ds .intro__sub{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);padding-top:16px;letter-spacing:.02em}
/* section heads: a hairline, a small label, a side note in secondary grey */
.ds .theme{padding-bottom:var(--gap-row)}
.ds .theme__head{padding:16px 0 32px;
  background:linear-gradient(var(--line),var(--line)) var(--pad) 0/calc(100% - 2*var(--pad)) 1px no-repeat}
.ds .theme__num{font-size:var(--fs-meta);line-height:var(--lh-meta);font-weight:600;color:var(--ink);letter-spacing:.02em}
.ds .theme__side{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);padding-top:8px}
/* project rows: picture, then title by size (regular weight), meta in grey */
.ds .proj{padding-bottom:var(--gap-row)}
.ds .proj__t{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:400;letter-spacing:-.01em;padding-bottom:6px}
.ds .proj__en{font-size:var(--fs-body);color:var(--ink-2)}
.ds .proj__m{font-family:var(--font);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);padding:4px 0 16px;letter-spacing:.02em}
.ds .proj__w{color:var(--ink)}
.ds .proj__with{color:var(--mute)}
.ds .proj__l{color:var(--ink-2);padding-top:16px}
.ds .proj:hover .proj__t{text-decoration:none;color:var(--ink-2)}
/* tiles (earlier works, works page) */
.ds .masonry>*{padding-bottom:var(--gap-tile)}
.ds .work__img{margin-bottom:12px}
.ds .work__t{font-weight:400;font-size:var(--fs-body);line-height:22px}
.ds .work__en{color:var(--ink-2)}
.ds .work__m{font-family:var(--font);font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);letter-spacing:.02em}
.ds .work__l{color:var(--ink-2)}
.ds .allworks{font-size:var(--fs-lead);line-height:var(--lh-lead);font-weight:400}
.ds .allworks a{border-bottom:1px solid var(--ink)}
.ds .sig{font-family:var(--font);font-size:var(--fs-meta);color:var(--mute);letter-spacing:.02em}
/* work pages */
.ds .info h1{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:400;letter-spacing:-.01em}
.ds .info__small{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute)}
.ds .pic figcaption{font-size:var(--fs-meta);color:var(--mute)}
.ds .pics--lead .pic,.ds .pic{margin-bottom:30px}
/* journal and info */
.ds .jgroup__h{font-size:var(--fs-meta);font-weight:600;border-top-color:var(--line);letter-spacing:.02em}
.ds .entry__t{font-weight:400;font-size:var(--fs-lead);line-height:var(--lh-lead)}
.ds .entry__m{font-size:var(--fs-meta);color:var(--mute)}
.ds .entry__a{color:var(--ink-2)}
.ds .article__side h1{font-size:var(--fs-title);line-height:var(--lh-title);font-weight:400}
.ds .article__abstract{border-bottom-color:var(--line);color:var(--ink-2)}
.ds .cv__sec h2{font-size:var(--fs-meta);font-weight:600;border-bottom-color:var(--line);letter-spacing:.02em}
@media (max-width:1099px){
  .ds{--fs-statement:30px;--lh-statement:37px;--fs-title:24px;--lh-title:29px;--gap-row:48px}
  .ds:lang(zh-CN) .intro__text,.ds .intro__text:lang(zh-CN){line-height:44px}
}
@media (max-width:767px){
  .ds{--pad:12px;--fs-statement:26px;--lh-statement:33px;--fs-title:22px;--lh-title:27px}
  .ds:lang(zh-CN) .intro__text,.ds .intro__text:lang(zh-CN){line-height:40px}
}

/* design system · layout B, rail version (2026-10-02): first picture on arrival; three layers per work */
.ds .content{padding-top:112px}
.ds .intro{padding-bottom:56px}
.ds .intro__sub{padding-top:14px}
.ds .theme__rule{height:1px;background:var(--line);margin:0 var(--pad) 24px}
.ds .proj{display:grid;grid-template-columns:2fr 1fr;align-items:start;padding-bottom:var(--gap-row)}
.ds .proj__img{display:block}
.ds .proj__lead{padding-bottom:40px}
.ds .proj__lead .theme__num{padding-bottom:6px}
.ds .proj__lead .theme__side{padding:0;color:var(--ink-2)}
.ds a.proj__t{display:block;color:var(--ink);border:0;padding-bottom:0}
.ds a.proj__t:hover{color:var(--ink-2)}
.ds .proj__info .proj__en{display:block;padding-top:4px}
.ds p.proj__l{padding:12px 0 0;color:var(--ink);max-width:26em}
.ds p.proj__cap{padding:16px 0 0;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);letter-spacing:.02em}
.ds .proj__img img{transition:none}
@media (max-width:1099px){
  .ds .proj{grid-template-columns:1fr}
  .ds .proj__info{display:contents}
  .ds .proj__info>*{padding-left:var(--pad);padding-right:var(--pad)}
  .ds .proj__lead{order:-1;padding-bottom:16px}
  .ds .proj__img{order:0;margin-bottom:16px}
  .ds .proj__info>*:not(.proj__lead){order:1}
}

/* five layouts of the homepage text column (2026-10-04) — all on top of .ds */
/* 1 安静题注: the section sentence drops to caption size, the title leads the column */
.lay-rail-quiet .proj__lead{padding-bottom:28px}
.lay-rail-quiet .proj__lead .theme__side{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);max-width:30em;padding-top:2px}
/* bands (layouts 2-4): the section head is a row of its own */
.ds .band{display:grid;grid-template-columns:2fr 1fr;align-items:start;padding-bottom:40px}
.ds .band>*{padding:0 var(--pad);min-width:0}
.ds .band p{padding-bottom:0}
/* 2 引言放左栏: the sentence large over the picture column, the label on the right */
.band--quote .band__b{grid-column:1;grid-row:1}
.band--quote .band__a{grid-column:2;grid-row:1}
.band--quote .theme__side{font-size:28px;line-height:36px;color:var(--ink);letter-spacing:-.01em;max-width:22em}
:lang(zh-CN) .band--quote .theme__side{letter-spacing:.02em;line-height:44px}
/* 3 e-flux 卡片: one quiet line for the section; works read kicker → title → venue → line */
.band--eflux{grid-template-columns:1fr!important}
.band--eflux .theme__side{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);max-width:60em;padding-top:4px}
.lay-eflux p.proj__kick{font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute);padding:0 0 10px;letter-spacing:.02em}
.lay-eflux a.proj__t{font-size:30px;line-height:34px;font-style:normal;letter-spacing:-.015em}
.lay-eflux p.proj__venue{font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink);padding:10px 0 0}
.lay-eflux p.proj__l{color:var(--ink-2);padding-top:12px}
.lay-eflux p.proj__cap{padding-top:12px}
/* 4 大标题: the section name set large across the page, its sentence underneath */
.band--big{grid-template-columns:1fr!important;padding-bottom:48px!important}
.band--big .theme__num{font-size:64px;line-height:68px;font-weight:400;letter-spacing:-.025em}
.band--big .theme__side{max-width:40em;padding-top:16px;color:var(--ink-2)}
:lang(zh-CN) .band--big .theme__num{letter-spacing:.02em;line-height:80px}
/* 5 文字放图下: wall labels under the pictures; the section head stays in view on the right */
.ds .sec5{display:grid;grid-template-columns:2fr 1fr;align-items:start;padding-bottom:var(--gap-row)}
.ds .sec5>*{padding:0 var(--pad);min-width:0}
.ds .sec5__head{position:sticky;top:96px}
.ds .sec5__head .theme__num{padding-bottom:8px}
.ds .sec5__head .theme__side{color:var(--ink-2);padding:0}
.ds .wu{padding-bottom:var(--gap-row)}
.ds .wu__img{display:block}
.ds .wu__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ds .wu__text{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;padding-top:16px}
.ds .wu__text p{padding-bottom:0}
.lay-under a.proj__t{font-size:22px;line-height:28px}
.lay-under p.proj__l{padding-top:0}
.lay-under p.proj__cap{padding-top:10px;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--mute)}
@media (max-width:1099px){
  .ds .band,.ds .sec5{grid-template-columns:1fr}
  .band--quote .band__b,.band--quote .band__a{grid-column:1}
  .band--quote .band__a{grid-row:1}.band--quote .band__b{grid-row:2;padding-top:8px}
  .band--quote .theme__side{font-size:22px;line-height:30px}
  .band--big .theme__num{font-size:40px;line-height:44px}
  .ds .sec5__head{position:static;order:-1;padding-bottom:24px}
  .ds .wu__text{grid-template-columns:1fr}
}

/* layout 5, second round (2026-10-04): larger section titles, media list beside the opening, lighter labels */
.lay-under2 .intro--aside{display:grid;grid-template-columns:2fr 1fr;align-items:start}
.lay-under2 .intro--aside>*{padding:0 var(--pad)}
.lay-under2 .intro__media{padding-top:10px}
.lay-under2 .intro__media li{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2)}
.lay-under2 .sec5__head .theme__num{font-size:24px;line-height:30px;font-weight:400;letter-spacing:-.01em;color:var(--ink);padding-bottom:14px}
:lang(zh-CN) .lay-under2 .sec5__head .theme__num{letter-spacing:.02em}
.lay-under2 .sec5__head .theme__side{font-size:var(--fs-body);line-height:27px;max-width:21em;color:var(--ink-2)}
.lay-under2 .wu__text{align-items:baseline;padding-top:14px}
.lay-under2 .wu--min .proj__cap,.lay-under2 .wu--kind .proj__cap,.lay-under2 .wu--site .proj__cap{padding-top:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--mute);letter-spacing:0}
.lay-under2 .wu--line-year .proj__cap{padding-top:6px}
@media (max-width:1099px){
  .lay-under2 .intro--aside{grid-template-columns:1fr}
  .lay-under2 .intro__media{display:flex;flex-wrap:wrap;gap:0 14px;padding-top:16px}
  .lay-under2 .wu__text{grid-template-columns:1fr;row-gap:4px}
}

/* ── Third round on layout 5: one borrowing from each surveyed artist site (2026-10-04) ─────────── */
/* 参考1 Ian Cheng — a row of the six selected works first, titles under them; the sentence after */
.ref-cheng .strip{display:grid;grid-template-columns:repeat(6,1fr);column-gap:calc(var(--pad)*2);padding:0 var(--pad) 56px}
.ref-cheng .strip a{display:block;color:var(--ink);border:0}
.ref-cheng .strip__img{display:block;margin-bottom:10px}
.ref-cheng .strip__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ref-cheng .strip__t{display:block;font-size:var(--fs-meta);line-height:var(--lh-meta);color:var(--ink)}
.ref-cheng .strip a:hover .strip__t{color:var(--mute)}
.ref-cheng .wu{scroll-margin-top:96px}
/* 参考2 Theo Triantafyllidis — the media line becomes a tag beside the name; the opening is one sentence across */
.ref-theo .nav__tag{font-size:var(--fs-body);line-height:24px;color:var(--ink-2);padding-left:18px;white-space:nowrap}
@media (min-width:1100px){.ref-theo .nav__list{padding-left:8%}}
.ref-theo .intro--solo{grid-template-columns:1fr}
.ref-theo .intro--solo .intro__text{max-width:20em}
.ref-theo .intro__tag{display:none}
/* 参考3 Lawrence Lek — only the title under each picture; in the right column the sentence leads and the label steps back */
.ref-lek .sec5__head .theme__num{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink);padding-bottom:10px}
.ref-lek .sec5__head .theme__side{font-size:24px;line-height:32px;color:var(--ink);max-width:14em;letter-spacing:-.01em}
.ref-lek .wu--title .wu__text{grid-template-columns:1fr}
/* 参考4 刘雨佳 / 方迪 — both languages together; the second language one step quieter, same size */
.ref-bi .alt{display:block;color:var(--ink-2)}
.ref-bi .sec5__head .theme__num .alt{padding-top:2px}
.ref-bi .theme__head--side .theme__num .alt{display:inline;padding-left:10px}
.ref-bi .intro__media li .alt{display:inline;padding-left:10px;color:var(--mute)}
.ref-bi .wu .proj__en{display:block;padding-top:4px;font-size:var(--fs-body);color:var(--ink-2)}
.ref-bi [lang=zh-CN]{font-style:normal}
.ref-bi .wu--bi .proj__cap{padding-top:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--mute);letter-spacing:0}
/* 参考5 Jakob Kudsk Steensen + Stephanie Dinkins — pictures take three quarters; one sentence under each */
.ref-wide .sec5,.ref-wide .intro--aside{grid-template-columns:3fr 1fr}
.ref-wide .sec5__head .theme__num{font-size:28px;line-height:34px}
.ref-wide .wu__text{grid-template-columns:1fr 1.4fr}
@media (max-width:1099px){
  .ref-cheng .strip{grid-template-columns:repeat(3,1fr);row-gap:20px;padding-bottom:40px}
  .ref-theo .nav__tag{display:none}
  .ref-theo .intro__tag{display:block;color:var(--ink-2);padding-bottom:12px}
  .ref-wide .sec5,.ref-wide .intro--aside{grid-template-columns:1fr}
}
/* 新排版6: year on the title line (between 8812 and 8815) */
.lay-under2 .wu--line-tyear a.proj__t{display:inline}
.lay-under2 .wu--line-tyear .proj__yr{padding-left:12px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);white-space:nowrap}
.lay-under2 .wu--line-tyear .proj__en{display:block}
/* 新排版7/8: the media line back under the opening sentence, one step lighter than #808080 */
.sub-light .intro__sub{color:#999}
/* 首页定稿: the media line at body size, one step lighter than body text */
.sub-body .intro__sub{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--mute);letter-spacing:0;padding-top:18px}