/* Paper & Night — caoyixiao.com
   Paper (warm rice-paper white) carries the day pages; Night (blue-black) carries the stage.
   Qing (cobalt) is the one accent; zhu (vermilion) appears only in the seal. */
@font-face{font-family:"CY Song";src:url("/assets/fonts/cy-song.woff2") format("woff2");font-display:swap;unicode-range:U+3000-303F,U+3400-9FFF,U+F900-FAFF,U+FF00-FFEF,U+2014,U+2018-201D,U+00B7,U+2026}
:root{
  color-scheme:light;
  --paper:#faf5ee; --ink:#221d18; --grey:#6e6762; --rule:#e2d9cb;
  --night:#111721; --fog:#dbdee3; --fog2:#9aa3ae; --rule-n:#ffffff1f;
  --qing:#286099; --qing-ink:#1d4c7c; --zhu-n:#e87a65;
  --serif:Georgia,"Times New Roman","Noto Serif","DejaVu Serif","Songti SC","STSong","CY Song",serif;
  --zh:"Songti SC","STSong","CY Song","Noto Serif SC",Georgia,serif;
  --sans:system-ui,-apple-system,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;
  --pad:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;color:var(--ink);font:17px/1.7 var(--serif);background:var(--paper) url("/assets/img/paper.jpg") repeat;background-size:800px 800px}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
[id]{scroll-margin-top:12px}
main{flex:1 0 auto}
.lz{position:absolute;opacity:0;pointer-events:none}
:root:not(:has(#lz:checked)) [lang=zh-Hans]{display:none!important}
:root:has(#lz:checked) [lang=en]{display:none!important}
:root:has(#lz:checked) body{font-family:var(--zh)}
i.ti,.ti{font-style:italic}
.small{font:500 13px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase}
:root:has(#lz:checked) .small{font-size:14.5px;letter-spacing:.22em}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:12px;background:var(--paper);padding:6px 10px;z-index:9}
:focus-visible{outline:2px solid var(--qing);outline-offset:3px}

/* header */
header{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;padding:20px var(--pad);flex-wrap:wrap}
header.home{justify-content:flex-end}
.logo{font:500 15px var(--sans);letter-spacing:.42em;text-decoration:none;color:var(--ink);margin-right:auto}
nav{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap;align-items:center}
nav a{text-decoration:none;color:var(--ink);padding-bottom:2px;border-bottom:1px solid transparent}
nav a:hover,nav a[aria-current=page]{border-bottom-color:currentColor}
.lang{border:1px solid var(--rule);border-radius:99px;padding:3px 12px;font:500 13.5px var(--sans);cursor:pointer;white-space:nowrap}
.lang:hover{border-color:var(--ink)}
.mbtn{display:none;cursor:pointer;border-bottom:1px solid var(--ink);padding-bottom:2px}
#lz:focus-visible~header .lang,#mn:focus-visible~header .mbtn{outline:2px solid var(--qing);outline-offset:3px}
@media (max-width:760px){
  header,header.home{justify-content:space-between}
  .logo{order:0;margin-right:0;width:100%}
  .mbtn{display:block;order:1}.lang{order:2}
  nav{display:none;order:3;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:18px 0 6px;border-top:1px solid var(--rule)}
  :root:has(#mn:checked) nav{display:flex}
}

/* home name block */
.name{padding:clamp(36px,6vw,72px) var(--pad) clamp(24px,4vw,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.name h1{font:400 clamp(48px,9.5vw,124px)/.92 var(--serif);margin:0 0 0 -.055em;letter-spacing:-.015em}
.name .zh{font:400 clamp(18px,2.2vw,26px) var(--zh);letter-spacing:.55em;margin-top:16px;margin-left:calc(clamp(48px,9.5vw,124px) * .05)}
.name .role{font:italic 400 clamp(18px,2vw,23px) var(--serif);color:var(--grey)}
:root:has(#lz:checked) .name .role{font-style:normal;letter-spacing:.2em}

/* page title (inner pages) */
.ptitle{padding:clamp(40px,7vw,90px) var(--pad) clamp(28px,4vw,48px)}
.ptitle h1{font:400 clamp(40px,7vw,84px)/1 var(--serif);margin:.15em 0 0;letter-spacing:-.01em;text-wrap:balance}
:root:has(#lz:checked) .ptitle h1{font-family:var(--zh);letter-spacing:.12em}
.ptitle .small{color:var(--grey)}
.ptitle .lede{max-width:640px;margin:20px 0 0;color:var(--grey);font-size:19px}

/* hero */
.hero{position:relative;background:var(--night);margin:0}
.hero img{width:100%;aspect-ratio:16/9;object-fit:cover}
.cred{position:absolute;right:12px;bottom:8px;font:12.5px var(--sans);color:#ffffffb3;letter-spacing:.04em}
@media (max-width:760px){.hero img{aspect-ratio:4/5;object-position:50% 50%}}

/* next on stage */
.next{padding:clamp(28px,4vw,44px) var(--pad);border-bottom:1px solid var(--rule)}
.next .small{color:var(--grey)}
.next-g{display:grid;grid-template-columns:1.1fr 1.4fr auto;gap:clamp(16px,3vw,40px);align-items:end;margin-top:10px}
.nt{font:italic 400 clamp(30px,4vw,46px)/1.05 var(--serif)}
:root:has(#lz:checked) .nt{font:400 clamp(28px,3.6vw,40px)/1.2 var(--zh)}
.nr{font:italic 400 18px var(--serif);color:var(--grey);margin-top:6px}
:root:has(#lz:checked) .nr{font:400 16px var(--zh)}
.nm{font:15.5px/1.65 var(--sans);color:var(--grey)}
.tlink{font:500 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--qing);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;white-space:nowrap}
.tlink:hover{color:var(--ink)}
.night .tlink{color:#9bc1ed}.night .tlink:hover{color:#fff}
@media (max-width:760px){.next-g{grid-template-columns:1fr}.tlink{justify-self:start}}

/* poem */
.poem{text-align:center;padding:clamp(64px,9vw,120px) var(--pad)}
.poem .l1{display:flex;justify-content:center;align-items:center;font:400 clamp(28px,3.8vw,42px) var(--zh);letter-spacing:.32em;padding-left:.32em}
.poem .seal{display:block;height:.8em;width:auto;margin-left:.2em;transform:translateY(.065em)}
.poem .l2{font:italic 400 clamp(21px,2.5vw,28px) var(--serif);color:var(--grey);margin-top:8px}
.poem .by{margin-top:18px;color:var(--grey)}
.poem .by i{text-transform:none;letter-spacing:.04em}

/* night */
.night{background:var(--night);color:var(--fog);padding:clamp(64px,8vw,104px) var(--pad)}
.night .small{color:var(--fog2)}
.night h2{font:italic 400 clamp(40px,6vw,76px)/1.02 var(--serif);margin:.2em 0 .15em;color:#fff}
:root:has(#lz:checked) .night h2{font:400 clamp(36px,5vw,64px)/1.15 var(--zh);letter-spacing:.1em}
.night .meta{font:15.5px/1.65 var(--sans);color:var(--fog2)}
.mos{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;margin-top:40px}
.mos .r{display:grid;grid-template-rows:1fr 1fr;gap:10px;min-height:0}
.mos picture,.gal picture{display:block;height:100%}
.mos img{width:100%;height:100%;object-fit:cover}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:52px}
blockquote{margin:0;font:italic 400 clamp(21px,2.3vw,27px)/1.4 var(--serif)}
.night blockquote{color:#fff}
:root:has(#lz:checked) blockquote{font:400 clamp(19px,2vw,23px)/1.7 var(--zh)}
cite{display:block;font:normal 500 13px/1.6 var(--sans);letter-spacing:.12em;color:var(--fog2);margin-top:12px;text-transform:uppercase}
cite i{text-transform:none;letter-spacing:.04em}
.award{margin-top:46px;padding-top:20px;border-top:1px solid var(--rule-n);font:15.5px/1.6 var(--sans);color:var(--fog2);display:flex;gap:12px;align-items:baseline}
.award i.dot{width:8px;height:8px;border-radius:50%;background:var(--zhu-n);flex:none;transform:translateY(-1px)}
.more{margin-top:36px}
@media (max-width:760px){.mos{grid-template-columns:1fr}.mos .r{grid-template-columns:1fr 1fr;grid-template-rows:auto}.mos .r img{aspect-ratio:3/2;height:auto}.quotes{grid-template-columns:1fr}}

/* sections on paper */
.sec{padding:clamp(64px,8vw,104px) var(--pad)}
.sec.tight{padding-top:0}
.sec .small{color:var(--grey)}
.sec h2{font:400 clamp(30px,3.6vw,40px)/1.15 var(--serif);margin:.2em 0 28px}
:root:has(#lz:checked) .sec h2{font-family:var(--zh);letter-spacing:.2em}

/* roles list */
.row{display:grid;grid-template-columns:70px 1.5fr 1fr 1.3fr;gap:14px;align-items:baseline;padding:15px 0;border-top:1px solid var(--rule);font:16px/1.5 var(--sans)}
.rows .row:last-child{border-bottom:1px solid var(--rule)}
.row .y{font:400 21px var(--serif);font-variant-numeric:tabular-nums}
.row .t{font:400 21px/1.25 var(--serif)}
.row .t [lang=en]{font-style:italic}
:root:has(#lz:checked) .row .t{font-family:var(--zh);font-size:19px}
.row .c{color:var(--grey)}
.row a{text-decoration:none;border-bottom:1px solid var(--rule)}
.row a:hover{border-bottom-color:var(--ink)}
.up{font:500 11.5px var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--qing);border:1px solid currentColor;padding:1px 7px;margin-left:8px;vertical-align:3px;white-space:nowrap}
@media (max-width:760px){.row{grid-template-columns:50px 1fr;row-gap:2px}.row .v,.row .c{grid-column:2}}

/* simple dated list */
.dl{display:grid;grid-template-columns:110px 1fr;gap:0 18px;margin:0;max-width:860px}
.dl dt,.dl dd{padding:13px 0;border-top:1px solid var(--rule);margin:0}
.dl dt{font:400 18px var(--serif);font-variant-numeric:tabular-nums}
.dl dd{font:16px/1.6 var(--sans)}
:root:has(#lz:checked) .dl dd{font-size:16.5px}
.dl dd .c{color:var(--grey)}
@media (max-width:560px){.dl{grid-template-columns:1fr}.dl dd{border-top:0;padding-top:0}}

/* prose */
.prose{max-width:680px}
.prose p{font:400 clamp(18px,1.8vw,20px)/1.75 var(--serif);margin:0 0 1em}
:root:has(#lz:checked) .prose p{font-family:var(--zh);font-size:18px;line-height:1.95}

/* about split */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
.split.top{align-items:start}
.split .bio{font:400 clamp(18px,1.8vw,20px)/1.7 var(--serif);max-width:540px;margin:14px 0 22px}
:root:has(#lz:checked) .split .bio{font-family:var(--zh);font-size:18px;line-height:1.95}
.link{color:var(--qing);text-decoration:none;border-bottom:1px solid currentColor;font:15.5px var(--sans)}
.link:hover{color:var(--ink)}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:40px}
.gal figure{margin:0}
.gal img{width:100%;height:100%;object-fit:cover}
.gal .w4{grid-column:span 4}.gal .w2{grid-column:span 2}.gal .w3{grid-column:span 3}
.gal figcaption{font:13.5px/1.5 var(--sans);color:var(--fog2);margin-top:6px}
@media (max-width:760px){.gal{grid-template-columns:1fr}.gal .w4,.gal .w3,.gal .w2{grid-column:auto}}

/* credits */
.credits{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:28px 48px;margin-top:40px;font:16px/1.7 var(--sans)}
.credits h3{font:500 13px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--fog2);margin:0 0 8px}
.credits p{margin:0;color:var(--fog)}

/* press list */
.press{display:grid;gap:0;max-width:900px}
.press article{padding:26px 0;border-top:1px solid var(--rule)}
.press article:last-child{border-bottom:1px solid var(--rule)}
.press h3{font:italic 400 clamp(22px,2.4vw,28px)/1.3 var(--serif);margin:0 0 6px}
:root:has(#lz:checked) .press h3{font-style:normal}
.press .src{font:15px/1.6 var(--sans);color:var(--grey);margin:0 0 10px}
.press blockquote{font-size:clamp(19px,2vw,22px);margin:8px 0 12px}
.photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;max-width:900px}
.photos figure{margin:0}.photos figcaption{font:13px/1.6 var(--sans);color:var(--grey);margin-top:8px}

/* contact */
.mail{font:400 clamp(26px,4.4vw,52px)/1.2 var(--serif);word-break:break-all;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.mail:hover{border-bottom-color:var(--ink)}

footer{background:var(--night);color:var(--fog2);padding:44px var(--pad);display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;font:15px/1.7 var(--sans)}
footer b{color:#fff;font-weight:500;letter-spacing:.3em}
footer a{color:var(--fog)}
footer .fine{width:100%;font-size:13px;opacity:.8}