/* Self-hosted fonts (SIL Open Font License). Both families are variable,
   so one file per subset covers every weight the site uses. */
@font-face {
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/hanken-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/hanken-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("/assets/fonts/jetbrains-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:"JetBrains Mono"; font-style:normal; font-weight:400 500; font-display:swap;
  src:url("/assets/fonts/jetbrains-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Metric-matched fallbacks: measured against the real faces, so the first
   paint and the final paint occupy the same space (no reflow on swap). */
@font-face {
  font-family:"Hanken fallback"; src:local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust:100.3%; ascent-override:100%; descent-override:30%; line-gap-override:0%;
}
@font-face {
  font-family:"JetBrains fallback"; src:local("Menlo"), local("Consolas"), local("DejaVu Sans Mono");
  size-adjust:99.66%; ascent-override:102%; descent-override:30%; line-gap-override:0%;
}

/* Lance Liang — portfolio V0
   Tokens, type styles and layout follow 02-当前行动/framer-build-brief.md */

:root {
  --paper:#FCFBF7; --ink:#14161A; --mut:#6C6D67; --faint:#9B9C94;
  --line:#E3E0D7; --acc:#145C61; --plate:#FFFFFF;
  --sel:rgba(20,92,97,.20);
  --frame-shadow:0 0 0 1px rgba(20,22,26,.04), 0 1px 2px rgba(20,22,26,.05), 0 10px 26px rgba(20,22,26,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#16181A; --ink:#EDEBE4; --mut:#979890; --faint:#6E6F68;
    --line:#2A2D2F; --acc:#5FA9AE; --plate:#EFEDE6;
    --sel:rgba(95,169,174,.22);
    --frame-shadow:0 0 0 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.28);
  }
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--mut);
  font-family:"Hanken Grotesk","Hanken fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; }
::selection { background:var(--sel); color:var(--ink); }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; border-radius:2px; }
.skip {
  position:absolute; left:-9999px; top:0; background:var(--plate); color:var(--ink);
  padding:10px 14px; border:1px solid var(--line); z-index:10;
}
.skip:focus { left:24px; top:14px; }

.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
.mono, .role, .section-label, .meta, .eyebrow {
  font-family:"JetBrains Mono","JetBrains fallback",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums; text-transform:uppercase;
}

/* ---------- header ---------- */
.site-head { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:26px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand .logo { height:22px; width:auto; display:block; }
.brand .name { font-size:16px; font-weight:600; letter-spacing:-.008em; color:var(--ink); }
.site-nav { display:flex; gap:22px; }
.site-nav a {
  font-size:14.5px; font-weight:400; color:var(--mut); text-decoration:none;
  border-bottom:1.5px solid transparent; padding-bottom:2px;
}
.site-nav a:hover { color:var(--ink); border-bottom-color:var(--acc); }

/* ---------- hero ---------- */
.hero { padding:clamp(46px,6vw,72px) 0 clamp(44px,6vw,68px); }
.role { font-size:11.5px; font-weight:500; letter-spacing:.15em; color:var(--mut); margin:0 0 20px; }
h1 {
  font-size:clamp(25px,3.4vw,39px); font-weight:600; line-height:1.22; letter-spacing:-.022em;
  color:var(--ink); max-width:54ch; margin:0;
}
h1 .soft { font-weight:500; color:var(--mut); }
.avail { font-size:15px; color:var(--mut); margin:26px 0 0; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-variant-numeric:tabular-nums; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--acc); flex:none; }
.avail a { color:var(--mut); text-decoration:none; border-bottom:1.5px solid var(--acc); }
.avail a:hover { border-bottom-width:2.5px; }

/* ---------- sections ---------- */
.section { border-top:1px solid var(--line); padding-top:16px; }
.section-label { font-size:11px; font-weight:500; letter-spacing:.15em; color:var(--faint); margin:0 0 clamp(28px,4vw,44px); }

/* plate frame for screenshots */
.frame {
  background:var(--plate); border:1px solid var(--line); padding:10px; border-radius:3px;
  box-shadow:var(--frame-shadow);
}
.frame img { border-radius:2px; width:100%; }
a.frame { display:block; }
.frame a.zoom { display:block; }
.mobile-hint { display:none; }

/* flagship */
.flagship .cols {
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:start; margin-top:clamp(22px,3vw,30px);
}
.meta { font-size:11px; font-weight:400; letter-spacing:.12em; color:var(--faint); margin:0 0 14px; }
.flagship h2 {
  font-size:clamp(25px,3vw,40px); font-weight:600; line-height:1.10; letter-spacing:-.028em;
  color:var(--ink); max-width:20ch; margin:0;
}
.lead { font-size:16.5px; line-height:1.6; color:var(--mut); margin:0; }
.read {
  display:inline-block; margin-top:22px; font-size:15px; color:var(--ink);
  text-decoration:none; border-bottom:1.5px solid var(--acc); padding-bottom:1px;
}
.read:hover { border-bottom-width:2.5px; }

/* supporting pair */
.pair {
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,52px);
  border-top:1px solid var(--line); padding-top:clamp(30px,4vw,42px); margin-top:clamp(44px,6vw,68px);
}
.pair article { border-top:2px solid var(--ink); padding-top:16px; }
.pair h3 { font-size:clamp(19px,2vw,23px); font-weight:600; line-height:1.2; letter-spacing:-.018em; color:var(--ink); margin:0 0 12px; }
.pair p { font-size:16px; line-height:1.56; color:var(--mut); max-width:40ch; margin:0; }

/* about */
.about { margin-top:clamp(52px,7vw,80px); }
.about p { font-size:16.5px; line-height:1.6; max-width:62ch; margin:0 0 18px; }
.cv { list-style:none; padding:0; margin:26px 0 0; }
.cv li { display:grid; grid-template-columns:22em 1fr; gap:6px 24px; padding:13px 0; border-top:1px solid var(--line); font-size:15px; }
.cv .who { color:var(--ink); }
.cv .when { font-family:"JetBrains Mono","JetBrains fallback",ui-monospace,monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint); font-variant-numeric:tabular-nums; align-self:center; }

/* footer */
.site-foot {
  margin-top:clamp(70px,10vw,110px); border-top:1px solid var(--line); padding:26px 0 40px;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:15px; color:var(--mut); font-variant-numeric:tabular-nums;
}
.site-foot nav { display:flex; gap:20px; flex-wrap:wrap; }
.site-foot a { text-decoration:none; border-bottom:1.5px solid var(--acc); padding-bottom:1px; }
.site-foot a:hover { border-bottom-width:2.5px; }

/* ---------- case study ---------- */
.case { max-width:1100px; margin:0 auto; padding:0 24px; }
.case-head { padding:clamp(40px,5vw,64px) 0 0; }
.case-head h1, .case-head .case-dek, .case-head .case-meta { max-width:660px; margin-left:auto; margin-right:auto; }
.case-head h1 { max-width:660px; }
.case-dek { font-size:16.5px; line-height:1.6; color:var(--mut); margin:20px auto 0; }
.case-meta { font-size:11px; letter-spacing:.12em; color:var(--faint); margin:26px auto 0; }
.case-rule { border:0; border-top:1px solid var(--line); margin:clamp(30px,4vw,44px) 0 0; }
.prose { max-width:1100px; margin:0 auto; }
.prose > p, .prose > h2, .prose > h3, .prose > blockquote, .prose > .eyebrow {
  max-width:660px; margin-left:auto; margin-right:auto;
}
.prose p { font-size:16.5px; line-height:1.68; margin:0 auto 20px; }
.prose p:first-child { margin-top:clamp(30px,4vw,44px); }
.prose em { font-style:italic; }
.prose blockquote {
  margin:32px auto; padding-left:20px; border-left:2px solid var(--line);
  font-size:18.5px; line-height:1.5; color:var(--ink);
}
.eyebrow { font-size:11px; font-weight:500; letter-spacing:.15em; color:var(--acc); margin:clamp(56px,7vw,84px) auto 10px; }
.prose h2 { font-size:clamp(25px,3vw,34px); font-weight:600; line-height:1.14; letter-spacing:-.028em; color:var(--ink); margin:0 auto 26px; }
.prose h3 { font-size:clamp(19px,2vw,23px); font-weight:600; line-height:1.25; letter-spacing:-.018em; color:var(--ink); margin:44px auto 20px; }
figure { margin:clamp(36px,5vw,54px) 0; }
figure .frame { max-width:1100px; margin:0 auto; }
figcaption { max-width:660px; margin:14px auto 0; font-size:14.5px; line-height:1.55; color:var(--faint); }
.sbs { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.what-these { max-width:660px; margin:clamp(60px,8vw,90px) auto 0; border-top:1px solid var(--line); padding-top:26px; font-size:15px; }
.what-these h2 { font-size:19px; font-weight:600; color:var(--ink); letter-spacing:-.018em; margin:0 0 18px; }
.what-these ul { padding-left:0; list-style:none; margin:0 0 20px; }
.what-these li { margin:0 0 12px; line-height:1.6; }
.what-these strong { color:var(--ink); font-weight:600; }
.back { display:inline-block; margin-top:8px; font-size:15px; color:var(--ink); text-decoration:none;
  border-bottom:1.5px solid var(--acc); padding-bottom:1px; }
.back:hover { border-bottom-width:2.5px; }

/* ---------- ≤900px ---------- */
@media (max-width:900px) {
  .mobile-hint { display:block; max-width:660px; margin:18px auto 0; font-size:13.5px; color:var(--faint); }
  .wrap, .case { padding:0 18px; }
  body { font-size:16px; }
  h1 { font-size:clamp(22px,6.2vw,28px); }
  .flagship .cols { grid-template-columns:1fr; gap:24px; }
  .flagship h2 { max-width:none; }
  .pair { grid-template-columns:1fr; gap:34px; }
  .pair p { max-width:none; }
  .sbs { grid-template-columns:1fr; gap:26px; }
  .site-foot { flex-direction:column; gap:14px; }
  .cv li { grid-template-columns:1fr; gap:4px; }
}