:root{
  --bg:#ffffff; --ink:#111111; --muted:#9a9a9a; /* 纯白：径向羽化后纸面已不形成矩形，留白处缓变溶入纯白，无缝 */
  --font-nav:"caveat-brush"; /* 切换：nanum-brush | caveat-brush | rock-salt */
  --pad:clamp(1.25rem,4vw,2.75rem);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
/* 字体 URL 带 ?v=1：内容变更时 bump，避免浏览器缓存旧字体 */
@font-face{font-family:"nanum-brush";src:url("/assets/fonts/nanum-brush.woff2?v=1") format("woff2");font-display:swap}
@font-face{font-family:"caveat-brush";src:url("/assets/fonts/caveat-brush.woff2?v=1") format("woff2");font-display:swap}
@font-face{font-family:"rock-salt";src:url("/assets/fonts/rock-salt.woff2?v=1") format("woff2");font-display:swap}

/* 顶部：左上 Home（子页面才有）+ 右上三导航 */
.topbar{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:var(--pad); gap:1.5rem;
  padding-right:clamp(2.5rem,6vw,6rem); /* 顶栏右侧加大留白 → 导航整体左移 */
}
.home{
  font-family:var(--font-nav); font-size:clamp(1.3rem,2vw,1.9rem);
  color:var(--ink); text-decoration:none; opacity:.55; transition:opacity .2s;
}
.home:hover{opacity:1}
.home--spacer{visibility:hidden} /* 首页占位，保持右侧导航位置一致 */

nav{
  display:flex; flex-wrap:wrap; justify-content:flex-end;
  gap:clamp(1.4rem,3.5vw,3.2rem);
  font-family:var(--font-nav);
  font-size:clamp(1.5rem,2.8vw,2.4rem);
  line-height:1.1;
}
nav a{
  color:var(--ink); text-decoration:none;
  opacity:.82; transition:opacity .2s, transform .2s;
}
nav a:hover{opacity:1; transform:translateY(-2px)}
nav a[aria-current="page"]{opacity:1; text-decoration:underline; text-underline-offset:.25em}

/* 主区 */
main{
  flex:1; display:flex; align-items:center; justify-content:center;
  padding:0 var(--pad) clamp(2rem,8vh,6rem);
}
.video-frame{
  aspect-ratio:4/3;
  height:min(56vh,420px);
  height:min(56dvh,420px);   /* 按视口高度定尺寸 → 首屏一屏装下，不出现下滑 */
  max-width:90vw;
  background:transparent;
  /* 根因：视频纸面是不均匀的米色(实测亮度~220，非白)，且为有限色域(16-235)，
     无论页面取什么色都对不齐 → 必现矩形。解法：椭圆径向羽化，只在舞者处不透明，
     到边框前已完全透明 —— 画面里不存在任何直边/矩形，残留米色↔页面的差只是一条
     极缓的渐变，人眼只察觉边缘不察觉缓变，于是边界彻底消失，动画与页面浑然一体 */
  -webkit-mask:radial-gradient(ellipse 82% 86% at 50% 50%, #000 0%, #000 50%, transparent 100%);
  mask:radial-gradient(ellipse 82% 86% at 50% 50%, #000 0%, #000 50%, transparent 100%);
}
.video-frame video{width:100%;height:100%;object-fit:contain;display:block}

/* 子页面标题占位 */
.page-title{
  font-family:var(--font-nav); font-size:clamp(2.4rem,7vw,5rem);
  text-align:center;
}
.page-sub{color:var(--muted); margin-top:1rem; text-align:center; font-size:1rem}

/* ---- 内容页（Blog/文章/Building/About）：导航与板块大标题保持毛笔体作站点标识，
   用户写/读的正文与单篇文章标题一律 Apple 系统字体(继承 body)，绝不套毛笔体 ---- */
main.doc{                       /* 覆盖首页那套居中 flex：内容页改为常规文档流、顶对齐、可滚动 */
  display:block;
  padding:clamp(1rem,4vh,2.25rem) var(--pad) clamp(3rem,10vh,6rem);
}
.page{max-width:44rem; margin:0 auto; width:100%}
.page .page-title{margin-bottom:clamp(1.2rem,4vh,2rem)} /* 板块标题(毛笔体)与下方列表/正文留白 */

/* 单篇文章标题/元信息 —— 这是用户写的内容，用系统字体，左对齐 */
.doc-title{
  font-family:inherit; font-weight:700;
  font-size:clamp(1.8rem,4.5vw,2.7rem); line-height:1.2;
  letter-spacing:-0.012em;
}
.doc-meta{color:var(--muted); font-size:.92rem; margin-top:.45rem}

/* 正文排版：Apple 系统字体、舒适阅读 */
.prose{font-size:1.06rem; line-height:1.75; color:#1b1b1b; margin-top:clamp(1.4rem,4vh,2rem)}
.prose>*{margin-top:0}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre,.prose img,.prose hr{margin-top:1.15em}
.prose h2{font-size:1.5rem; font-weight:700; line-height:1.3; margin-top:2em}
.prose h3{font-size:1.2rem; font-weight:700; margin-top:1.6em}
.prose ul,.prose ol{padding-left:1.45em}
.prose li{margin-top:.4em}
.prose li::marker{color:var(--muted)}
.prose a{color:inherit; text-decoration:underline; text-underline-offset:.18em; text-decoration-thickness:.06em}
.prose strong{font-weight:700}
.prose blockquote{border-left:3px solid #e4e4e4; padding-left:1em; color:#555; font-style:italic}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em; background:#f4f4f4; padding:.15em .4em; border-radius:4px}
.prose pre{background:#f6f6f6; padding:1em 1.1em; border-radius:8px; overflow:auto; font-size:.88rem; line-height:1.55}
.prose pre code{background:none; padding:0; font-size:1em}
.prose img{max-width:100%; height:auto; border-radius:8px; display:block}
.prose hr{border:none; border-top:1px solid #e8e8e8}

/* Blog / Building 列表 */
.post-list{list-style:none; display:flex; flex-direction:column; gap:1.7rem}
.post-list a{display:flex; flex-direction:column; gap:.15rem; text-decoration:none; color:var(--ink)}
.post-list .post-title{font-size:1.22rem; font-weight:650; line-height:1.3}
.post-list a:hover .post-title{text-decoration:underline; text-underline-offset:.2em}
.post-meta,.post-status{color:var(--muted); font-size:.9rem}
.post-summary{color:#555; margin-top:.4rem; font-size:.98rem; line-height:1.55}
.empty{color:var(--muted)}
.back{display:inline-block; margin-top:2.75rem; color:var(--muted); text-decoration:none; font-size:.95rem}
.back:hover{color:var(--ink)}

@media (max-width:560px){
  .topbar{flex-direction:column; align-items:flex-start}
  nav{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  nav a:hover{transform:none}
}