/* Jiafan Weng — v2. Minimal, photo-first. Full-colour photos on paper. */
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/BricolageGrotesque-Variable.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}

:root{
  --paper:#F3F1EC;
  --ink:#1B1B19;
  --muted:#6F6C64;
  --line:rgba(27,27,25,.14);
  --tile:#E4E1DA;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Bricolage Grotesque",system-ui,-apple-system,"PingFang HK","Noto Sans TC",sans-serif;
  --g:clamp(16px,2vw,28px);
  --hh:64px;
  --fh:42px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:12px;line-height:1.45;letter-spacing:.005em;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
a:hover{color:var(--ink)}
img{display:block;width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.m{color:var(--muted)}
.lnk{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease)}
.lnk:hover,.lnk[aria-current="page"]{background-size:100% 1px}

/* ---------- header: nav with live thumbnails, contact icons right ---------- */
.hd{position:fixed;inset:0 0 auto;z-index:40;height:var(--hh);display:flex;justify-content:space-between;align-items:center;gap:var(--g);padding:0 var(--g);padding-top:env(safe-area-inset-top);background:var(--paper)}
.nav{display:flex;align-items:center;gap:22px}
.nav a{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-size:22px;line-height:1;transition:opacity .25s}
.nav a[aria-current="page"] .lt{font-style:italic}
.nav:hover a:not(:hover){opacity:.4}
.nav .th{width:32px;height:32px;flex:none;overflow:hidden;background:var(--tile);position:relative}
.nav .th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.nav .th.r{border-radius:50%}
.nav .hm{font-family:var(--sans);font-size:12px;margin-right:4px}
.ct{display:flex;gap:8px}
.ct a{width:36px;height:36px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;transition:background .25s,color .25s}
.ct a:hover{background:var(--ink);color:var(--paper)}
.ct svg{width:17px;height:17px}
.home .hd{background:none}
@media (max-width:760px){
  :root{--hh:56px}
  .nav{gap:14px}
  .nav a{font-size:19px;gap:7px}
  .nav .th{width:28px;height:28px}
  .nav .hm{display:none}
}

/* ---------- landing ---------- */
.land{height:100vh;height:100svh;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.strip{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;padding-top:calc(var(--hh) + 12px)}
.strip.drag{cursor:grabbing}
.strip .track{display:flex;align-items:flex-start;gap:clamp(10px,1.4vw,20px);height:100%;width:max-content;will-change:transform}
.it{flex:none;display:flex;flex-direction:column;gap:6px;margin-top:var(--y);height:calc(var(--h) * 1%)}
.it .lb{display:flex;justify-content:space-between;gap:12px;white-space:nowrap;opacity:0;transition:opacity .3s}
.it:hover .lb,.it:focus-visible .lb{opacity:1}
.it .ph{flex:1;min-height:0;overflow:hidden;background:var(--tile)}
.it img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s,opacity .5s}
.it:hover img{transform:scale(1.025)}
.strip:hover .it:not(:hover) img{filter:grayscale(.85) contrast(.9);opacity:.85}
.bio{margin:0;padding:22px var(--g) max(22px,env(safe-area-inset-bottom));font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.3vw,82px);line-height:1.12;letter-spacing:-.018em;text-wrap:balance}
.bio .nm{font-size:1.7em;letter-spacing:-.03em;line-height:1}
.bio .cn{font-size:.5em;letter-spacing:0;vertical-align:.18em}
.bio em{font-style:italic}
.bio .sm{font-family:var(--sans);font-size:max(12px,.3em);letter-spacing:.06em;text-transform:uppercase;vertical-align:.5em}
@media (max-width:760px){
  .bio{font-size:8.4vw}
}

/* ---------- projects ---------- */
.idx{padding:var(--hh) var(--g) 120px}
.filter{position:sticky;top:var(--hh);z-index:30;height:var(--fh);display:flex;align-items:center;gap:4px 22px;background:var(--paper);border-bottom:1px solid var(--ink);white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.filter::-webkit-scrollbar{display:none}
.filter button{font-size:13px;opacity:.4;transition:opacity .25s;min-height:36px}
.filter button:hover,.filter button[aria-pressed="true"]{opacity:1}
.wrap{display:grid;grid-template-columns:minmax(170px,1fr) minmax(0,5fr);gap:clamp(36px,4.5vw,72px)}
.toc{position:sticky;top:calc(var(--hh) + var(--fh));align-self:start;max-height:calc(100svh - var(--hh) - var(--fh));overflow-y:auto;scrollbar-width:none;padding:16px 0 24px;display:flex;flex-direction:column}
.toc::-webkit-scrollbar{display:none}
.toc a{display:flex;justify-content:space-between;gap:10px;padding:3px 0;opacity:.4;transition:opacity .25s}
.toc a span:last-child{flex:none}
.toc a:hover,.toc a.on{opacity:1}
.toc a.on span:first-child{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.05}
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,4fr);gap:var(--g);padding:16px 0 72px;border-bottom:1px solid var(--line)}
.proj:last-child{border-bottom:0}
.proj .meta{position:sticky;top:calc(var(--hh) + var(--fh) + 16px);align-self:start;display:flex;flex-direction:column;gap:14px}
.proj h2{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.1vw,34px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.proj dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:1px 10px}
.proj dt{color:var(--muted)}
.proj dd{margin:0}
.desc{margin:0;max-width:34ch;text-wrap:pretty;white-space:pre-line}
.desc.ph{color:var(--muted);border:1px dashed var(--line);padding:8px 10px;min-height:7.5em}
.col{position:relative;width:100%;height:var(--ch,60vh);overflow:hidden}
.col .inner{position:absolute}
.cell{position:absolute;overflow:hidden;background:var(--tile);padding:0;transition:left .75s var(--ease),top .75s var(--ease),width .75s var(--ease),height .75s var(--ease),opacity .4s}
.cell img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
@media (prefers-reduced-motion:reduce){.cell{transition:none}}
@media (max-width:900px){
  .wrap{grid-template-columns:1fr;gap:0}
  .toc{z-index:29;top:calc(var(--hh) + var(--fh));flex-direction:row;gap:18px;max-height:none;overflow-x:auto;white-space:nowrap;padding:10px 0;background:var(--paper);border-bottom:1px solid var(--line)}
  .toc a span:last-child{display:none}
  .toc a.on span:first-child{font-size:15px}
  .proj{grid-template-columns:1fr;gap:16px;padding:20px 0 48px}
  .proj .meta{position:static}
}

/* ---------- me: half photo, half text ---------- */
.me{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100svh}
.me .side{margin:0;position:sticky;top:0;height:100vh;height:100svh;background:var(--tile)}
.me .side img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.me .body{padding:calc(var(--hh) + 40px) var(--g) 96px clamp(28px,4vw,72px);align-self:center}
.lead{font-family:var(--serif);font-size:clamp(20px,1.9vw,30px);line-height:1.24;letter-spacing:-.005em;max-width:30em}
.lead p{margin:0 0 .8em;text-wrap:pretty}
.lead a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.me-page .hd{background:none;pointer-events:none}
.me-page .hd>*{pointer-events:auto}
.me-page .nav a{color:var(--paper);text-shadow:0 0 12px rgba(0,0,0,.25)}
@media (max-width:900px){.me-page .ct a{color:var(--paper);border-color:var(--paper)}.me-page .ct a:hover{background:var(--paper);color:var(--ink)}}
@media (max-width:900px){
  .me{grid-template-columns:1fr}
  .me .side{position:relative;height:auto;aspect-ratio:4/5}
  .me .body{padding:32px var(--g) 80px}
}