/* Portfolio Design System — shared execution layer.
   Page-specific composition may vary; foundational language does not. */
:root{
  --paper:#fffefa;
  --ink:#20201f;
  --body:#4d4d4d;
  --muted:#777570;
  --line:#e7e5df;
  --orange:#f26a21;
  --site-content:1080px;
  --site-gutter:36px;
  --site-nav-height:80px;
  --site-type-primary:22px;
  --site-type-body:15px;
  --site-type-meta:12px;
  --site-type-article:45px;
  --site-space-1:8px;
  --site-space-2:16px;
  --site-space-3:24px;
  --site-space-4:32px;
  --site-space-5:48px;
  --site-space-6:64px;
  --site-space-7:80px;
  --site-space-8:96px;
  --site-space-9:120px;
}

html,body{background:var(--paper);color:var(--ink)}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
body *{font-family:inherit!important}
.wrap{width:min(var(--site-content),calc(100% - (var(--site-gutter) * 2)));margin-inline:auto}
.site-shell{position:sticky;top:0;z-index:10;background:rgba(255,254,250,.96);border-bottom:0;box-shadow:none;backdrop-filter:none}
.site-head{height:var(--site-nav-height);display:flex;align-items:center;padding:0}
.brand{display:grid;place-items:center;width:48px;height:48px;margin-right:auto;color:var(--ink);text-decoration:none}
.brand img{display:block;width:42px;height:42px;object-fit:contain}
.nav{display:flex;align-items:center;gap:28px;margin-left:auto;flex-wrap:nowrap}
.nav a{position:relative;font-family:inherit;font-size:14px;font-weight:400;line-height:1.5;color:var(--body);text-decoration:none;white-space:nowrap}
.nav a.active{color:var(--ink)}
.nav a.active:after{content:"";position:absolute;inset:-7px -10px;border:1px solid var(--orange);border-radius:50%;pointer-events:none}
footer{color:var(--muted);font-size:var(--site-type-meta)}
.foot{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;border:0;padding:0;color:var(--muted);font-size:var(--site-type-meta)}

@media(max-width:760px){
  :root{--site-gutter:20px;--site-nav-height:72px}
  .wrap{width:calc(100% - (var(--site-gutter) * 2))}
  .site-head{height:var(--site-nav-height)}
  .brand{width:40px;height:40px}
  .brand img{width:36px;height:36px}
  .nav{gap:18px}
  .nav a{font-size:13px}
  .foot{flex-wrap:wrap}
}