@charset "UTF-8";
/* ==========================================================================
   stylt.css · 玖桐博客统一风格表
   --------------------------------------------------------------------------
   适用页面：index.html（首页）/ posts/*.html（文章页）/ about.html（关于页）
   设计原则：配色完全沿用原页面（Miku 青 #39C5BB 系），观感（圆角 / 阴影 /
             悬浮放大）保持不变，只把布局重构为全流式自适应：
             字号、间距、内边距统一由 clamp() 跟随视口缩放。

   复用组件速查（新页面直接套用即可）：
     .header-fixed > .nav-inner           顶部固定导航（左标题 / 右昼夜按钮）
        .brand-wrap > .brand + .brand-caret + .brand-menu
        .nav-links  > .nav-link
        .theme-toggle
     .container                           页面主容器（宽度自适应 + 安全区）
     .card                                通用圆角卡片基类
     .hero                                首页欢迎卡片
     .post-list > .post-item              文章卡片列表 / 单张文章卡片
     .article / .article-body             文章页正文
     .prose                                富文本排版（关于页与文章正文通用）
     footer.card                          页脚

   引入方式：
     根目录页面  <link rel="stylesheet" href="./asset/stylt.css">
     子目录页面  <link rel="stylesheet" href="../asset/stylt.css">
   ========================================================================== */

/* ==========================================================================
   1. 设计令牌（配色与原先完全一致，尺寸改为自适应变量）
   ========================================================================== */
:root{
  /* ---- 配色：保持原值，不做任何改动 ---- */
  --primary:#39C5BB;
  --primary-dark:#0E948C;
  --bg:#f0f7f7;
  --surface:#ffffff;
  --text:#1a2423;
  --text-secondary:#546b69;
  --border:#c2e2e0;
  --shadow-normal: 0 4px 14px rgba(14,148,140,0.12), 0 1px 4px rgba(14,148,140,0.08);
  --shadow-hover: 0 10px 28px rgba(14,148,140,0.18), 0 3px 8px rgba(14,148,140,0.10);
  --radius:14px;

  /* ---- 自适应尺寸：小屏收窄、大屏放宽，不会溢出也不会太空 ---- */
  --content-max: 700px;                          /* 内容最大宽度 */
  --gutter: clamp(14px, 4vw, 24px);              /* 页面左右留白 */
  --card-pad: clamp(16px, 4.5vw, 26px);          /* 卡片内边距 */
  --card-gap: clamp(14px, 3vw, 20px);            /* 卡片间距 */
  --section-gap: clamp(18px, 4vw, 32px);         /* 区块顶部留白 */
  --gap-nav: clamp(8px, 2.4vw, 20px);            /* 导航元素间距 */
  --header-h: 68px;                              /* 导航实际高度，由脚本实测刷新 */

  /* ---- 自适应字号 ---- */
  --font-body: clamp(15px, 3.9vw, 17px);
  --font-nav: clamp(12.5px, 3.3vw, 15px);
  --font-brand: clamp(18px, 4.6vw, 24px);
  --font-h1: clamp(26px, 6.4vw, 36px);
  --font-h2: clamp(18px, 4.4vw, 22px);
  --font-small: clamp(12px, 3.2vw, 13px);

  /* ---- 动效 ---- */
  --speed: 0.24s;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

[data-theme="dark"]{
  --primary:#39C5BB;
  --primary-dark:#22a89e;
  --bg:#121c1b;
  --surface:#1e2d2c;
  --text:#e8f3f2;
  --text-secondary:#92b4b2;
  --border:#2e4442;
  --shadow-normal: 0 4px 16px rgba(0,0,0,0.45), 0 2px 6px rgba(57,197,187,0.08);
  --shadow-hover: 0 14px 32px rgba(0,0,0,0.55), 0 4px 10px rgba(57,197,187,0.14);
}

/* ==========================================================================
   2. 基础重置与全局自适应
   ========================================================================== */
*,
*::before,
*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
}
html,body{
  overflow-x:hidden;      /* 彻底禁止横向滚动 */
  max-width:100%;
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:var(--font-body);
  line-height:1.7;
  min-height:100vh;
  padding-top:var(--header-h);   /* 与固定导航等高，脚本会实时校准 */
  transition:background 0.4s ease, color 0.4s ease;
}
/* 所有媒体元素自适应容器宽度 */
img,svg,video,iframe,table{
  max-width:100%;
  height:auto;
}
a{
  color:var(--primary);
  overflow-wrap:break-word;
  word-break:break-word;
}
:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:2px;
  border-radius:6px;
}

/* ==========================================================================
   3. 顶部固定导航：左侧博客标题（悬浮出下拉菜单）+ 右侧昼夜按钮
   ========================================================================== */
.header-fixed{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:999;
  background-color:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-normal);
  padding-top:env(safe-area-inset-top, 0px);   /* 刘海屏自适应 */
  transition:opacity 0.32s ease, backdrop-filter 0.32s ease;
  opacity:1;
}
.header-fixed.scroll-down{
  opacity:0.72;
  backdrop-filter:blur(8px);
}
.nav-inner{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding-top:clamp(10px, 2.2vw, 16px);
  padding-bottom:clamp(10px, 2.2vw, 16px);
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
  display:flex;
  align-items:center;
  gap:var(--gap-nav);
  /* 不换行、不溢出：内部元素用 clamp 字号与省略保护 */
  flex-wrap:nowrap;
  min-width:0;
}

/* ---- 3.1 左上角博客标题（下拉菜单触发器） ---- */
.brand-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:2px;
  flex:0 1 auto;
  min-width:0;
}
.brand{
  display:inline-block;
  font-size:var(--font-brand);
  font-weight:600;
  line-height:1.25;
  color:var(--primary);
  text-decoration:none;
  white-space:nowrap;
  transition:opacity var(--speed) var(--ease);
}
.brand:hover{
  opacity:.82;
}
.brand-caret{
  flex:0 0 auto;
  border:0;
  background:transparent;
  color:var(--primary);
  font-size:clamp(10px, 2.6vw, 12px);
  line-height:1;
  padding:6px 4px;
  cursor:pointer;
  border-radius:6px;
  transition:transform var(--speed) var(--ease);
}
.brand-wrap:hover .brand-caret,
.brand-wrap:focus-within .brand-caret,
.brand-wrap.open .brand-caret{
  transform:rotate(180deg);
}

/* ---- 3.2 下拉菜单（默认淡出隐藏；展开 / 收起自带渐入渐出动画） ---- */
.brand-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:clamp(148px, 44vw, 180px);
  max-width:min(78vw, 240px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-hover);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px) scale(.98);
  transform-origin:top left;
  transition:opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
  z-index:1000;
}
/* 悬停桥接区：覆盖在标题与菜单之间的 10px 空隙上（旧 .brand-menu::before
   方案会被菜单自身的 overflow:hidden 裁掉、等于无效），鼠标从标题下移
   到菜单的途中始终停留在触发区，菜单不会闪退 */
.brand-wrap::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  width:max(100%, min(78vw, 240px));
  height:10px;
}
/* 鼠标设备：悬浮 / 聚焦即展开（触屏不启用，防止 hover 粘滞）；
   配合脚本的 350ms 滞留期，鼠标移向菜单途中菜单不会闪退 */
@media (hover:hover) and (pointer:fine){
  .brand-wrap:hover .brand-menu,
  .brand-wrap:focus-within .brand-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
}
/* 触屏 / 点击 / 脚本控制：加 .open 展开 */
.brand-wrap.open .brand-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}
.brand-menu a{
  display:block;
  padding:11px clamp(12px, 3.4vw, 14px);
  font-size:clamp(13px, 3.4vw, 14px);
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  transition:background-color 0.18s, color 0.18s;
}
.brand-menu a:hover,
.brand-menu a:focus-visible{
  background-color:var(--bg);
  color:var(--primary);
}
.brand-menu a + a{
  border-top:1px solid var(--border);
}

/* ---- 3.3 右侧导航链接（自动贴右，紧跟昼夜按钮） ---- */
.nav-links{
  display:flex;
  align-items:center;
  gap:var(--gap-nav);
  margin-left:auto;      /* 把整组推到右侧 */
  min-width:0;
}
.nav-link{
  color:var(--text-secondary);
  text-decoration:none;
  font-size:var(--font-nav);
  white-space:nowrap;
  transform-origin:center;
  transition:color 0.22s ease, transform 0.22s ease;
}
.nav-link:hover{
  color:var(--primary);
  transform:scale(1.08);
}

/* ---- 3.4 右上角昼夜切换按钮 ---- */
.theme-toggle{
  flex:0 0 auto;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  padding:6px clamp(8px, 2.4vw, 12px);
  border-radius:999px;
  font-size:var(--font-nav);
  font-family:inherit;
  line-height:1.45;
  cursor:pointer;
  white-space:nowrap;
  transform-origin:center;
  transition:background 0.25s ease, color 0.25s ease,
             border-color 0.25s ease, transform 0.25s ease;
}
.theme-toggle:hover{
  background:var(--primary);
  color:#ffffff;
  border-color:var(--primary);
  transform:scale(1.08);
}

/* ==========================================================================
   4. 主容器
   ========================================================================== */
.container{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right, 0px));
  padding-top:var(--section-gap);
  padding-bottom:clamp(28px, 6vw, 48px);
}

/* ==========================================================================
   5. 通用卡片组件（后续新卡片直接复用 .card）
   ========================================================================== */
.card{
  width:100%;
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow-normal);
  padding:var(--card-pad);
  margin-bottom:var(--card-gap);
  overflow-wrap:break-word;
  word-break:break-word;
  transition:box-shadow var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.card:hover{
  box-shadow:var(--shadow-hover);
}
/* 卡片内首个/末个元素不再产生多余外边距 */
.card > :first-child{ margin-top:0; }
.card > :last-child{ margin-bottom:0; }

/* 卡片内的基础排版（文章页 / 关于页复用） */
.card h1,
.page-title{
  font-size:var(--font-h1);
  font-weight:700;
  letter-spacing:-0.5px;
  line-height:1.3;
  margin-bottom:clamp(8px, 1.6vw, 14px);
}
.card h2,
.section-title{
  font-size:var(--font-h2);
  font-weight:600;
  line-height:1.4;
  color:var(--primary);
  margin:clamp(18px, 3.6vw, 24px) 0 10px;
}
.card h3{
  font-size:clamp(16px, 3.8vw, 18px);
  font-weight:600;
  margin:clamp(14px, 3vw, 20px) 0 8px;
}
.card p{
  margin-bottom:12px;
}
.text-secondary{
  color:var(--text-secondary);
}

/* ==========================================================================
   6. 首页：欢迎卡片
   ========================================================================== */
.hero h1{
  font-size:var(--font-h1);
  font-weight:700;
  letter-spacing:-0.5px;
  margin-bottom:12px;
}
.hero p{
  font-size:clamp(15px, 4vw, 17px);
  color:var(--text-secondary);
}

/* ==========================================================================
   7. 文章卡片列表（首页 post 卡片 · 后续新增文章直接复制 .post-item 结构）
   结构示例：
     <div class="post-list">
       <article class="card post-item">
         <h2 class="post-title"><a href="./posts/post1.html">标题</a></h2>
         <div class="post-meta">2026-10-04</div>
         <p class="post-desc">摘要</p>
       </article>
     </div>
   ========================================================================== */
.post-list{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--card-gap);
}
.post-list .card{
  margin-bottom:0;   /* 间距交给 grid gap，避免叠加 */
}
.post-item .post-title,
.post-item h2{
  font-size:var(--font-h2);
  font-weight:600;
  line-height:1.45;
  color:var(--text);   /* 覆盖 .card h2 的主题色，卡片标题用正文色 */
  margin:0;
}
.post-item .post-title a,
.post-item h2 a{
  color:var(--text);
  text-decoration:none;
  transition:color 0.22s ease;
}
.post-item .post-title a:hover,
.post-item h2 a:hover{
  color:var(--primary);
}
.post-meta{
  font-size:var(--font-small);
  color:var(--text-secondary);
  margin:8px 0 10px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  align-items:center;
}
.post-desc{
  font-size:clamp(14px, 3.6vw, 15px);
  color:var(--text-secondary);
  margin:0;
}
.post-tag{
  display:inline-block;
  font-size:var(--font-small);
  line-height:1.4;
  padding:2px 9px;
  border-radius:999px;
  color:var(--primary-dark);
  background:rgba(57,197,187,0.12);
  border:1px solid var(--border);
  white-space:nowrap;
}
[data-theme="dark"] .post-tag{
  color:var(--primary);
}

/* ==========================================================================
   8. 文章页正文
   ========================================================================== */
.article{
  width:100%;
}
.article-head{
  margin-bottom:clamp(14px, 3vw, 22px);
  padding:0 clamp(2px, 0.6vw, 6px);
}
.article-body{
  /* 与 .card 同源，只是在文章页承担正文容器 */
  background:var(--surface);
  padding:clamp(18px, 4.6vw, 32px) clamp(16px, 4.2vw, 28px);
  border-radius:var(--radius);
  box-shadow:var(--shadow-normal);
  transition:box-shadow var(--speed) var(--ease);
}
.article-body:hover{
  box-shadow:var(--shadow-hover);
}
.article-body h2{
  font-size:var(--font-h2);
  font-weight:600;
  margin:clamp(20px, 4vw, 28px) 0 12px;
}
.article-body h2:first-child{
  margin-top:0;
}
.article-body p{
  font-size:clamp(15px, 3.9vw, 17px);
  margin-bottom:16px;
}
.post-time{
  font-size:var(--font-small);
  color:var(--text-secondary);
  margin-bottom:0;
}

/* ---- 代码块：明暗主题 + 横向滚动不撑破布局 ---- */
pre{
  background:#e8efef;
  color:#1a2423;
  padding:clamp(14px, 3.4vw, 18px);
  border-radius:10px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:20px 0;
  max-width:100%;
  font-family:Menlo,Monaco,Consolas,monospace;
  font-size:clamp(12.5px, 3.4vw, 14px);
  line-height:1.6;
}
[data-theme="dark"] pre{
  background:#2c3c3b;
  color:#e8f3f2;
}
code{
  font-family:Menlo,Monaco,Consolas,monospace;
  color:var(--primary-dark);
  overflow-wrap:break-word;
}
[data-theme="dark"] code{
  color:var(--primary);
}
/* 行内代码：只在非 pre 环境加底色，避免影响代码块 */
:not(pre) > code{
  background:rgba(57,197,187,0.12);
  border-radius:6px;
  padding:1px 6px;
  font-size:0.92em;
}

/* ==========================================================================
   9. 富文本排版 .prose（关于页 / 未来文章正文都能直接用）
   ========================================================================== */
.prose p{
  font-size:clamp(15px, 3.9vw, 17px);
  margin-bottom:12px;
}
.prose ul,
.prose ol{
  margin:0 0 14px;
  padding-left:1.35em;
}
.prose li{
  margin-bottom:6px;
}
.prose blockquote{
  margin:16px 0;
  padding:10px 16px;
  border-left:3px solid var(--primary);
  background:var(--bg);
  border-radius:0 10px 10px 0;
  color:var(--text-secondary);
}
.prose img{
  border-radius:10px;
  margin:14px 0;
}
.prose hr{
  border:0;
  border-top:1px solid var(--border);
  margin:22px 0;
}
.prose table{
  width:100%;
  border-collapse:collapse;
  margin:16px 0;
  font-size:clamp(13px, 3.4vw, 15px);
}
.prose th,
.prose td{
  border:1px solid var(--border);
  padding:8px 10px;
  text-align:left;
}

/* ==========================================================================
   10. 页脚
   ========================================================================== */
footer.card{
  margin-top:clamp(28px, 6vw, 40px);
  margin-bottom:0;
  font-size:var(--font-small);
  color:var(--text-secondary);
  text-align:center;
}
footer.card a{
  color:var(--primary);
  text-decoration:none;
}

/* ==========================================================================
   11. 响应式断点（clamp 之外的细节微调）
   ========================================================================== */
/* 平板：仍保持约 700px 的舒适行宽，不强行拉满 */
@media (max-width:1023px) and (min-width:641px){
  :root{
    --content-max:700px;
  }
}
/* 手机：占满可用宽度，同时保留左右留白 */
@media (max-width:640px){
  :root{
    --content-max:100%;
  }
  .nav-inner{
    gap:clamp(6px, 2vw, 12px);
  }
  .card:hover{
    /* 触屏无 hover，取消位移动效，避免“点了才浮起”的错觉 */
    box-shadow:var(--shadow-normal);
  }
  .brand-menu{
    left:-4px;
  }
  .brand-wrap::after{
    left:-4px;   /* 与菜单左移量一致，桥接区始终盖住空隙 */
  }
}
/* 小屏手机 */
@media (max-width:420px){
  .brand-caret{
    padding:6px 2px;
  }
  .post-meta{
    gap:4px 8px;
  }
}
/* 极窄屏：进一步压缩导航，保证标题与昼夜按钮永远同一行 */
@media (max-width:360px){
  :root{
    --font-brand:17px;
    --font-nav:12px;
    --gutter:12px;
  }
  .brand-caret{
    padding:6px 1px;
  }
}
/* 大屏：内容略放宽，避免过长行宽 */
@media (min-width:1024px){
  :root{
    --content-max:740px;
  }
}

/* ==========================================================================
   12. 无障碍与打印
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}
@media print{
  .header-fixed,
  .theme-toggle{
    display:none;
  }
  body{
    padding-top:0;
    background:#fff;
  }
  .card,
  .article-body{
    box-shadow:none;
    border:1px solid #ddd;
  }
}