/* ===========================================================
   TedLiang 主站样式
   刻度（只用这些值，不要临时造新的）
     字号   .75 / .82 / .9 / 1 / 1.15 / 1.4 / 1.75 / 2.6rem
     行高   1.25 标题 / 1.6 卡片正文 / 1.8 长文
     圆角   8 / 14 / 22px + 999px 胶囊（嵌套时外大内小）
     间距   8 的倍数：8 16 24 32 48 64 96
   =========================================================== */
:root{
  --ink:#101319;

  /* 灰阶 5 级：越小的字用越深的色，不要反着来 */
  --text-main:#1a1e27;
  --text-secondary:#4c5461;
  --text-tertiary:#5f6875;
  --text-quiet:#6b7280;   /* 小字下限，对底色 4.9:1，达 AA */
  --text-faint:#9aa1ad;   /* 仅用于分隔符等非文字信息 */

  --accent:#2f57e6;
  --accent-strong:#2140bd;
  --accent-soft:rgba(47,87,230,.07);

  --bg:#fbfbfd;
  --surface:#ffffff;
  --line:rgba(16,19,25,.10);
  --line-soft:rgba(16,19,25,.07);
  --line-strong:rgba(16,19,25,.18);

  /* 静止态不给阴影，只在 hover 用这一个 */
  --shadow-hover:0 8px 24px -12px rgba(16,19,25,.16);
  --shadow-pop:0 16px 40px -20px rgba(16,19,25,.22);

  --r-sm:8px;
  --r-md:14px;
  --r-lg:22px;

  --max-width:1080px;
  --ease:cubic-bezier(.22,1,.36,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --mono:"SF Mono","Cascadia Mono","Consolas",monospace;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{
  min-height:100vh;
  font-family:var(--font);
  color:var(--text-main);
  line-height:1.6;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(47,87,230,.14);color:var(--accent-strong)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--r-sm)}

.frame{width:min(var(--max-width),calc(100% - 48px));margin:0 auto}

/* ---------- 顶栏 ---------- */
.site-topbar{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--line-soft);
  background:rgba(251,251,253,.72);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
}
.nav-shell{
  position:relative;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.nav-center{display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:8px 16px;
  border-radius:999px;
  color:var(--text-tertiary);
  font-size:.9rem;
  font-weight:600;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-link:hover{color:var(--text-main);background:rgba(16,19,25,.05)}
.nav-link.active{color:var(--ink);background:rgba(16,19,25,.06)}
.nav-item{position:relative;display:inline-flex}
.nav-item::after{content:"";position:absolute;top:100%;left:0;right:0;height:8px}
.nav-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:50%;
  min-width:152px;
  transform:translate(-50%,8px);
  opacity:0;
  pointer-events:none;
  display:grid;
  gap:2px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:rgba(255,255,255,.9);
  box-shadow:var(--shadow-pop);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.nav-dropdown a{
  display:block;
  border-radius:var(--r-sm);
  padding:8px 16px;
  color:var(--text-tertiary);
  font-size:.82rem;
  font-weight:600;
}
.nav-dropdown a:hover{background:var(--accent-soft);color:var(--accent-strong)}

/* 汉堡按钮，桌面端隐藏 */
.nav-toggle{
  display:none;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text-main);
  cursor:pointer;
}
.nav-toggle .nav-toggle-bars{position:relative;display:block;width:16px;height:10px}
.nav-toggle .nav-toggle-bars::before,
.nav-toggle .nav-toggle-bars::after{
  content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .22s var(--ease),top .22s var(--ease);
}
.nav-toggle .nav-toggle-bars::before{top:0}
.nav-toggle .nav-toggle-bars::after{top:8px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{top:4px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{top:4px;transform:rotate(-45deg)}

/* ---------- 版式骨架 ---------- */
main{width:100%}
.section{padding:0 0 96px}

/* 小标签：不再用等宽 + 全大写，改成正常字体的克制标签 */
.eyebrow{
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--text-quiet);
  font-weight:600;
}

/* 区块标题：靠留白分区，不画横线 */
.section-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin-bottom:32px;
}
.section-head h2{font-size:1.4rem;font-weight:700;line-height:1.25;color:var(--ink)}
.more-link{
  color:var(--text-tertiary);
  font-size:.82rem;
  font-weight:600;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .18s ease;
}
.more-link:hover{color:var(--accent)}
.more-link:hover .arw{transform:translateX(2px)}
.arw{transition:transform .18s ease}

/* ---------- 首页 hero ---------- */
.hero{padding:96px 0 48px}
.hero .eyebrow{margin-bottom:24px;display:block}
.hero h1{
  font-size:clamp(2.6rem,6.2vw,4rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.04em;
  color:var(--ink);
}
.hero p{
  margin-top:24px;
  font-size:1.15rem;
  color:var(--text-secondary);
  max-width:56ch;
  line-height:1.8;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

/* ---------- 首页作品卡 ---------- */
.home-works{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.home-work{
  display:flex;flex-direction:column;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.home-work:hover{transform:translateY(-1px);border-color:var(--line-strong);box-shadow:var(--shadow-hover)}
.hw-visual{height:184px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hw-body{padding:24px}
.hw-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:8px}
.hw-body h3{font-size:1.15rem;font-weight:700;line-height:1.25;color:var(--ink)}
.hw-kind{font-size:.75rem;color:var(--text-quiet);white-space:nowrap}
.hw-body p{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}
.hw-body p strong{color:var(--text-main);font-weight:700}
.hw-go{font-size:.82rem;font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.home-work:hover .hw-go .arw{transform:translateX(3px)}

/* 考试时钟卡：图标与数码管并排
   真实数码管无光晕：亮段纯红、熄灭段暗红、纯黑底 */
.hw-clock{background:#000;display:flex;align-items:center;justify-content:center;gap:24px}
.hw-clock-icon{width:88px;height:88px;object-fit:contain;border-radius:var(--r-md)}
.led-clock{position:relative;display:flex;align-items:center;gap:8px}
.led-digit{width:34px;height:62px;position:relative}
.led-seg{position:absolute;background:#ff2323}
.led-seg.off{background:#280707}
.led-seg.a,.led-seg.d,.led-seg.g{left:7px;width:20px;height:6px;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}
.led-seg.a{top:0}.led-seg.g{top:28px}.led-seg.d{bottom:0}
.led-seg.b,.led-seg.c,.led-seg.e,.led-seg.f{width:6px;height:23px;clip-path:polygon(50% 0,100% 12%,100% 88%,50% 100%,0 88%,0 12%)}
.led-seg.b{right:2px;top:4px}.led-seg.c{right:2px;bottom:4px}.led-seg.f{left:2px;top:4px}.led-seg.e{left:2px;bottom:4px}
.led-colon{width:8px;height:44px;position:relative}
.led-colon::before,.led-colon::after{content:"";position:absolute;left:1px;width:6px;height:6px;border-radius:50%;background:#ff2323}
.led-colon::before{top:10px}.led-colon::after{bottom:10px}

/* 6 位（带秒）：略小以适应卡片 */
.led-clock-sec{gap:7px}
.led-clock-sec .led-digit{width:28px;height:52px}
.led-clock-sec .led-seg.a,.led-clock-sec .led-seg.d,.led-clock-sec .led-seg.g{left:6px;width:16px;height:5px}
.led-clock-sec .led-seg.g{top:23px}
.led-clock-sec .led-seg.b,.led-clock-sec .led-seg.c,.led-clock-sec .led-seg.e,.led-clock-sec .led-seg.f{width:5px;height:19px}
.led-clock-sec .led-seg.b,.led-clock-sec .led-seg.f{top:4px}
.led-clock-sec .led-seg.c,.led-clock-sec .led-seg.e{bottom:4px}
.led-clock-sec .led-colon{width:6px;height:38px}
.led-clock-sec .led-colon::before{top:9px}.led-clock-sec .led-colon::after{bottom:9px}

/* 小L工具箱卡：品牌图标置于柔和底 */
.hw-brand{background:radial-gradient(120% 120% at 50% 30%,#f3f6fd,#e7ecf7);display:grid;place-items:center}
.hw-brand img{width:88px;height:88px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(47,87,230,.22))}

/* ---------- 作品页：详情卡 ---------- */
.work-list{display:flex;flex-direction:column;gap:24px}
.work-detail{
  display:grid;grid-template-columns:minmax(0,1fr) 400px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:var(--surface);
  transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.work-detail:hover{box-shadow:var(--shadow-hover);border-color:var(--line-strong)}
.wd-body{padding:32px;display:flex;flex-direction:column}
.wd-eyebrow{font-size:.75rem;color:var(--text-quiet);margin-bottom:16px}
.wd-body h2{font-size:1.75rem;font-weight:700;line-height:1.25;color:var(--ink)}
.wd-body>p{font-size:1rem;color:var(--text-secondary);line-height:1.8;margin-top:16px}
.wd-body>p strong{color:var(--text-main);font-weight:700}
.wd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.wd-tags span{font-size:.82rem;color:var(--text-tertiary);border:1px solid var(--line);border-radius:999px;padding:4px 16px;background:var(--bg)}
.wd-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}
.wd-visual{position:relative;display:grid;place-items:center;overflow:hidden;border-left:1px solid var(--line)}
.wd-visual.wd-clock{background:#000}
.wd-clock-icon{width:104px;height:104px;object-fit:contain;border-radius:var(--r-md)}
.wd-visual.wd-brand{background:radial-gradient(120% 120% at 50% 32%,#f3f6fd,#e7ecf7)}
.wd-visual.wd-brand img{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 16px 32px rgba(47,87,230,.24))}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 24px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:var(--surface);
  font-weight:600;
  font-size:.9rem;
  color:var(--text-main);
  transition:transform .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn:hover{transform:translateY(-1px);border-color:var(--accent);color:var(--accent-strong);box-shadow:var(--shadow-hover)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;box-shadow:var(--shadow-hover)}

/* ---------- 记录 / 近况 ---------- */
.log-list{display:flex;flex-direction:column;list-style:none}
.log-row{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:24px;
  padding:24px 0;
  border-top:1px solid var(--line);
}
.log-row:last-child{border-bottom:1px solid var(--line)}
.log-date{font-family:var(--mono);font-size:.82rem;color:var(--text-quiet)}
.log-body h3{font-size:1.15rem;font-weight:700;line-height:1.25;color:var(--ink);margin-bottom:8px}
.log-body p{font-size:.9rem;color:var(--text-secondary);line-height:1.6}
.log-tag{display:inline-block;margin-top:8px;font-size:.75rem;color:var(--text-quiet)}

/* ---------- 内页 hero ---------- */
.page-hero{padding:80px 0 32px}
.page-hero .eyebrow{display:block;margin-bottom:16px}
.page-hero h1{font-size:clamp(1.75rem,5vw,2.6rem);font-weight:800;line-height:1.25;color:var(--ink)}
.page-hero p{margin-top:16px;font-size:1rem;color:var(--text-secondary);max-width:56ch;line-height:1.8}

/* ---------- 关于页 ---------- */
.prose{max-width:62ch}
.prose p{font-size:1.15rem;color:var(--text-secondary);line-height:1.8;margin-bottom:24px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text-main);font-weight:700}
.prose a{color:var(--accent);font-weight:600}
.prose a:hover{color:var(--accent-strong)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:48px;align-items:start}
.about-side{display:grid;gap:16px}
.contact-block{border:1px solid var(--line);border-radius:var(--r-md);padding:24px;background:var(--surface)}
.contact-block h3{font-size:.82rem;color:var(--text-quiet);font-weight:600;margin-bottom:16px}
.contact-block a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 0;color:var(--text-main);font-size:.9rem;font-weight:600;
  border-top:1px solid var(--line-soft);
}
.contact-block a:first-of-type{border-top:0}
.contact-block a:hover{color:var(--accent)}
.contact-block a span{color:var(--text-quiet);font-weight:400;font-size:.82rem}

/* ---------- 页脚 ---------- */
.site-footer{
  border-top:1px solid var(--line);
  background:var(--surface);
  padding:64px 0 32px;
  color:var(--text-secondary);
  font-size:.9rem;
}
.footer-inner{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(140px,.5fr));gap:48px}
.footer-brand{font-weight:700;color:var(--ink);font-size:1rem;margin-bottom:8px;letter-spacing:-.02em}
.footer-copy{max-width:38ch;color:var(--text-secondary);line-height:1.6}
.footer-col h3{font-size:.82rem;color:var(--text-quiet);font-weight:600;margin-bottom:16px}
.footer-links{display:grid;gap:8px}
.footer-links a{color:var(--text-secondary)}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--text-quiet);font-size:.82rem;
}
.footer-record a{color:var(--text-quiet)}
.footer-record a:hover{color:var(--accent)}

/* ---------- 备案信息 ---------- */
.beian-records{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  line-height:1;
  white-space:nowrap;
}
.beian-records .record-divider{display:inline-flex;align-items:center;color:var(--text-faint)}
.beian-records .police-record{display:inline-flex;align-items:center;gap:8px}
.beian-records img.beian-logo{flex:0 0 16px;width:16px;height:16px;object-fit:contain}

/* ---------- 响应式 ---------- */
@media (max-width:860px){
  .section{padding:0 0 64px}
  .hero{padding:64px 0 32px}
  .home-works{grid-template-columns:1fr}
  .work-detail{grid-template-columns:1fr}
  .wd-visual{min-height:200px;border-left:0;border-top:1px solid var(--line);order:-1}
  .about-grid{grid-template-columns:1fr;gap:32px}
  .log-row{grid-template-columns:1fr;gap:8px}
  .footer-inner{grid-template-columns:1fr;gap:32px}
}

/* 手机端导航：收进汉堡面板 */
@media (max-width:720px){
  .nav-toggle{display:inline-flex}
  .nav-center{
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding:8px;
    border:1px solid var(--line);
    border-radius:var(--r-md);
    background:var(--surface);
    box-shadow:var(--shadow-pop);
  }
  .nav-center.open{display:flex}
  .nav-link{padding:12px 16px;border-radius:var(--r-sm);font-size:.9rem}
  .nav-item{display:flex;flex-direction:column}
  /* 下拉在手机端变成常显的缩进子列表 */
  .nav-dropdown{
    position:static;
    display:grid;
    opacity:1;
    pointer-events:auto;
    transform:none;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    min-width:0;
    padding:0 0 8px 16px;
  }
  .nav-dropdown a{padding:8px 16px;border-radius:var(--r-sm)}
}

@media (max-width:520px){
  .frame{width:min(100% - 32px,var(--max-width))}
  .hw-clock .led-clock-sec{transform:none}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px}
  .beian-records{flex-wrap:wrap;white-space:normal;font-size:.75rem}
}