/* ==========================================================================
   Fonts（注意：fonts 与 assets 同级，CSS 在 assets/css/）
   ========================================================================== */
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/Inter-Regular.woff2") format("woff2");
}
@font-face{
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/Inter-Italic.woff2") format("woff2");
}
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/Inter-Medium.woff2") format("woff2");
}
@font-face{
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/Inter-MediumItalic.woff2") format("woff2");
}
@font-face{
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/Inter-Bold.woff2") format("woff2");
}
@font-face{
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/Inter-BoldItalic.woff2") format("woff2");
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#7f7f7f;
  --brand:#0a0a0a;
  --accent:#00c853;
  --link:#0b57d0;
  --border:#e6e6e6;
  --header-bg:#f7f7f7;
  --footer-bg:#f7f7f7;
  --nav-text:#222222;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }

body{
  display:flex;                 /* Sticky footer 架构 */
  flex-direction:column;
  flex:1;
  padding-bottom:50px;          /* 页底留白 */
  background:var(--bg);
  color:var(--text);
  line-height:1.8;
  letter-spacing:.05em;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
  /* 数字与本地化功能：等宽、大小写、连字、斜杠零、开口 4 */
  font-feature-settings: "liga","tnum","case","calt","zero","ss01","locl";
}

a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:none; }

.container{ width:92%; max-width:760px; margin:0 auto; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:3000;
  background:var(--header-bg);
  border-bottom:none;
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}

.logo-text{
  font-family:monospace;
  font-size:1.125rem; font-weight:700; line-height:1;
  color:var(--nav-text);
  display:inline-flex; align-items:center; gap:8px;
}

.logo-text .cursor{
  display:inline-block; width:10px; height:1em; margin-left:6px;
  background:var(--accent);
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{ 50%{opacity:0;} }

.site-nav{
  display:flex; gap:18px;
  background:var(--header-bg);
}
.site-nav a{
  font-size:1rem;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
  color:var(--nav-text);
  text-decoration:none;
}
.site-nav a.active{ font-weight:700; }

/* 抽屉遮罩（在 header 下层） */
#overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  display:none; z-index:2900;
}

/* 汉堡按钮（PC 隐藏，移动端显示） */
.hamburger{
  display:none; background:none; border:0; padding:10px; cursor:pointer;
  color:var(--text);
}
.hamburger .bar{
  display:block; width:1.6em; height:2px; margin:.32em 0;
  background:currentColor; border-radius:2px;
}

/* 动效降级 */
@media (prefers-reduced-motion: reduce){
  .logo-text .cursor{ animation:none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  margin-top:auto;              /* 吸附底部 */
  position:relative; bottom:0;
  background:none !important;
  border-top:none;
  text-align:center;
  padding:10px 0;
}
.site-footer .container{
  padding:8px 0;
  color:#999;
  font-size:12px; font-weight:bold;
  text-align:center;
  animation:footer-breath 4s ease-in-out infinite;
}
@keyframes footer-breath{
  0%{opacity:.8; color:#8c8c8c;}
  50%{opacity:1; color:#aaa;}
  100%{opacity:.8; color:#8c8c8c;}
}

/* 统一宽度的底部分隔线与声明 */
.footer-sep{
  border:0; border-top:1px solid #e6e6e6;
  width:92%; max-width:760px;
  margin:20px auto;
}
.footer-disclaimer{
  width:92%; max-width:760px; margin:16px auto 0;
  font-size:14px; line-height:1.6; color:#595959;
  text-align:justify;
}
.footer-disclaimer h2{
  font-size:18px; font-weight:bold; color:var(--text); margin-bottom:12px;
}
.footer-disclaimer p{ margin-bottom:8px; }
.footer-disclaimer a{ font-family:Consolas,monospace; color:#0b57d0; }
.footer-disclaimer a:hover{ color:#00c853; }
footer .container{ width:92%; max-width:760px; margin:0 auto; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.pad-y{ padding:32px 0; }
.readable{ max-width:760px; }
.muted{ color:var(--muted); }
.soft{ border:0; border-top:1px solid var(--border); margin:24px 0; }
.brand{ font-weight:800; }
/* 数字仅保留等宽，不强制字体（避免覆盖 Inter） */
.digits{ font-family:inherit !important; font-variant-numeric:tabular-nums; }

/* ==========================================================================
   Home / Hero
   ========================================================================== */
.full-center{ min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; text-align:center; }
.hero{ padding:60px 0; text-align:center; }
.hero-title{
  font-family:Consolas,monospace;
  font-size:48px; font-weight:700; color:var(--text);
  margin:0 0 12px; letter-spacing:.05em;
}
.hero-sep{ width:40px; border:0; border-top:1px solid rgba(127,127,127,.3); margin:12px auto; }
.hero-subtitle{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:18px; color:var(--muted); margin-top:8px; font-weight:400;
}

/* ==========================================================================
   Page Title
   ========================================================================== */
.page-title{
  font-size:2.5rem; font-weight:800; color:var(--text);
  margin:35px 0 20px;
}

/* ==========================================================================
   Articles (列表页)
   ========================================================================== */
.article-groups{
  display:flex; flex-direction:column; gap:48px; margin-top:24px;
}

/* 年份-列表两列：采用 flex（年份窄、列表宽） */
.article-group{ display:flex; gap:0; }

/* 年份：Inter + 等宽数字 + 斜杠零 + 开口 4，轻、窄、左对齐 */
.article-year{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei","Noto Sans SC",Helvetica,Arial,sans-serif !important;
  font-variant-numeric: tabular-nums slashed-zero !important;
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1, "cv04" 1 !important;
  font-weight:400; font-size:1.6em; letter-spacing:.06em; line-height:1;
  opacity:.6; text-align:left;
  margin-top:6px; margin-right:1.8em;
}

.article-list{ flex:1; list-style:none; margin:0; padding:0; }
.article-item{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0;
  border-bottom:1px dashed rgba(0,0,0,.25);
}
.article-item:last-child{ border-bottom:none; }

.article-item a{
  display:flex; justify-content:space-between; align-items:baseline;
  width:100%; color:inherit; text-decoration:none;
}
.article-item a:hover .article-title{ color:var(--link); }

.article-title{ flex:1; font-weight:400; margin:0; }
.article-date{
  flex-shrink:0; margin-left:1em; min-width:auto;
  font-size:.95em; opacity:.6; color:var(--muted);
  font-family:inherit;
}

/* ==========================================================================
   About & Post Content
   ========================================================================== */
.about-body p, .readable p{
  text-align:justify; text-justify:distribute;
  margin:0 0 1.5em; line-height:1.9; letter-spacing:.05em;
}
.post-title{ font-size:26px; margin:0 0 8px; font-weight:800; color:var(--text); }
.post-title + .muted time{ font-size:14px; color:var(--muted); }

/* 表格/图片 */
.readable table{
  width:100%; border-collapse:collapse; margin:1.5em 0; font-size:.95rem;
}
.readable th, .readable td{ border:1px solid var(--border); padding:10px; text-align:center; }
.readable th{ background:#f7f7f7; color:#111; font-weight:700; }
.readable tbody tr:nth-child(odd) td{ background:#fafafa; }
.readable .center-img{
  display:block; margin:1.5em auto; max-width:90%; height:auto;
  border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* ==========================================================================
   Resources / Cards
   ========================================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px; margin-top:12px;
}
.card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:12px 16px;
  display:flex; flex-direction:column; justify-content:space-between; gap:6px;
  min-height:120px;
}
.card-title{
  font-weight:700; color:var(--text); text-decoration:none; transition:color .2s ease;
}
.card-title:hover{ color:var(--link); text-decoration:none; }
.card-meta{ color:var(--muted); font-size:13px; }
.card a.btn{
  align-self:flex-end; display:inline-block;
  padding:4px 12px; border-radius:6px; background:var(--accent);
  color:#fff; font-size:13px; text-decoration:none; transition:background .2s ease;
}
.card a.btn:hover{ background:#00a844; }

/* ==========================================================================
   Tools Grid
   ========================================================================== */
.tools-grid{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:20px; margin-top:20px;
}
.tool-item{
  display:block; color:inherit; text-decoration:none;
  background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:16px; display:flex; flex-direction:column; gap:12px;
  transition: box-shadow .3s ease-in-out, background-color .2s ease;
}
.tool-item:hover{ box-shadow:0 4px 12px rgba(0,0,0,.1); background:#f0f0f0; }
.tool-title{ font-weight:700; font-size:15px; display:flex; align-items:center; }
.tool-title .tool-icon{ margin-right:8px; font-size:18px; }
.tool-desc{ font-size:13px; color:var(--muted); }
.tool-link{ font-size:13px; font-weight:600; color:var(--link); text-decoration:none; transition:color .2s ease; }
.tool-link:hover{ color:var(--accent); }

/* ==========================================================================
   Mobile (≤ 860px)
   ========================================================================== */
@media (max-width: 860px){
  /* 抽屉导航 */
  .site-nav{
    position:fixed; top:0; right:-100%;
    min-width:max-content;
    height:100vh; padding:56px 32px 20px;
    background:var(--header-bg);
    display:flex; flex-direction:column; gap:16px;
    transition:right .3s ease; z-index:3100;
  }
  .site-nav.open{ right:0; }
  .hamburger{ display:block; position:relative; z-index:3200; }

  /* Hero 调整 */
  .hero-title{ font-size:28px; letter-spacing:.03em; }
  .hero-subtitle{ font-size:14px; }
  .hero-sep{ width:30px; }

  /* 文章归档：年份上移为小标题 */
  .article-group{ display:block; }
  .article-year{ font-size:1.4em; margin:0 0 8px; padding-top:0; opacity:.65; }
  .article-item{ padding:10px 0; }

  /* 工具页网格 */
  .tools-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

  /* 底部文案尺寸 */
  .footer-disclaimer{ font-size:12px; width:92%; margin-top:12px; }
  .footer-sep{ width:92%; margin:20px auto; border-top:1px solid #e6e6e6; }
}

/* 更小屏（≤ 420px） */
@media (max-width: 420px){
  .hero-title{ font-size:22px; letter-spacing:.02em; margin-bottom:8px; }
  .hero-subtitle{ font-size:12px; margin-top:6px; }
  .hero-sep{ width:24px; margin:8px auto; }
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#121212;
    --text:#e0e0e0;
    --muted:#b0b0b0;
    --brand:#ffffff;
    --accent:#00e676;
    --link:#64b5f6;
    --border:#333333;
    --header-bg:#1e1e1e;
    --footer-bg:#1e1e1e;
    --nav-text:#ffffff;
  }

  body{ background:var(--bg); color:var(--text); }
  .site-header{ background:var(--header-bg); }
  .logo-text .cursor{ background:#00e676; }
  .hamburger{ color:#e0e0e0; }

  .article-item{ border-bottom:1px dashed rgba(255,255,255,.25); }
  .article-date{ color:var(--muted); }

  .readable th, .readable td{ border:1px solid var(--border); }
  .readable th{ background:#2a2a2a; color:#e0e0e0; }
  .readable td{ background:#1a1a1a; color:#ddd; }
  .readable tbody tr:nth-child(odd) td{ background:#181818; }
  .readable .center-img{ box-shadow:0 4px 12px rgba(0,0,0,.5); }

  .card{ background:#1c1c1c; border:1px solid var(--border); }
  .card a.btn{ background:#2c2c2c; border:1px solid var(--border); color:var(--text); }
  .card a.btn:hover{ background:#333; }

  .tools-grid .tool-item{ background:#1c1c1c; border:1px solid var(--border); box-shadow:none; }
  .tools-grid .tool-item:hover{ background:#242424; box-shadow:0 4px 12px rgba(0,0,0,.35); }
  .tools-grid .tool-title{ color:var(--text); }
  .tools-grid .tool-desc{ color:var(--muted); }
  .tools-grid .tool-link{ color:var(--link); }
  .tools-grid .tool-link:hover{ color:var(--accent); }

  .site-footer{ background:none !important; color:var(--muted); }
  .site-footer .container{ animation:footer-breath-dark 4s ease-in-out infinite; }
  @keyframes footer-breath-dark{
    0%{opacity:.8; color:#888;}
    50%{opacity:1; color:#bbb;}
    100%{opacity:.8; color:#888;}
  }
}