/* Coco Feng · a working notebook more than a showcase. White page, one green, a label column and a text column. */
@font-face { font-family: 'Inter'; src: url(fonts/inter-latin-var.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url(fonts/quicksand-latin-var.woff2) format('woff2'); font-weight: 300 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #FFFFFF; --ink: #1D1D1F; --body: #3B3B3E; --soft: #74747A; --faint: #A6A6AB; --line: #E9E9E9; --tint: #F4F9F7;
  --green: #62C3A3; --deep: #146B58; --mark: rgba(98, 195, 163, .2);
  --cjk: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --head: 'Inter', -apple-system, var(--cjk);
  --text: 'Quicksand', 'Inter', -apple-system, var(--cjk);
  --col: 200px; --main: 680px; --gap: 56px; --pad: clamp(22px, 5vw, 48px);
}
html { background: var(--bg); scroll-behavior: smooth; }
body { font-family: var(--text); font-weight: 500; color: var(--body); font-size: 16.5px; line-height: 1.85; -webkit-font-smoothing: antialiased; }
html[lang="zh"] body { font-family: var(--head); font-weight: 400; font-size: 16px; line-height: 1.95; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--mark); }
html[lang="zh"] .en { display: none !important; }
html[lang="en"] .zh { display: none !important; }

.a { color: var(--deep); border-bottom: 1px solid rgba(98,195,163,.55); transition: border-color .2s, color .2s; }
.a:hover { border-bottom-color: var(--deep); }
.sm { font-size: 14px; color: var(--soft); }

/* nav: name left, links centred, language right */
nav.top { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
nav .in { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad); height: 60px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.brand { font: 700 16px var(--head); color: var(--ink); justify-self: start; display: flex; align-items: center; gap: 9px; }
.brand::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
nav ul { display: flex; gap: 30px; list-style: none; }
nav ul a { font: 500 14px var(--head); color: var(--soft); transition: color .2s; }
nav ul a:hover { color: var(--ink); }
.lang { justify-self: end; }
.lang button { background: none; border: 0; font: 500 13.5px var(--head); color: var(--faint); cursor: pointer; padding: 2px 3px; }
.lang button.on { color: var(--ink); }
.lang span { color: #d8d8d8; }

/* page grid: a label column and a text column */
.page { max-width: calc(var(--col) + var(--gap) + var(--main) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); }
.row { display: grid; grid-template-columns: var(--col) minmax(0, var(--main)); gap: var(--gap); }
.row > .k { font: 600 13px/1.9 var(--head); color: var(--soft); letter-spacing: .02em; }
.row > .k .n { color: var(--deep); }

/* head */
header.me { padding: clamp(64px, 11vh, 110px) 0 0; }
header.me h1 { font: 800 clamp(34px, 4.6vw, 46px)/1.15 var(--head); color: var(--deep); letter-spacing: -.02em; }
html[lang="zh"] header.me h1 { font-weight: 700; letter-spacing: .01em; }
header.me h1 small { font: 600 .5em var(--head); color: var(--soft); margin-left: 12px; letter-spacing: 0; }
header.me .role { margin-top: 10px; color: var(--soft); font-size: 16px; }
header.me .p { margin-top: 30px; }
header.me .p p + p { margin-top: 14px; }
header.me .links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 15px; }
.now { margin-top: 40px; padding: 16px 20px; background: var(--tint); border-radius: 10px; font-size: 15px; }
.now b { color: var(--deep); font-weight: 600; margin-right: 8px; }

/* film: a poster that plays in place with sound */
.film { position: relative; border-radius: 10px; overflow: hidden; background: #0B0B0C; aspect-ratio: 16 / 9; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film .play { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.95); color: var(--ink); border: 0; border-radius: 999px; padding: 7px 14px 7px 12px; font: 600 12.5px var(--head); cursor: pointer; }
.film .play i { width: 0; height: 0; border-left: 8px solid var(--deep); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.film.on .play { display: none; }
figure.reel { margin-top: 56px; }
figcaption { margin-top: 10px; font-size: 13.5px; color: var(--soft); }

/* sections */
section { padding-top: clamp(80px, 12vh, 120px); }
section > .row:first-child > .k { position: sticky; top: 84px; align-self: start; }
h2.t { font: 700 15px var(--head); color: var(--ink); margin-bottom: 26px; }

/* work entries */
.entry + .entry { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--line); }
.entry .when { font: 500 13.5px var(--head); color: var(--faint); }
.entry h3 { margin-top: 4px; font: 700 21px/1.4 var(--head); color: var(--ink); letter-spacing: -.005em; }
.entry .one { margin-top: 6px; color: var(--soft); }
.entry .tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.entry .tags span { font: 500 12.5px var(--head); color: var(--deep); background: var(--mark); padding: 1px 8px; border-radius: 4px; }
.entry .film { margin-top: 22px; }
.entry .body { margin-top: 22px; }
.entry .body p + p { margin-top: 12px; }
.entry .back { margin-top: 16px; font-size: 14.5px; color: var(--soft); }
.entry .back b { color: var(--ink); font-weight: 600; }

/* embodied note */
.loop { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
.loop li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; }
.loop li b { font: 700 14.5px/1.95 var(--head); color: var(--deep); }

/* experience */
.xp .it + .it { margin-top: 30px; }
.xp h3 { font: 700 16.5px/1.6 var(--head); color: var(--ink); }
.xp .co { font-size: 14.5px; color: var(--soft); }
.xp ul { margin-top: 8px; padding-left: 18px; }
.xp li { margin-top: 3px; }
.xp li::marker { color: var(--green); }

/* after hours */
.grid3 { margin-top: 30px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.grid3 img, .grid3 .blank { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.grid3 .blank { background: var(--tint); display: flex; align-items: center; justify-content: center; font: 700 14px var(--head); color: var(--deep); }
.grid3 b { display: block; margin-top: 10px; font: 700 14.5px var(--head); color: var(--ink); }
.grid3 span { display: block; font-size: 13.5px; color: var(--soft); line-height: 1.65; }
.grid3 a:hover b { color: var(--deep); }

/* about */
.facts { margin-top: 26px; display: grid; gap: 14px; }
.facts div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; font-size: 15px; }
.facts dt { color: var(--faint); }

/* end */
.end { padding: clamp(100px, 15vh, 150px) 0 70px; }
.end h2 { font: 800 28px var(--head); color: var(--ink); letter-spacing: -.01em; }
html[lang="zh"] .end h2 { font-weight: 700; letter-spacing: 0; }
.end p { margin-top: 10px; }
.end .links { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 6px 24px; }
.end .sign { margin-top: 34px; font: 600 16px 'Quicksand', var(--cjk); color: var(--soft); }
footer { border-top: 1px solid var(--line); padding: 20px 0 34px; font-size: 13px; color: var(--faint); }
footer .page { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

@media (max-width: 900px) {
  nav .in { grid-template-columns: 1fr auto; }
  nav ul { display: none; }
  .row { grid-template-columns: 1fr; gap: 10px; }
  section > .row:first-child > .k { position: static; }
  .grid3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .grid3 { grid-template-columns: 1fr; } }
@media print { nav, .film, figure.reel, .grid3 { display: none !important; } section { padding-top: 28px; } }
section p + p, .end p + p { margin-top: 14px; }
section .facts { margin-top: 28px; }

/* v4: the previous online résumé's voice inside the quiet layout */
header.me .tagline { font: 500 13px var(--head); color: var(--deep); letter-spacing: .02em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
header.me .tagline::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
header.me .role { color: var(--ink); font-weight: 600; font-size: 16.5px; }
html[lang="zh"] header.me .role { font-weight: 500; }
header.me .p { margin-top: 22px; }
header.me .p p { margin: 0; line-height: 2; }
header.me .p p + p { margin-top: 0; }
header.me p.about { margin-top: 18px; color: var(--body); }
header.me .links { color: var(--soft); }
.lead { color: var(--soft); font-size: 15px; margin-bottom: 44px; }
.entry .when { display: flex; align-items: center; gap: 12px; font: 600 12px var(--head); letter-spacing: .08em; color: var(--faint); }
.entry .when em { font-style: normal; letter-spacing: .02em; font-weight: 500; font-size: 12.5px; color: var(--deep); background: var(--mark); padding: 1px 8px; border-radius: 4px; }
.entry h3 { margin-top: 8px; }
.entry .case { margin-top: 22px; }
.entry .case p { margin: 0; font-size: 15.5px; line-height: 1.9; }
.entry .case p + p { margin-top: 10px; }
.entry .case p b { color: var(--deep); font-weight: 700; }
.entry .case p span b { color: var(--ink); font-weight: 600; }
.entry .chips { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px; }
.entry .chips span { font: 500 12px var(--head); color: var(--soft); border: 1px solid var(--line); padding: 2px 9px; border-radius: 999px; }
.xp li b { color: var(--ink); font-weight: 600; }
section .facts { margin-top: 0; }
.facts div { grid-template-columns: 140px 1fr; }
.facts dt { color: var(--soft); font-weight: 600; font-size: 14px; }
.end h2 { font-size: 26px; }

/* v5: the home page is all about me; the label column becomes a timeline (employer, dates); a bookshelf */
nav ul a.on { color: var(--ink); }
nav ul a.on::after { content: ''; display: block; height: 2px; margin-top: 2px; background: var(--green); border-radius: 1px; }
section.first { padding-top: clamp(56px, 9vh, 90px); }
.k .back { color: var(--soft); font-weight: 500; }
.k .back:hover { color: var(--deep); }

/* reading, on the home page */
.reading { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.reading li b { display: block; font: 600 15px/1.6 var(--head); color: var(--ink); }
.reading li span { display: block; font-size: 13.5px; color: var(--soft); line-height: 1.5; }
p.more { margin-top: 22px; font-size: 15px; }

/* bookshelf */
.shelfg + .shelfg { margin-top: 52px; }
.shelfg h2.t { margin-bottom: 6px; color: var(--deep); }
.books { list-style: none; }
.books li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.books .bt { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.books .bt b { font: 700 16px/1.55 var(--head); color: var(--ink); }
.books .ba { font-size: 13.5px; color: var(--soft); line-height: 1.6; }
.books p { margin-top: 4px; font-size: 15px; line-height: 1.75; }
.st { font-style: normal; font: 500 11.5px var(--head); color: var(--deep); background: var(--mark); padding: 0 7px; border-radius: 4px; letter-spacing: .02em; }
.blogs { margin-top: 48px; padding: 16px 20px; background: var(--tint); border-radius: 10px; font-size: 14.5px; color: var(--body); }

@media (max-width: 520px) { .reading { grid-template-columns: 1fr; } }
section.first:last-child { padding-bottom: clamp(90px, 13vh, 130px); }

/* label column as a timeline: employer, then dates */
.row > .k.org > b { display: block; font-weight: 700; color: var(--ink); }
.row > .k.org > span { display: block; font-weight: 500; color: var(--faint); }
.entry .when { margin-bottom: 2px; }
.entry .case .cl { margin-top: 10px; font-size: 15.5px; line-height: 1.9; }
.entry .case .cl > b { color: var(--deep); font-weight: 700; }
.entry .case .cl ul { margin-top: 4px; padding-left: 18px; }
.entry .case .cl li { margin-top: 4px; }
.entry .case .cl li::marker { color: var(--green); }
.entry .case .cl li b { color: var(--ink); font-weight: 600; }
.entry .case .cl + p { margin-top: 10px; }
.entry .own { margin-top: 2px; font: 500 13.5px var(--head); color: var(--deep); }
.xp .pj { margin-top: 14px; }
.xp .pj h4 { font: 700 15px/1.6 var(--head); color: var(--ink); }
.xp .pj .own { font: 500 13px var(--head); color: var(--deep); }
.xp .pj ul { margin-top: 6px; }