/* 张云帆 · personal site. System fonts only: Google Fonts is unreliable from mainland China. */
:root {
  color-scheme: light dark;
  --bg: #f3f5f4;
  --paper: #fafbfa;
  --ink: #1d2a31;
  --soft: #465660;
  --muted: #74838a;
  --line: #d8dfdd;
  --fjord: #2f5566;
  --falu: #8e2f25;
  --glow: #c88a1e;
  /* horizon art, repainted by site.js from the real sun over Gothenburg */
  --sky-top: #a9c3d2;
  --sky-low: #efe4cc;
  --sun: #f2b560;
  --land-far: #b9c6cc;
  --land-mid: #8ea2ad;
  --land-near: #5e7784;
  --water: #d7e1e4;
  --ripple: rgba(255, 255, 255, .5);
  --window: #d8dfe2;
  --serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", Roboto, sans-serif;
  --wrap: 1080px;
  --gutter: clamp(20px, 5vw, 48px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f161b;
    --paper: #141d23;
    --ink: #e3e8ea;
    --soft: #b0bcc2;
    --muted: #7f8e95;
    --line: #26333b;
    --fjord: #8db3cb;
    --falu: #c0564a;
    --glow: #e6be63;
    --water: #152029;
    --ripple: rgba(255, 255, 255, .08);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--fjord); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 8px; z-index: 9; background: var(--paper); padding: 6px 12px; }

main, .top, .foot { transition: opacity .18s ease; }
body.switching main, body.switching .top, body.switching .foot { opacity: 0; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  padding: 16px max(var(--gutter), calc((100% - var(--wrap)) / 2));
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
}
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 18px/1 var(--serif); letter-spacing: .06em; }
.mark svg { width: 24px; height: 24px; }
.links { display: flex; gap: 24px; margin-left: auto; }
.links a { text-decoration: none; font-size: 15px; color: var(--soft); }
.links a:hover { color: var(--ink); }

.lang {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr;
  width: 76px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 999px;
  background: var(--paper); color: var(--muted); font: 600 12px/1 var(--sans); cursor: pointer;
}
.lang-thumb {
  position: absolute; top: 2px; left: 2px; width: 35px; height: 24px; border-radius: 999px;
  background: var(--fjord); transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
html[lang="en"] .lang-thumb { transform: translateX(37px); }
.lang-opt { position: relative; display: grid; place-items: center; transition: color .35s; }
html[lang="zh-CN"] .lang-opt[data-l="zh"], html[lang="en"] .lang-opt[data-l="en"] { color: var(--paper); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 12vh, 120px) var(--gutter) 40px; }
.coords { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.coords .dot { display: inline-block; width: 3px; height: 3px; margin: 0 8px 3px; border-radius: 50%; background: var(--muted); }
.phase { margin-left: 8px; color: var(--glow); }
h1 {
  margin: 18px 0 0;
  font: 600 clamp(64px, 12vw, 132px)/1 var(--serif);
  letter-spacing: .04em;
}
html[lang="en"] h1 { letter-spacing: -.01em; }
.role { margin: 26px 0 0; font: 500 clamp(20px, 2.4vw, 26px)/1.5 var(--serif); }
.lede { margin: 18px 0 0; max-width: 36em; color: var(--soft); font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-solid { background: var(--falu); color: #fbf6f4; }
.btn-solid:hover { background: color-mix(in srgb, var(--falu) 85%, #000); }
.btn-line { border: 1px solid var(--ink); color: var(--ink); }
.btn-line:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

.horizon {
  width: 100%; height: clamp(120px, 18vw, 220px); overflow: hidden;
  /* 天空从页面底色里慢慢浮出来，而不是一条硬边 */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
  mask-image: linear-gradient(to bottom, transparent, #000 45%);
}
.horizon svg { width: 100%; height: 100%; display: block; }
#sun circle, #window { transition: all 1s ease; }

/* ── Bands ────────────────────────────────────────────────────────────── */
.band { max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 10vw, 112px) var(--gutter) 0; }
.head { max-width: 40em; }
h2 { margin: 0; font: 600 clamp(26px, 3.2vw, 38px)/1.3 var(--serif); letter-spacing: .02em; }
.head p { margin: 14px 0 0; color: var(--soft); }

.project {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px;
  margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line);
}
.kicker { margin: 0; font-size: 13px; color: var(--muted); letter-spacing: .04em; }
.project h3 { margin: 6px 0 0; font: 600 34px/1.2 var(--serif); letter-spacing: 0; }
.pitch { margin: 12px 0 0; font-size: 17px; }
.points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 18px; color: var(--soft); }
.points li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 1px; background: var(--fjord); }
.stack { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.project-side { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.try { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
.account { margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font-size: 13px; }
.account p { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.account p:first-child { color: var(--muted); margin-bottom: 4px; }
code { font: 500 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--ink); }
.copy { padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); font: 12px var(--sans); cursor: pointer; }
.copy:hover { color: var(--ink); border-color: var(--muted); }
.copy.done { color: var(--fjord); border-color: var(--fjord); }

.more { margin-top: 56px; }
.more h3 { margin: 0; font: 600 20px/1.4 var(--serif); }
.more ul { list-style: none; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line); }
.more a { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.more a:hover strong { color: var(--fjord); }
.more strong { font-weight: 600; transition: color .2s; }
.more span { color: var(--soft); font-size: 15px; }

/* Experience */
.path { list-style: none; margin: 40px 0 0; padding: 0; }
.path > li { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid var(--line); }
.when { margin: 0; padding-top: 4px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.path h3 { margin: 0; font: 600 22px/1.4 var(--serif); }
.what { margin: 4px 0 0; color: var(--soft); }
.path ul { margin: 12px 0 0; padding-left: 18px; color: var(--soft); }
.path ul li + li { margin-top: 6px; }

/* Skills */
.skills dl { margin: 32px 0 0; }
.skills dl div { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 14px 0; border-top: 1px solid var(--line); }
.skills dt { font-weight: 600; }
.skills dd { margin: 0; color: var(--soft); }

/* Contact */
.contact { padding-bottom: 24px; }
.contact > p { margin: 14px 0 0; color: var(--soft); max-width: 36em; }
.channels { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; }
.channels li { display: flex; align-items: baseline; gap: 14px; font-size: 18px; }
.channels li > span { width: 72px; flex: none; font-size: 14px; color: var(--muted); }
.channels a { text-decoration: none; border-bottom: 1px solid var(--line); }
.channels a:hover { border-color: var(--ink); }

.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  max-width: var(--wrap); margin: 72px auto 0; padding: 28px var(--gutter) 40px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .links { display: none; }
  .lang { margin-left: auto; }
  .project { grid-template-columns: 1fr; gap: 20px; }
  .project-side { flex-direction: row; flex-wrap: wrap; }
  .project-side .btn { flex: 1 1 140px; }
  .project-side .account, .project-side .try { flex-basis: 100%; }
  .more a, .path > li, .skills dl div { grid-template-columns: 1fr; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}