:root {
  --paper: #fffaf0;
  --paper-deep: #f8f0e4;
  --ink: #2b1f1d;
  --muted: #725f58;
  --blue: #19477d;
  --blue-soft: #dce9ee;
  --coral: #d9654c;
  --gold: #b29242;
  --line: rgba(164, 113, 76, .24);
  --shadow: 0 18px 48px rgba(70, 45, 29, .12);
  --serif: "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, serif;
  --sans: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #eee4d5; font-family: var(--sans); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.page-shell {
  width: min(1440px, calc(100% - 28px));
  margin: 14px auto;
  background: var(--paper);
  border: 1px solid rgba(151, 107, 73, .23);
  border-radius: 24px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background-image: radial-gradient(rgba(100, 70, 50, .035) .7px, transparent .7px);
  background-size: 7px 7px;
}

.site-header { min-height: 82px; padding: 18px 44px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.brand { display: inline-flex; align-items: center; gap: 14px; min-width: 240px; }
.brand img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.brand strong { display: block; font: 600 23px/1.1 var(--serif); letter-spacing: .08em; }
.brand small { display: block; margin-top: 7px; font: 11px/1 var(--sans); letter-spacing: .26em; color: var(--muted); }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 38px; font: 15px var(--serif); }
.primary-nav a { padding: 12px 2px 10px; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.primary-nav a:hover, .primary-nav a.is-active { color: var(--coral); border-color: var(--coral); }
.menu-toggle { display: none; }

.hero { min-height: 352px; position: relative; padding: 62px 72px 52px; overflow: hidden; border-bottom: 1px solid rgba(164, 113, 76, .16); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,250,240,.96) 0%, rgba(255,250,240,.88) 40%, rgba(255,250,240,.06) 78%); }
.hero-copy { position: relative; z-index: 2; max-width: 700px; }
.eyebrow { margin: 0 0 18px; color: #a85d13; font: 13px/1.2 var(--sans); letter-spacing: .18em; }
.hero h1 { margin: 0; max-width: 700px; font: 600 clamp(42px, 5vw, 72px)/1.15 var(--serif); letter-spacing: .02em; }
.hero-lead { margin: 24px 0 0; max-width: 560px; color: var(--muted); font: 18px/1.8 var(--serif); }
.hero-art { position: absolute; z-index: 1; width: 70%; height: 100%; right: -6%; top: 0; object-fit: cover; object-position: right center; mix-blend-mode: multiply; opacity: .93; }

.projects-section { padding: 28px 44px 52px; }
.section-heading { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 auto 24px; }
.section-heading h2 { margin: 0; font: 600 25px var(--serif); letter-spacing: .12em; }
.heading-rule { width: 74px; height: 1px; background: var(--gold); position: relative; }
.heading-rule::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); position: absolute; top: -2px; }
.heading-rule:first-child::after { right: -2px; }
.heading-rule:last-child::after { left: -2px; }
.project-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.project-card { grid-column: span 2; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: rgba(255, 252, 246, .86); transition: transform .25s ease, box-shadow .25s ease; }
.project-card:nth-child(4), .project-card:nth-child(5), .project-card:nth-child(6) { grid-column: span 3; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(80, 51, 30, .12); }
.project-media { display: block; height: 202px; overflow: hidden; background: #f2eadf; }
.project-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.project-card:hover .project-media img { transform: scale(1.025); }
.project-art { background-image: url('assets/project-atlas.png'); background-repeat: no-repeat; background-size: 300% 200%; transition: filter .35s ease, transform .35s ease; }
.project-art:hover { filter: saturate(1.06); }
.art-khquant { background-position: 0 0; }
.art-khalgo { background-position: 50% 0; }
.art-khmarkdown { background-position: 100% 0; }
.art-kanshan { background-position: 0 100%; }
.art-browser { background-position: 50% 100%; }
.art-khlink { background-position: 100% 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.project-media--markdown { padding: 16px; background: #eff0ed; }
.markdown-window { height: 100%; overflow: hidden; border: 1px solid rgba(45, 74, 70, .22); border-radius: 8px; background: #fcfcf8; box-shadow: 0 5px 15px rgba(59, 67, 61, .09); }
.markdown-window-bar { height: 25px; padding: 0 10px; display: flex; gap: 4px; align-items: center; color: #4e625e; border-bottom: 1px solid #dfe5df; font: 8px var(--sans); }
.markdown-window-bar b { width: 6px; height: 6px; border-radius: 50%; background: #dd8471; }.markdown-window-bar b:nth-child(2){background:#d0ae54}.markdown-window-bar b:nth-child(3){background:#7a9b84}.markdown-window-bar span{margin-left:7px}
.markdown-window-body { height: calc(100% - 25px); display: grid; grid-template-columns: .72fr 1.05fr 1fr; font-size: 8px; line-height: 1.55; }
.markdown-window-body aside { padding: 12px 8px; color: #62716d; background: #f2f5f0; border-right: 1px solid #e3e7e1; }.markdown-window-body aside>*{display:block;margin-bottom:7px}.markdown-window-body aside small{margin-top:3px;color:#8e9d96}.markdown-window-body aside strong{color:#234d52}
.markdown-pane { padding: 12px 10px; color: #50605d; border-right: 1px solid #edf0eb; }.markdown-pane em{display:block;margin-bottom:9px;color:#1d464a;font-style:normal;font-weight:700}.markdown-pane p{margin:0 0 7px}.markdown-pane code{display:block;padding:6px;color:#375d58;background:#edf2ed;border-radius:4px;font-size:7px}.markdown-pane--preview{background:#fffefa}.markdown-pane--preview strong{display:block;margin-bottom:10px;color:#264c4a}.markdown-pane--preview ul{margin:0 0 10px;padding-left:13px}.mini-chart{height:26px;display:flex;align-items:flex-end;gap:5px}.mini-chart b{display:block;flex:1;background:#76a49a}.mini-chart b:nth-child(1){height:50%}.mini-chart b:nth-child(2){height:74%}.mini-chart b:nth-child(3){height:35%}.mini-chart b:nth-child(4){height:92%}.mini-chart b:nth-child(5){height:62%}
.project-body { min-height: 109px; padding: 12px 14px 13px; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.project-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; background: #fffdf8; border: 1px solid rgba(132, 97, 76, .28); padding: 5px; }
.project-copy { min-width: 0; }.project-meta { display:flex; align-items:center; gap:7px; color: #ad6b21; font: 11px var(--sans); }.project-meta i{width:6px;height:6px;border-radius:50%;background:#829d85}.project-copy h3 { margin: 4px 0 5px; font: 600 21px/1.1 var(--serif); }.project-copy p { margin: 0; color: var(--muted); font: 13px/1.55 var(--serif); }
.project-link { align-self: end; color: #17529a; white-space: nowrap; font: 12px var(--sans); }.project-link span{font-size:16px;margin-left:2px}.project-link:hover{color:var(--coral)}

.notes-section { margin: 0 44px 20px; padding: 58px 10%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }.notes-section h2,.about-section h2 { margin: 0; font: 600 34px var(--serif); }.notes-section>p:not(.eyebrow){color:var(--muted);font:16px/1.8 var(--serif)}.text-link{display:inline-block;margin-top:8px;color:var(--blue);font:14px var(--sans)}.text-link span{font-size:18px}
.about-section { margin: 0 44px; padding: 30px 0 46px; display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:end; }.about-section>p{max-width:500px;justify-self:end;margin:0;color:var(--muted);font:16px/1.9 var(--serif)}
.site-footer { padding: 20px 44px 24px; display:flex;justify-content:space-between;color:var(--muted);border-top:1px solid var(--line);font:12px var(--sans);letter-spacing:.08em; }

@media (max-width: 900px) {
  .page-shell { width: min(100% - 14px, 680px); margin: 7px auto; border-radius: 18px; }
  .site-header { min-height: 68px; padding: 13px 18px; }.brand{min-width:0;gap:10px}.brand img{width:39px;height:39px}.brand strong{font-size:18px}.brand small{font-size:8px;margin-top:5px;letter-spacing:.18em}.primary-nav{gap:20px;font-size:13px}
  .hero { min-height: 302px; padding: 38px 22px 30px; }.hero-art{width:115%;height:72%;right:-38%;top:23%;opacity:.82}.hero::after{background:linear-gradient(180deg,rgba(255,250,240,.97) 0%,rgba(255,250,240,.86) 46%,rgba(255,250,240,.18) 100%)}.hero h1{max-width: 380px;font-size: clamp(32px, 8vw, 49px)}.hero-lead{max-width:310px;margin-top:16px;font-size:15px;line-height:1.65}.eyebrow{font-size:10px;margin-bottom:12px}
  .projects-section{padding:24px 16px 32px}.section-heading{gap:12px;margin-bottom:17px}.section-heading h2{font-size:20px}.heading-rule{width:37px}.project-grid{display:block}.project-card,.project-card:nth-child(4),.project-card:nth-child(5),.project-card:nth-child(6){margin-bottom:13px}.project-media{height:155px}.project-body{min-height:96px;padding:10px;grid-template-columns:45px minmax(0,1fr) auto;gap:9px}.project-logo{width:45px;height:45px;padding:4px}.project-copy h3{font-size:18px}.project-copy p{font-size:12px;line-height:1.48}.project-meta{font-size:9px}.project-link{font-size:10px}.project-link span{font-size:14px}.project-media--markdown{padding:9px}.markdown-window-body{font-size:6px}.markdown-window-bar{height:19px;font-size:6px}.markdown-window-body{height:calc(100% - 19px)}.markdown-pane code{font-size:5px}
  .notes-section{margin:0 16px 16px;padding:38px 10%}.notes-section h2,.about-section h2{font-size:26px}.notes-section>p:not(.eyebrow),.about-section>p{font-size:14px}.about-section{margin:0 16px;padding:24px 0 30px;display:block}.about-section>p{margin-top:15px}.site-footer{padding:16px;display:block;text-align:center;font-size:10px}.site-footer span+span{display:block;margin-top:8px}
}

@media (max-width: 620px) {
  .menu-toggle{display:flex;margin-left:auto;width:36px;height:36px;border:0;background:transparent;flex-direction:column;justify-content:center;gap:5px;padding:7px;cursor:pointer}.menu-toggle span{display:block;width:21px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}.nav-open .menu-toggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.nav-open .menu-toggle span:nth-child(2){opacity:0}.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}.primary-nav{position:absolute;top:67px;left:9px;right:9px;display:none;padding:11px 15px;justify-content:space-around;border:1px solid var(--line);border-radius:12px;background:rgba(255,250,240,.98);box-shadow:0 12px 25px rgba(65,43,30,.12)}.nav-open .primary-nav{display:flex}.primary-nav a{padding:8px 4px}
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.project-card,.project-media img{transition:none} }